-
- Video{selectedCreator?.videoTimeRange || '--'}
-
-
-
{selectedCreator?.avgVideoGpm || '--'}
-
Video GPM
-
-
-
{selectedCreator?.videos?.length || '--'}
-
Videos
-
-
-
{selectedCreator?.avgVideoViews || '--'}
-
Avg. Video Views
-
-
-
{selectedCreator?.avgVideoEngagements || '--'}
-
Avg. Video Engagement
-
-
-
{selectedCreator?.avgVideoLikes || '--'}
-
Avg. Video Likes
-
-
-
- Shoppable Video{selectedCreator?.videoTimeRange || '--'}
-
-
-
{selectedCreator?.avgVideoGpm || '--'}
-
Video GPM
-
-
-
{selectedCreator?.videos?.length || '--'}
-
Videos
-
-
-
{selectedCreator?.avgVideoViews || '--'}
-
Avg. Video Views
-
-
-
{selectedCreator?.avgVideoEngagements || '--'}
-
Avg. Video Engagement
-
-
-
{selectedCreator?.avgVideoLikes || '--'}
-
Avg. Video Likes
-
-
-
- LIVE{selectedCreator?.liveTimeRange || '--'}
-
-
-
{selectedCreator?.avgLiveGpm || '--'}
-
LIVE GPM
-
-
-
{selectedCreator?.liveVideos || '--'}
-
LIVE Videos
-
-
-
{selectedCreator?.avgLiveViews || '--'}
-
Avg. LIVE Views
-
-
-
{selectedCreator?.avgLiveEngagements || '--'}
-
Avg. LIVE Engagement
-
-
-
{selectedCreator?.avgLiveLikes || '--'}
-
Avg. LIVE Likes
-
-
-
- Shoppable LIVE{selectedCreator?.liveTimeRange || '--'}
-
-
-
{selectedCreator?.avgLiveGpm || '--'}
-
LIVE GPM
-
-
-
{selectedCreator?.liveVideos || '--'}
-
LIVE Videos
-
-
-
{selectedCreator?.avgLiveViews || '--'}
-
Avg. LIVE Views
-
-
-
{selectedCreator?.avgLiveEngagements || '--'}
-
Avg. LIVE Engagement
-
-
-
{selectedCreator?.avgLiveLikes || '--'}
-
Avg. LIVE Likes
-
-
- {selectedCreator?.videosWithProduct?.length > 0 &&
- selectedCreator?.videosWithProduct.map((video) => (
-
-
-
-
-
{video.title}
-
- Release Time{video.releaseTime}
-
-
-
- {video.views}
-
-
-
- {video.likes}
-
+function CreatorTrends({ selectedCreator }) {
+ const [activeTab, setActiveTab] = useState('gmv');
+
+ const lineOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ position: 'bottom',
+ },
+ },
+ };
+ const processChartData = (tab) => {
+ return {
+ labels: selectedCreator?.trendsData?.dates,
+ datasets: [
+ {
+ label: tab,
+ data: selectedCreator?.trendsData[tab],
+ fill: false,
+ borderColor: '#6366f1',
+ backgroundColor: '#6366f1',
+ tension: 0.4,
+ },
+ ],
+ };
+ };
+
+ return (
+
+
+ Trends{selectedCreator?.liveTimeRange || '--'}
+
+
+
setActiveTab('gmv')}
+ >
+ GMV
+
+
setActiveTab('items_sold')}
+ >
+ Items Sold
+
+
setActiveTab('followers')}
+ >
+ Followers
+
+
setActiveTab('video_views')}
+ >
+ Video Views
+
+
setActiveTab('engagement_rate')}
+ >
+ Engagement Rate
+
+
+
+
+
+
+ );
+}
+function CreatorVideos({ selectedCreator }) {
+ return (
+
+
Videos
+ {selectedCreator?.videosData?.regular_videos.total > 0 &&
+ selectedCreator?.videosData.regular_videos?.videos.map((video) => (
+
+
+
+
+
+ {video.title}
+
+
+ Release Time{video.release_date}
+
+
+
+ {video.view_count}
+
+
+
+ {video.like_count}
- ))}
-
+
+ ))}
+
+
Videos with Product
+ {selectedCreator?.videosData?.product_videos?.total > 0 &&
+ selectedCreator?.videosData?.product_videos?.videos.map((video) => (
+
+
+
+
+
+ {video.title}
+
+
+ Release Time{video.release_date}
+
+
+
+ {video.view_count}
+
+
+
+ {video.like_count}
+
+
+
+ ))}
);
}
diff --git a/src/store/slices/creatorsSlice.js b/src/store/slices/creatorsSlice.js
index 55dc569..bfa71d8 100644
--- a/src/store/slices/creatorsSlice.js
+++ b/src/store/slices/creatorsSlice.js
@@ -262,7 +262,7 @@ export const fetchPrivateCreators = createAsyncThunk(
export const fetchCreatorDetail = createAsyncThunk(
'creators/fetchCreatorDetail',
- async ({ creatorId }, { getState, rejectWithValue }) => {
+ async ({ creatorId }, { dispatch, rejectWithValue }) => {
try {
const response = await api.get(`/daren_detail/creators/${creatorId}`);
if (response.code === 200) {
@@ -270,6 +270,71 @@ export const fetchCreatorDetail = createAsyncThunk(
} else {
throw new Error(response.message);
}
+ } catch (error) {
+ console.log('fetchCreatorDetail.rejected', error);
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
+export const fetchCreatorMetrics = createAsyncThunk(
+ 'creators/fetchCreatorMetrics',
+ async ({ creatorId }, { rejectWithValue }) => {
+ try {
+ const response = await api.get(`/daren_detail/creators/${creatorId}/metrics`);
+ if (response.code === 200 || response.code === 201) {
+ return response;
+ } else {
+ throw new Error(response.message);
+ }
+ } catch (error) {
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
+export const fetchCreatorFollowers = createAsyncThunk(
+ 'creators/fetchCreatorFollowers',
+ async ({ creatorId }, { rejectWithValue }) => {
+ try {
+ const response = await api.get(`/daren_detail/creator/${creatorId}/followers`);
+ if (response.code === 200) {
+ return response;
+ } else {
+ throw new Error(response.message);
+ }
+ } catch (error) {
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
+export const fetchCreatorTrends = createAsyncThunk(
+ 'creators/fetchCreatorTrends',
+ async ({ creatorId }, { rejectWithValue }) => {
+ try {
+ const response = await api.get(`/daren_detail/creator/${creatorId}/trends`);
+ if (response.code === 200) {
+ return response;
+ } else {
+ throw new Error(response.message);
+ }
+ } catch (error) {
+ return rejectWithValue(error.message);
+ }
+ }
+);
+
+export const fetchCreatorVideos = createAsyncThunk(
+ 'creators/fetchCreatorVideos',
+ async ({ creatorId }, { rejectWithValue }) => {
+ try {
+ const response = await api.get(`/daren_detail/creator/${creatorId}/videos`);
+ if (response.code === 200) {
+ return response;
+ } else {
+ throw new Error(response.message);
+ }
} catch (error) {
return rejectWithValue(error.message);
}
@@ -285,7 +350,9 @@ export const addCreatorsToCampaign = createAsyncThunk(
campaign_id: campaignId,
});
if (response.code === 200) {
- dispatch(setNotificationBarMessage({ message: 'Creators added to campaign successfully', type: 'success' }));
+ dispatch(
+ setNotificationBarMessage({ message: 'Creators added to campaign successfully', type: 'success' })
+ );
return response;
} else {
dispatch(setNotificationBarMessage({ message: response.message, type: 'error' }));
@@ -395,6 +462,18 @@ const creatorsSlice = createSlice({
.addCase(fetchCreatorDetail.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
+ })
+ .addCase(fetchCreatorMetrics.fulfilled, (state, action) => {
+ state.selectedCreator.metricsData = action.payload.data;
+ })
+ .addCase(fetchCreatorFollowers.fulfilled, (state, action) => {
+ state.selectedCreator.followerData = action.payload.data;
+ })
+ .addCase(fetchCreatorTrends.fulfilled, (state, action) => {
+ state.selectedCreator.trendsData = action.payload.data;
+ })
+ .addCase(fetchCreatorVideos.fulfilled, (state, action) => {
+ state.selectedCreator.videosData = action.payload.data;
});
},
});
diff --git a/src/styles/CreatorDiscovery.scss b/src/styles/CreatorDiscovery.scss
index 504d786..0939523 100644
--- a/src/styles/CreatorDiscovery.scss
+++ b/src/styles/CreatorDiscovery.scss
@@ -56,12 +56,15 @@
display: flex;
flex-flow: column nowrap;
gap: 1rem;
+ height: 100%;
.creator-info-detail-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
+ height: calc(100% - 1.5rem);
+ overflow-y: auto;
.creator-info-container {
flex: 4;
@@ -320,6 +323,13 @@
flex-flow: column nowrap;
gap: 0.5rem;
font-size: 0.875rem;
+ height: 178px;
+ justify-content: flex-start;
+
+ .crown-icon {
+ margin-bottom: 0.5rem;
+ color: $danger-500;
+ }
.video-title {
font-weight: 700;
text-overflow: ellipsis;
@@ -343,6 +353,10 @@
}
}
}
+ .line-chart {
+ width: 100%;
+ height: 250px;
+ }
}
.collab-info {
width: 100%;