Untitled
unknown
plain_text
2 years ago
29 kB
2
Indexable
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;