SubscriptionPlan.tsx

import React, { useEffect, useState, useContext } from "react";
import { View, Platform, ActivityIndicator, Alert } from "react-native";

import CWrapper from "../components/CWrapper";
import CText from "../components/CText";

// * Styles & Assets
import { colors } from "../assets/themes";
import { GlobalStyles } from "../public/styles/GlobalStyles";
import {
  initConnection,
  Subscription,
  purchaseUpdatedListener,
  InAppPurchase,
  SubscriptionPurchase,
  finishTransaction,
  purchaseErrorListener,
  PurchaseError,
  endConnection,
  consumeAllItemsAndroid,
  requestSubscription,
  finishTransactionIOS,
} from "react-native-iap";
import {
  getAvaliablePurchase,
  getItems,
  buySubscription,
} from "../services/subscriptions";
import CSubscriptionCard from "../components/CSubscriptionCard";
import {
  freeMessageDesc,
  subscriptionCardData,
} from "../public/constants/GlobalConstant";
import {
  getMembershipPlan,
  subscriptionExpDate,
  messageAmount,
  getSubscriptionWordLimit,
} from "../public/helpers/SubscriptionHelper";
import { RenderToast } from "../components/CToast";
import CLoader from "../components/CLoader";
import NavigationServices from "../routes/NavigationServices";
import { IUserSubscription } from "../model/UserModel";
import { SubscriptionContext } from "../contexts/SubscriptionsContext";
import { parseNumFormat } from "../public/helpers/GlobalHelper";

const SubscriptionPlan = () => {
  const {
    addSubscriptionPlan,
    productId,
    receipt,
    getAvailablePurchase,
  } = useContext(SubscriptionContext);
  const [products, setProducts] = useState<Subscription[]>([]);
  const [receipts, setReceipts] = useState<string>();
  const [isLoading, setLoading] = useState<boolean>(false);
  const [productLoading, setProductLoading] = useState<boolean>(false);

  let purchaseUpdateSubscription: any, purchaseErrorSubscription: any;

  useEffect(() => {
    initalizeConnection();

    return () => {
      if (purchaseUpdateSubscription) {
        purchaseUpdateSubscription.remove();
        purchaseUpdateSubscription = null;
      }
      if (purchaseErrorSubscription) {
        purchaseErrorSubscription.remove();
        purchaseErrorSubscription = null;
      }
      endConnection();
    };
  }, []);

  useEffect(() => {
    setLoading(false);
  }, [receipt]);

  const initalizeConnection = async () => {
    try {
      setProductLoading(true);
      const result = await initConnection();
      await getSubscriptionProducts();
      await getAvailablePurchasesUser();
      await consumeAllItemsAndroid();
      setProductLoading(false);
      console.log("result", result);
    } catch (err) {
      console.warn(err.message);
      setProductLoading(false);
    }

    purchaseUpdateSubscription = purchaseUpdatedListener(
      async (purchase: InAppPurchase | SubscriptionPurchase) => {
        console.warn("Purchase : ", purchase);
        const receipt = purchase.transactionReceipt;
        if (receipt) {
          try {
            if (Platform.OS === "ios") {
              finishTransactionIOS(purchase.transactionId!);
            } else {
              const parseReceipt = JSON.parse(receipt);
              try {
                const ackResult: any = await finishTransaction(purchase);
                if (ackResult.code === "OK") {
                  const data: IUserSubscription = {
                    platform: Platform.OS.toUpperCase(),
                    product_code: parseReceipt.productId,
                    expired_at: subscriptionExpDate(
                      parseReceipt.purchaseTime,
                      parseReceipt.productId,
                    ),
                    receipt: receipt,
                  };
                  await addSubscriptionPlan(data);
                  await getAvailablePurchase();
                  setLoading(false);
                  NavigationServices.goBack();
                }
                console.warn("Finish Transaction : ", ackResult);
              } catch (ackErr) {
                console.warn("ackErr", ackErr);
                setLoading(false);
              }
              console.warn("receipt : ", receipt);
            }
            await finishTransaction(purchase);
          } catch (ackErr) {
            console.warn("Ack Error : ", ackErr);
          }
        }
      },
    );

    purchaseErrorSubscription = purchaseErrorListener(
      (error: PurchaseError) => {
        setLoading(false);
        RenderToast(`${error.message}`, "danger");
      },
    );
  };

  const getSubscriptionProducts = async (): Promise<void> => {
    const result = await getItems();
    setProducts(result);
  };

  const buySubscriptionProduct = async (sku: string): Promise<void> => {
    const oldSku = receipt && receipt.productId;
    try {
      requestSubscription(sku, false, oldSku);
    } catch (err) {
      Alert.alert(err.message);
    }
  };

  const getAvailablePurchasesUser = async (): Promise<void> => {
    const result = await getAvaliablePurchase();
    setReceipts(result);
  };

  const closeLoader = () => {
    setLoading(false);
  };

  const RenderSubscriptionProduct = () => {
    if (productLoading) {
      return <ActivityIndicator size="small" />;
    } else {
      if (products) {
        return subscriptionCardData.map((item) => (
          <CSubscriptionCard
            key={item.id}
            price={item.price}
            totalStoredMessage={item.totalStoredMessage}
            handleBuy={() => buySubscriptionProduct(item.productId)}
            subscriptionType={`${item.subscriptionType} recurring`}
            amount={item.amount}
            disabled={item.productId === productId}
          />
        ));
      } else {
        return <CText>No subscription product found</CText>;
      }
    }
  };

  return (
    <CWrapper
      goBack
      isScrolled
      withHeader
      contentStyle={[GlobalStyles.spaceWrapper]}>
      <CText spacing title style={[GlobalStyles.mb5, GlobalStyles.gilroyBold]}>
        Choose Your Plan
      </CText>

      <View style={[GlobalStyles.flexRowStart, GlobalStyles.flexFill]}>
        <View style={[GlobalStyles.flexFill]}>
          <CText spacing style={[GlobalStyles.mb1, GlobalStyles.gilroyBold]}>
            Your Current Plan
          </CText>
          <CText spacing color={colors.$midGrey} style={[GlobalStyles.size14]}>
            {getMembershipPlan(productId) === "free"
              ? `${messageAmount(productId)} free message up to 1,500 `
              : `${messageAmount(productId)} message per member`}
          </CText>
          <CText
            color={colors.$midGrey}
            spacing
            style={[GlobalStyles.size14, GlobalStyles.lnHeightMd]}>
            {getMembershipPlan(productId) === "free"
              ? freeMessageDesc
              : `Limited ${parseNumFormat(
                  getSubscriptionWordLimit(productId),
                )} characters`}
          </CText>
        </View>
        <View>
          <CText spacing title style={[GlobalStyles.gilroyBold]}>
            {getMembershipPlan(productId).toUpperCase()}
          </CText>
        </View>
      </View>

      <View style={[GlobalStyles.hr, GlobalStyles.mv3]} />

      <CText spacing style={[GlobalStyles.mb2, GlobalStyles.gilroyBold]}>
        Available Packages
      </CText>

      {RenderSubscriptionProduct()}

      <CLoader isVisible={isLoading} onModalHide={closeLoader} />
    </CWrapper>
  );
};

export default SubscriptionPlan;