Untitled

mail@pastecode.io avatar
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;