Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
28 kB
2
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 grey30 text50BO>{data.header}</Text>
                                <Text orange40 text50BO>{data.value}</Text>
                            </Card>
                            {(
                                <GridList
                                    numColumns={1}
                                    scrollEnabled={false}
                                    data={data.subvalues}
                                    keyExtractor={(item, index) => index.toString()}
                                    renderItem={({ item }) => (
                                        <Card row center>
                                            <Text flex orange40>{item.header}</Text>
                                            <Text flex grey30>{item.value}</Text>
                                            <Text flex green30>{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;