gapp-checkout/src/gapp/useViewModel.ts

Mobile Gapp flow for Checkout

import React from 'react';
import type { ICheckoutGAppProps } from './module.type';
import { httpRequest } from '../shared/httpRequest';
import useCheckout from './useCheckout';

function useViewModel({ dataLoad, dataIn, dataOut }: ICheckoutGAppProps) {
  const { handleCheckoutPayload } = useCheckout({ dataLoad, dataIn, dataOut });
  const [checkoutDataOut, setCheckoutDataOut] = React.useState<any>({
    loading: false,
    cartItems: [],
  });

  const dataLoadType = dataIn.dataLoadType || {};

  const {
    endpoints,
    axiosOrder,
    axiosCheckout,
    payload: axiosPayload,
    baseUrl,
    ...resDataLoad
  } = dataLoad || {};

  const postOrder = endpoints?.postOrder;
  const postCheckout = endpoints?.postCheckout;

  const details = axiosPayload || {};

  // handle checkout api integration to create an order
  const handleCheckout = async () => {
    try {
      const payloadOrder = dataIn?.constructOrderPayload
        ? dataIn?.constructOrderPayload(Object.assign(details))
        : details;

      const notCash = (details?.payment_method?.type as string) !== 'cash ';
      console.log('notCash', notCash, details?.payment_method?.type);

      if (dataLoadType === 'network-service') {
        setCheckoutDataOut({
          key: 'submit-order',
          loading: true,
        });
        const resOrder: any =
          postOrder &&
          axiosOrder &&
          (await axiosOrder.post(postOrder, payloadOrder));

        const checkoutPayload = await handleCheckoutPayload({
          order: resOrder?.data?.data || resOrder?.data,
          details,
        });

        const resCheckout: any =
          postCheckout &&
          axiosCheckout &&
          notCash &&
          (await axiosCheckout.post(postCheckout, checkoutPayload));

        console.log('resCheckout network-service', resCheckout);

        setCheckoutDataOut({
          key: 'submit-order',
          loading: false,
          successful: true,
          orderResponse: resOrder,
          checkoutResponse: notCash ? resCheckout : {},
        });
      } else if (dataLoadType === 'network-service-config') {
        setCheckoutDataOut({
          key: 'submit-order',
          loading: true,
        });
        const resOrder: any =
          baseUrl?.order &&
          postOrder &&
          (await httpRequest({
            ...resDataLoad,
            url: `${baseUrl.order}${postOrder}`,
            method: 'POST',
            requestPostData: payloadOrder,
          }));

        const checkoutPayload = await handleCheckoutPayload({
          order: resOrder?.data?.data || resOrder?.data,
          details,
        });

        const resCheckout: any =
          baseUrl?.checkout &&
          postCheckout &&
          notCash &&
          (await httpRequest({
            ...resDataLoad,
            url: `${baseUrl.checkout}${postCheckout}`,
            method: 'POST',
            requestPostData: checkoutPayload,
          }));

        console.log('resCheckout network-service-config', resCheckout);

        setCheckoutDataOut({
          key: 'submit-order',
          loading: false,
          successful: true,
          orderResponse: resOrder,
          checkoutResponse: notCash ? resCheckout : {},
        });
      }
    } catch (err: any) {
      setCheckoutDataOut({
        key: 'submit-checkout',
        loading: false,
        successful: false,
        errorResponse: err?.response || err,
      });
    }
  };

  // life-cycle method to dataOut (your GApp)
  React.useEffect(() => {
    dataOut(checkoutDataOut);
  }, [JSON.stringify(checkoutDataOut)]);

  return {
    'customer-details': {
      dataIn: {
        fullName: details.payee,
        firstName: details.first_name,
        lastName: details.last_name,
        contactNumber: details.contact_number,
        email: details.email,
        region: details.region,
        city: details.city,
        barangay: details.barangay,
        street: details.street,
        buildingName: details.building_name,
        landmark: details.landmark,
      },
    },
    'order-items': {
      dataIn: {
        items: details.items,
      },
    },
    'payment-method': {
      dataIn: {
        label: details.payment_method?.name,
      },
    },
    'order-summary': {
      dataIn: {
        subTotal: details.subtotal || 0,
        voucherDiscount: details.discount || 0,
        shopperFee: details.shopee_fee || 0,
        deliveryFee: details.delivery_fee || 0,
        grandTotal: details.total_amount || 0,
      },
    },
    'submit-order': {
      dataIn: {
        disabled:
          (details?.items || []).length > 0 && details?.payment_method?.name
            ? false
            : true,
        loading: checkoutDataOut?.loading,
      },
      dataOut: handleCheckout,
    },
    'web-view': {
      dataLoad: {
        url: checkoutDataOut?.checkoutResponse?.data?.payment_link,
        successURL: details?.processor?.redirect_url?.success,
        failedURL: details?.processor?.redirect_url?.failure,
        canceledURL: details?.processor?.redirect_url?.cancel,
        paymentId: details?.processor?.token,
      },
    },
    'checkout-details': {
      dataLoad: {
        data: {
          ...details,
          customer_details: {
            fullName: details.payee,
            firstName: details.first_name,
            lastName: details.last_name,
            contactNumber: details.contact_number,
            email: details.email,
            region: details.region,
            city: details.city,
            barangay: details.barangay,
            street: details.street,
            buildingName: details.building_name,
            landmark: details.landmark,
          },
          items: details.items,

          payment_method: details.payment_method?.name,

          subTotal: details.subtotal || 0,
          voucherDiscount: details.discount || 0,
          shopperFee: details.shopee_fee || 0,
          deliveryFee: details.delivery_fee || 0,
          grandTotal: details.total_amount || 0,
        },
      },
      dataIn: {
        disabled:
          (details?.items || []).length > 0 && details?.payment_method?.name
            ? false
            : true,
        loading: checkoutDataOut?.loading,
        onPressPayNow: handleCheckout,
      },
    },
  };
}

export default useViewModel;