Untitled
unknown
plain_text
a year ago
29 kB
2
Indexable
Never
import React from 'react'; import { Card, Carousel, Text, View } from 'react-native-ui-lib'; import { Image } from 'react-native'; import colors from '../../../rb-constants/colors'; import { abbreviateNumber } from '../../../../utils/number_formatter' import Icon from 'react-native-vector-icons/FontAwesome'; import messages from './messages'; import images from '../../../rb-constants/images'; import { removeDuplicateGenders } from './removeDuplicateGenders'; type Props = { report: any; company?: any; }; const OverviewInstagram = ({ report, company }: Props) => { const socialMediaType = "instagram"; const getData = (socialMediaData, reportType) => { const socialType = socialMediaData?.type; if (socialMediaData?.status === 'EXIST') { if (socialType === 'instagram') { const pageInsights = socialMediaData.pageInsights; const historicWebsiteClick = socialMediaData.historicWebsiteClick; const historicDirectionClick = socialMediaData.historicDirectionClick; const historicCallClick = socialMediaData.historicCallClick; const historicEmailClick = socialMediaData.historicEmailClick; const historicTotalMediaSaves = socialMediaData.historicTotalMediaSaves; const historicTotalMediaImpressions = socialMediaData.historicTotalMediaImpressions; const historicAvgPostImpressions = socialMediaData.pageInsightsAverageImpressions; const historicMostPostImpressions = socialMediaData.historicMostPostImpressions; const historicLowestPostImpressions = socialMediaData.historicLowestPostImpressions; const historicAverageReelsImpression = socialMediaData.historicAverageReelsImpression; const historicTotalMediaReach = socialMediaData.historicTotalMediaReach; const historicAvgPostReach = socialMediaData.pageInsightsAverageReach; const historicAverageReelsReach = socialMediaData.historicAverageReelsReach; let totalClicks = 0; let websiteClicks = null; let eMailClicks = null; let phoneCallClicks = null; let directClicks = null; let diffWebsiteClicks = 0; let diffEMailClicks = 0; let diffPhoneCallClicks = 0; let diffDirectClicks = 0; let totalInteractions = 0; const saves = socialMediaData.totalMediaSaved; let likes = null; let comments = null; let diffSaves = 0; let diffLikes = 0; let diffComments = 0; let reach = 0; let postCount = null; const postReach = socialMediaData.totalMediaReach; const avgPostReach = parseFloat( socialMediaData.averagePostReach, ).toFixed(2); let reelsCount = null; let reelsReach = null; const avgReelsReach = parseFloat( socialMediaData.averageReelsReach, ).toFixed(2); let otherReach = null; let diffPostCount = 0; let diffPostReach = 0; let diffAvgPostReach = 0; let diffReelsCount = 0; let diffReelsReach = 0; let diffAvgReelsReach = 0; let impressions = 0; const postImpressions = socialMediaData.totalMediaImpressions; const avgPostImpressions = parseFloat( socialMediaData.averagePostImpressions, ).toFixed(2); let reelsImpression = null; const avgReelsImpressions = parseFloat( socialMediaData.averageReelsImpression, ).toFixed(2); const mostPostImpressions = socialMediaData.mostPostImpressions; const lowestPostImpressions = socialMediaData.lowestPostImpressions; let otherImpressions = null; let diffPostImpressions = 0; let diffAvgPostImpressions = 0; let diffReelsImpression = 0; let diffAvgReelsImpressions = 0; let diffMostPostImpressions = 0; let diffLowestPostImpressions = 0; let profileViews = 0; const genderData = calculateGenderRatio(socialMediaData); if (pageInsights) { profileViews = pageInsights.profile_views; websiteClicks = pageInsights.website_clicks; eMailClicks = pageInsights.email_contacts; phoneCallClicks = pageInsights.phone_call_clicks; directClicks = pageInsights.get_directions_clicks; impressions = pageInsights.impressions; reach = pageInsights.reach; } if (reportType === 'MONTHLY') { likes = socialMediaData.likesLastMonth; comments = socialMediaData.commentLastMonth; reelsReach = socialMediaData.reelsReachLastMonth; reelsImpression = socialMediaData.reelsImpressionLastMonth; postCount = socialMediaData.numberOfPostsLastMonth; reelsCount = socialMediaData.reelsCountLastMonth; diffLikes = likes - socialMediaData.likesPastMonth; diffComments = comments - socialMediaData.commentPastMonth; diffPostCount = postCount - socialMediaData.numberOfPostsPastMonth; diffReelsCount = reelsCount - socialMediaData.reelsCountPastMonth; diffReelsReach = reelsReach - socialMediaData.reelsReachPastMonth; diffReelsImpression = reelsImpression - socialMediaData.reelsImpressionPastMonth; } else { likes = socialMediaData.likesLastWeek; comments = socialMediaData.commentLastWeek; reelsReach = socialMediaData.reelsReachLastWeek; reelsImpression = socialMediaData.reelsImpressionLastWeek; postCount = socialMediaData.numberOfPostsLastWeek; reelsCount = socialMediaData.reelsCountLastWeek; diffLikes = likes - socialMediaData.likesPastWeek; diffComments = comments - socialMediaData.commentPastWeek; diffPostCount = postCount - socialMediaData.numberOfPostsPastWeek; diffReelsCount = reelsCount - socialMediaData.reelsCountPastWeek; diffReelsReach = reelsReach - socialMediaData.reelsReachPastWeek; diffReelsImpression = reelsImpression - socialMediaData.reelsImpressionPastWeek; } const postAndReelsReach = postReach + reelsReach; if (postAndReelsReach > reach) { reach = postAndReelsReach; } otherImpressions = impressions - (postImpressions + reelsImpression); otherReach = reach - (postReach + reelsReach); if (likes) { totalInteractions += likes; } if (saves) { totalInteractions += saves; } if (comments) { totalInteractions += comments; } if (websiteClicks) { totalClicks += websiteClicks; if (historicWebsiteClick && historicWebsiteClick.values.length > 0) { diffWebsiteClicks = websiteClicks - historicWebsiteClick.values[ historicWebsiteClick.values.length - 1 ].y; } } if (eMailClicks) { totalClicks += eMailClicks; if (historicEmailClick && historicEmailClick.values.length > 0) { diffEMailClicks = eMailClicks - historicEmailClick.values[historicEmailClick.values.length - 1].y; } } if (phoneCallClicks) { totalClicks += phoneCallClicks; if (historicCallClick && historicCallClick.values.length > 0) { diffPhoneCallClicks = phoneCallClicks - historicCallClick.values[historicCallClick.values.length - 1].y; } } if (directClicks) { totalClicks += directClicks; if ( historicDirectionClick && historicDirectionClick.values.length > 0 ) { diffDirectClicks = directClicks - historicDirectionClick.values[ historicDirectionClick.values.length - 1 ].y; } } if ( historicTotalMediaSaves && historicTotalMediaSaves.values.length > 0 && saves ) { diffSaves = saves - historicTotalMediaSaves.values[ historicTotalMediaSaves.values.length - 1 ].y; } if ( historicTotalMediaReach && historicTotalMediaReach.values.length > 0 && postReach ) { diffPostReach = postReach - historicTotalMediaReach.values[ historicTotalMediaReach.values.length - 1 ].y; } if ( historicAvgPostReach && historicAvgPostReach.values.length > 0 && avgPostReach ) { diffAvgPostReach = avgPostReach - historicAvgPostReach.values[historicAvgPostReach.values.length - 1] .y; } if ( historicAverageReelsReach && historicAverageReelsReach.values.length > 0 && avgReelsReach ) { diffAvgReelsReach = avgReelsReach - historicAverageReelsReach.values[ historicAverageReelsReach.values.length - 1 ].y; } if ( historicTotalMediaImpressions && historicTotalMediaImpressions.values.length > 0 && postImpressions ) { diffPostImpressions = postImpressions - historicTotalMediaImpressions.values[ historicTotalMediaImpressions.values.length - 1 ].y; } if ( historicAvgPostImpressions && historicAvgPostImpressions.values.length > 0 && avgPostImpressions ) { diffAvgPostImpressions = avgPostImpressions - historicAvgPostImpressions.values[ historicAvgPostImpressions.values.length - 1 ].y; } if ( historicAverageReelsImpression && historicAverageReelsImpression.values.length > 0 && avgReelsImpressions ) { diffAvgReelsImpressions = avgReelsImpressions - historicAverageReelsImpression.values[ historicAverageReelsImpression.values.length - 1 ].y; } if ( historicMostPostImpressions && historicMostPostImpressions.values.length > 0 && mostPostImpressions ) { diffMostPostImpressions = mostPostImpressions - historicMostPostImpressions.values[ historicMostPostImpressions.values.length - 1 ].y; } if ( historicLowestPostImpressions && historicLowestPostImpressions.values.length > 0 && lowestPostImpressions ) { diffLowestPostImpressions = lowestPostImpressions - historicLowestPostImpressions.values[ historicLowestPostImpressions.values.length - 1 ].y; } return [ { header: messages.profileVisits.defaultMessage, value: profileViews, subvalues: [ { header: messages.male.defaultMessage, value: genderData.maleRate, diffValue: null, }, { header: messages.female.defaultMessage, value: genderData.femaleRate, diffValue: null, }, { header: messages.unisex.defaultMessage, value: genderData.unisexRate, diffValue: null, }, ], }, { header: messages.impressions.defaultMessage, value: impressions, subvalues: [ { header: messages.postCount.defaultMessage, value: postCount, diffValue: diffPostCount, }, { header: messages.postImpressionsOrganic.defaultMessage, value: postImpressions, diffValue: diffPostImpressions, }, { header: messages.avgPostImpressionsOrganic.defaultMessage, value: avgPostImpressions, diffValue: diffAvgPostImpressions, }, { header: messages.reelsCount.defaultMessage, value: reelsCount, diffValue: diffReelsCount, }, { header: messages.reelsImpressionsOrganic.defaultMessage, value: reelsImpression, diffValue: diffReelsImpression, }, { header: messages.avgReelsImpressionsOrganic.defaultMessage, value: avgReelsImpressions, diffValue: diffAvgReelsImpressions, }, { header: messages.highestPostImpressions.defaultMessage, value: mostPostImpressions, diffValue: diffMostPostImpressions, }, { header: messages.lowestPostImpressions.defaultMessage, value: lowestPostImpressions, diffValue: diffLowestPostImpressions, }, { header: messages.otherImpressions.defaultMessage, value: otherImpressions, diffValue: null, }, ], }, { header: messages.reach.defaultMessage, value: reach, subvalues: [ { header: messages.postCount.defaultMessage, value: postCount, diffValue: diffPostCount, }, { header: messages.postReachOrganic.defaultMessage, value: postReach, diffValue: diffPostReach, }, { header: messages.avgPostReachOrganic.defaultMessage, value: avgPostReach, diffValue: diffAvgPostReach, }, { header: messages.reelsCount.defaultMessage, value: reelsCount, diffValue: diffReelsCount, }, { header: messages.reelsReachOrganic.defaultMessage, value: reelsReach, diffValue: diffReelsReach, }, { header: messages.avgReelsReachOrganic.defaultMessage, value: avgReelsReach, diffValue: diffAvgReelsReach, }, { header: messages.otherReach.defaultMessage, value: otherReach, diffValue: null, }, ], }, { header: messages.totalInteractions.defaultMessage, value: totalInteractions, subvalues: [ { header: messages.likes.defaultMessage, value: likes, diffValue: diffLikes, }, { header: messages.saves.defaultMessage, value: saves, diffValue: diffSaves, }, { header: messages.comments.defaultMessage, value: comments, diffValue: diffComments, }, ], }, { header: messages.buttonTaps.defaultMessage, value: totalClicks, subvalues: [ { header: messages.websiteTaps.defaultMessage, value: websiteClicks, diffValue: diffWebsiteClicks, }, { header: messages.emailButtonTaps.defaultMessage, value: eMailClicks, diffValue: diffEMailClicks, }, { header: messages.callButtonTaps.defaultMessage, value: phoneCallClicks, diffValue: diffPhoneCallClicks, }, { header: messages.getDirectionsTaps.defaultMessage, value: directClicks, diffValue: diffDirectClicks, }, ], }, ]; } } } const calculateGenderRatio = (socialMediaData) => { const genderAndAge = socialMediaData && socialMediaData.genderAndAge && removeDuplicateGenders(socialMediaData.genderAndAge); let totalGender = null; let maleRate = null; let femaleRate = null; let unisexRate = null; if (genderAndAge) { let tempTotal = 0; let male = 0; let female = 0; let unisex = 0; if (genderAndAge.male) { genderAndAge.male.forEach((item) => { tempTotal += item.value; }); } male = tempTotal; tempTotal = 0; if (genderAndAge.female) { genderAndAge.female.forEach((item) => { tempTotal += item.value; }); } female = tempTotal; tempTotal = 0; if (genderAndAge.unisex) { genderAndAge.unisex.forEach((item) => { tempTotal += item.value; }); } unisex = tempTotal; totalGender = male + female + unisex; if (totalGender === 0) { totalGender = 1; } maleRate = parseFloat((male * 100) / totalGender).toFixed(2); femaleRate = parseFloat((female * 100) / totalGender).toFixed(2); unisexRate = parseFloat((unisex * 100) / totalGender).toFixed(2); } return { totalGender, maleRate, femaleRate, unisexRate }; } const connectionCheck = (connectList, type) => { let isConnection = false; if (connectList && connectList.length > 0) { connectList.forEach((item) => { if (item.type === type) { isConnection = item.connect; } }); } return isConnection; } const reportType = report?.data && report?.data?.type; const social = report?.data && report?.data?.score && report?.data?.score.social; const connectList = report?.data && report?.data?.connectList; const isConnectionError = !connectionCheck( connectList, socialMediaType.toUpperCase(), ); const socialMediaData = social && social.find((obj) => obj.type === socialMediaType); let isError = false; let errorMessageType; if (isConnectionError) { errorMessageType = `${socialMediaType.toLowerCase()}ErrorMessage`; } else if ( !socialMediaData || socialMediaData.status !== 'EXIST' || !reportType ) { isError = true; errorMessageType = 'companySocialNotExist'; } let datas = []; datas = getData(socialMediaData, reportType); return ( datas?.length > 0 ? ( <View> <Carousel> { datas.map((item) => ( <> <Card center> <Text center grey40 text40BO> {item.header} </Text> <Text orange40 text10BO> {abbreviateNumber(item.value)} </Text> </Card> {item.subvalues.map((item) => ( <Card centerH row > <> <View center flex> <Text text60BO> {item.header} </Text> </View> <View flex> <Text center orange40 text30BO > {abbreviateNumber(item.value)} </Text> </View> { item.diffValue > 0 ? ( <View flex centerH row center> <Icon name="arrow-up" color={colors.Green} size={25} style={{ marginRight: 5 }} /> <Text green30 text40BO> {item.diffValue} </Text> </View> ) : item.diffValue < 0 ? ( <View flex row center> <Icon name="arrow-down" color={colors.RedLighter} style={{ marginRight: 5 }} size={25} /> <Text red40 text40BO> {parseFloat(item.diffValue).toFixed(0)} </Text> </View> ) : ( <View row flex centerH center> <Text grey40 text20BO> - </Text> </View> ) } </> </Card> ))} </> )) } </Carousel> </View> ) : ( <View center margin-20> <Text heading4 grey30> "Please connect your social media account to see the post." </Text> <Image style={{ width: 100, height: 100 }} source={images.warning} /> </View> ) ) } export default OverviewInstagram;