Untitled
unknown
plain_text
2 years ago
30 kB
4
Indexable
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,
},
});