Untitled
unknown
plain_text
a year ago
30 kB
4
Indexable
Never
import React, { useEffect, useRef, useState } from 'react'; import { Card, Carousel, GridList, Text, View } from 'react-native-ui-lib'; import { Dimensions, Image, StyleSheet } 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 { GridView } from '../../../rb-components/Grid'; import images from '../../../rb-constants/images'; import Swiper from 'react-native-swiper'; import { FlatList, ScrollView } from 'react-native-gesture-handler'; type Props = { report: any; company?: any; }; const OverviewFacebook = ({ report, company }: Props) => { const socialMediaType = "facebook"; const getData = (socialMediaData, reportType) => { const socialType = socialMediaData?.type; if (socialMediaData?.status === 'EXIST') { if (socialType === 'facebook') { const pageInsights = socialMediaData && socialMediaData.pageInsights; const historicWebsiteClick = socialMediaData.historicWebsiteClick; const historicDirectionClick = socialMediaData.historicDirectionClick; const historicCallClick = socialMediaData.historicCallClick; const historicPageViewsSearch = socialMediaData.historicPageViewsByInternalRefererLoggedInUniqueSearch; const historicPageViewsNewsFeed = socialMediaData.historicPageViewsByInternalRefererLoggedInUniqueNewsFeed; const historicMostPostImpressions = socialMediaData.historicMostPostImpressions; const historicLowestPostImpressions = socialMediaData.historicLowestPostImpressions; const historicPostsImpressions = socialMediaData.pageInsightsPostsImpressions; const historicPostsReach = socialMediaData.pageInsightsPostsReach; const historicPostsImpressionsOrganic = socialMediaData.pageInsightsPostsImpressionsOrganic; const historicPostsReachOrganic = socialMediaData.pageInsightsPostsReachOrganic; const historicPostsImpressionsPaid = socialMediaData.pageInsightsPostsImpressionsPaid; const historicPostsReachPaid = socialMediaData.pageInsightsPostsReachPaid; const historicAvgPostImpressions = socialMediaData.pageInsightsAverageImpressions; const historicAvgPostReach = socialMediaData.pageInsightsAverageReach; const historicAvgPostImpressionsOrganic = socialMediaData.pageInsightsAverageImpressionsOrganic; const historicAvgPostReachOrganic = socialMediaData.pageInsightsAverageReachOrganic; const historicAvgPostImpressionsPaid = socialMediaData.pageInsightsAverageImpressionsPaid; const historicAvgPostReachPaid = socialMediaData.pageInsightsAverageReachPaid; let totalClicks = 0; let websiteClicks = null; let phoneCallClicks = null; let directClicks = null; let diffWebsiteClicks = 0; let diffPhoneCallClicks = 0; let diffDirectClicks = 0; let totalInteractions = 0; let reactions = null; let comments = null; let shares = null; let postCount = null; let diffReactions = 0; let diffComments = 0; let diffShares = 0; let diffPostCount = 0; let reach = 0; let postReach = null; let avgPostReach = null; let postReachOrganic = null; let avgPostReachOrganic = null; let postReachPaid = null; let avgPostReachPaid = null; let otherReach = null; let diffPostReach = 0; let diffAvgPostReach = 0; let diffPostReachOrganic = 0; let diffPostReachPaid = 0; let impressions = 0; let postImpressions = null; let avgPostImpressions = null; let postImpressionsOrganic = null; let avgPostImpressionsOrganic = null; let postImpressionsPaid = null; let avgPostImpressionsPaid = null; const mostPostImpressions = socialMediaData.mostPostImpressions; const lowestPostImpressions = socialMediaData.lowestPostImpressions; let otherImpressions = null; let diffPostImpressions = 0; let diffAvgPostImpressions = 0; let diffPostImpressionsOrganic = 0; let diffPostImpressionsPaid = 0; let diffMostPostImpressions = 0; let diffLowestPostImpressions = 0; let pageViewsTotal = 0; let pageViewsSearch = null; let pageViewsNewsFeed = null; let pageViewsOther = null; let diffPageViewsSearch = 0; let diffPageViewsNewsFeed = 0; if (pageInsights) { pageViewsTotal = pageInsights.page_views_total; pageViewsOther = pageInsights.page_views_by_internal_referer_logged_in_unique_other; pageViewsSearch = pageInsights.page_views_by_internal_referer_logged_in_unique_search; pageViewsNewsFeed = pageInsights.page_views_by_internal_referer_logged_in_unique_news_feed; websiteClicks = pageInsights.page_website_clicks_logged_in_unique; phoneCallClicks = pageInsights.page_call_phone_clicks_logged_in_unique; directClicks = pageInsights.page_get_directions_clicks_logged_in_unique; reach = pageInsights.page_impressions_unique; postReach = pageInsights.page_posts_impressions_unique; postReachOrganic = pageInsights.page_posts_impressions_organic_unique; postReachPaid = pageInsights.page_posts_impressions_paid_unique; otherReach = reach - postReach; avgPostReach = parseFloat(socialMediaData.averagePostReach).toFixed( 2, ); avgPostReachOrganic = parseFloat( socialMediaData.averagePostReachOrganic, ).toFixed(2); avgPostReachPaid = parseFloat( socialMediaData.averagePostReachPaid, ).toFixed(2); impressions = pageInsights.page_impressions; postImpressions = pageInsights.page_posts_impressions; postImpressionsOrganic = pageInsights.page_posts_impressions_organic; postImpressionsPaid = pageInsights.page_posts_impressions_paid; otherImpressions = impressions - postImpressions; avgPostImpressions = parseFloat( socialMediaData.averagePostImpressions, ).toFixed(2); avgPostImpressionsOrganic = parseFloat( socialMediaData.averagePostImpressionsOrganic, ).toFixed(2); avgPostImpressionsPaid = parseFloat( socialMediaData.averagePostImpressionsPaid, ).toFixed(2); } if (reportType === 'MONTHLY') { reactions = socialMediaData.reactionsLastMonth; comments = socialMediaData.commentLastMonth; shares = socialMediaData.sharesLastMonth; postCount = socialMediaData.numberOfPostsLastMonth; diffReactions = reactions - socialMediaData.reactionsPastMonth; diffComments = comments - socialMediaData.commentPastMonth; diffShares = shares - socialMediaData.sharesPastMonth; diffPostCount = postCount - socialMediaData.numberOfPostsPastMonth; } else { reactions = socialMediaData.reactionsLastWeek; comments = socialMediaData.commentLastWeek; shares = socialMediaData.sharesLastWeek; postCount = socialMediaData.numberOfPostsLastWeek; diffReactions = reactions - socialMediaData.reactionsPastWeek; diffComments = comments - socialMediaData.commentPastWeek; diffShares = shares - socialMediaData.sharesPastWeek; diffPostCount = postCount - socialMediaData.numberOfPostsPastWeek; } if (reactions) { totalInteractions += reactions; } if (shares) { totalInteractions += shares; } if (comments) { totalInteractions += comments; } if (websiteClicks) { totalClicks += websiteClicks; if (historicWebsiteClick && historicWebsiteClick.values.length > 0) { diffWebsiteClicks = websiteClicks - historicWebsiteClick.values[ historicWebsiteClick.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; } } let totalNewsFeedAndSearchAndOther = 0; if (pageViewsOther) { totalNewsFeedAndSearchAndOther += pageViewsOther; } if (pageViewsSearch) { totalNewsFeedAndSearchAndOther += pageViewsSearch; if ( historicPageViewsSearch && historicPageViewsSearch.values.length > 0 ) { diffPageViewsSearch = pageViewsSearch - historicPageViewsSearch.values[ historicPageViewsSearch.values.length - 1 ].y; } } if (pageViewsNewsFeed) { totalNewsFeedAndSearchAndOther += pageViewsNewsFeed; if ( historicPageViewsNewsFeed && historicPageViewsNewsFeed.values.length > 0 ) { diffPageViewsNewsFeed = pageViewsNewsFeed - historicPageViewsNewsFeed.values[ historicPageViewsNewsFeed.values.length - 1 ].y; } } const diffPageViewsOther = pageViewsTotal - totalNewsFeedAndSearchAndOther; pageViewsOther += diffPageViewsOther; if ( historicAvgPostReach && historicAvgPostReach.values.length > 0 && avgPostReach ) if ( historicAvgPostReachOrganic && historicAvgPostReachOrganic.values.length > 0 && avgPostReachOrganic ) if ( historicAvgPostReachPaid && historicAvgPostReachPaid.values.length > 0 && avgPostReachPaid ) if ( historicAvgPostImpressions && historicAvgPostImpressions.values.length > 0 && avgPostImpressions ) if ( historicAvgPostImpressionsOrganic && historicAvgPostImpressionsOrganic.values.length > 0 && avgPostImpressionsOrganic ) if ( historicAvgPostImpressionsPaid && historicAvgPostImpressionsPaid.values.length > 0 && avgPostImpressionsPaid ) if ( historicPostsImpressions && historicPostsImpressions.values.length > 0 && postImpressions ) { diffPostImpressions = postImpressions - historicPostsImpressions.values[ historicPostsImpressions.values.length - 1 ].y; } if ( historicPostsImpressionsOrganic && historicPostsImpressionsOrganic.values.length > 0 && postImpressionsOrganic ) { diffPostImpressionsOrganic = postImpressionsOrganic - historicPostsImpressionsOrganic.values[ historicPostsImpressionsOrganic.values.length - 1 ].y; } if ( historicPostsImpressionsPaid && historicPostsImpressionsPaid.values.length > 0 && postImpressionsPaid ) { diffPostImpressionsPaid = postImpressionsPaid - historicPostsImpressionsPaid.values[ historicPostsImpressionsPaid.values.length - 1 ].y; } if ( historicPostsReach && historicPostsReach.values.length > 0 && postReach ) { diffPostReach = postReach - historicPostsReach.values[historicPostsReach.values.length - 1].y; } if ( historicPostsReachOrganic && historicPostsReachOrganic.values.length > 0 && postReachOrganic ) { diffPostReachOrganic = postReachOrganic - historicPostsReachOrganic.values[ historicPostsReachOrganic.values.length - 1 ].y; } if ( historicPostsReachPaid && historicPostsReachPaid.values.length > 0 && postReachPaid ) { diffPostReachPaid = postReachPaid - historicPostsReachPaid.values[ historicPostsReachPaid.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: pageViewsTotal, subvalues: [ { header: messages.search.defaultMessage, value: pageViewsSearch, diffValue: diffPageViewsSearch, }, { header: messages.newsFeed.defaultMessage, value: pageViewsNewsFeed, diffValue: diffPageViewsNewsFeed, }, { header: messages.other.defaultMessage, value: pageViewsOther, diffValue: null, }, ], }, { header: messages.impressions.defaultMessage, value: impressions, subvalues: [ { header: messages.postCount.defaultMessage, value: postCount, diffValue: diffPostCount, }, { header: messages.postImpressions.defaultMessage, value: postImpressions, diffValue: diffPostImpressions, }, { header: messages.avgPostImpressions.defaultMessage, value: avgPostImpressions, diffValue: diffAvgPostImpressions, }, { header: messages.postImpressionsOrganic.defaultMessage, value: postImpressionsOrganic, diffValue: diffPostImpressionsOrganic, }, { header: messages.postImpressionsPaid.defaultMessage, value: postImpressionsPaid, diffValue: diffPostImpressionsPaid, }, { 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.postReach.defaultMessage, value: postReach, diffValue: diffPostReach, }, { header: messages.avgPostReach.defaultMessage, value: avgPostReach, diffValue: diffAvgPostReach, }, { header: messages.postReachOrganic.defaultMessage, value: postReachOrganic, diffValue: diffPostReachOrganic, }, { header: messages.postReachPaid.defaultMessage, value: postReachPaid, diffValue: diffPostReachPaid, }, { header: messages.otherReach.defaultMessage, value: otherReach, diffValue: null, }, ], }, { header: messages.totalInteractions.defaultMessage, value: totalInteractions, subvalues: [ { header: messages.reactions.defaultMessage, value: reactions, diffValue: diffReactions, }, { header: messages.shares.defaultMessage, value: shares, diffValue: diffShares, }, { 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.callButtonTaps.defaultMessage, value: phoneCallClicks, diffValue: diffPhoneCallClicks, }, { header: messages.getDirectionsTaps.defaultMessage, value: directClicks, diffValue: diffDirectClicks, }, ], }, ]; } } } 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 = []; if (!isError && !isConnectionError) { datas = getData(socialMediaData, reportType); } return ( datas.length > 0 ? ( <Carousel> {datas.map((data, index) => ( <> <View> <Card center key={index}> <Text text50BO>{data.header}</Text> <Text text50BO>{data.value}</Text> </Card> {data.subvalues.length > 4 ? ( <GridList numColumns={2} scrollEnabled={false} data={data.subvalues} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => ( <Card row center> <Text>{item.header}</Text> <Text>{item.value}</Text> <Text>{item.diffValue}</Text> </Card> )} /> ) : ( <GridList numColumns={1} data={data.subvalues} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => ( <Card center> <Text>{item.header}</Text> <Text>{item.value}</Text> <Text>{item.diffValue}</Text> </Card> )} /> )} </View> </> ))} </Carousel> ) : ( <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 OverviewFacebook; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, carouselContainer: { width: '100%', height: 500, }, pageControlContainer: { position: 'absolute', bottom: 10, width: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'row', }, card: { width: 200, height: '100%', padding: 16, borderRadius: 8, backgroundColor: '#fff', elevation: 4, }, header: { fontSize: 16, fontWeight: 'bold', marginBottom: 8, }, value: { fontSize: 14, marginBottom: 8, }, subvalueContainer: { marginTop: 16, }, subvalueCard: { padding: 8, borderRadius: 4, backgroundColor: '#f0f0f0', elevation: 2, }, subvalueHeader: { fontSize: 14, fontWeight: 'bold', marginBottom: 4, }, subvalue: { fontSize: 12, }, });