GPR | Route errors to error views (#972)

jhesgodi · web-flow · commit 306fd9053791 · 2023-10-15T22:33:11.000Z
diff --git a/packages/checkout/widgets-lib/src/context/view-context/SaleViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/SaleViewContextTypes.ts
@@ -1,3 +1,4 @@
+import { SaleErrorTypes } from '../../widgets/sale/types';
 import { ViewType } from './ViewType';
 
 export enum SaleWidgetViews {
@@ -35,7 +36,10 @@ interface SaleSuccessView extends ViewType {
 }
 interface SaleFailView extends ViewType {
   type: SaleWidgetViews.SALE_FAIL;
-  reason?: string;
+  data?: {
+    errorType: SaleErrorTypes;
+    [key: string]: unknown;
+  };
 }
 
 export enum FundWithSmartCheckoutSubViews {
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWebView.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWebView.tsx
@@ -22,24 +22,24 @@ const defaultPassportConfig = {
 const defaultItems: Item[] = [
   {
     productId: 'P0001',
-    qty: 1,
-    name: 'Poliwag',
-    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/60.png',
-    description: 'Poliwag',
+    qty: 3,
+    name: 'Bulbasaur',
+    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/1.png',
+    description: 'Bulbasaur',
   },
   {
     productId: 'P0002',
-    qty: 1,
-    name: 'Poliwhirl',
-    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/61.png',
-    description: 'Poliwhirl',
+    qty: 2,
+    name: 'Ivyasaur',
+    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/2.png',
+    description: 'Ivyasaur',
   },
   {
     productId: 'P0003',
     qty: 1,
-    name: 'Poliwrath',
-    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/62.png',
-    description: 'Poliwrath',
+    name: 'Venusaur',
+    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/3.png',
+    description: 'Venusaur',
   },
 ];
 
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import {
   useCallback, useContext, useEffect, useMemo, useReducer,
 } from 'react';
@@ -22,7 +21,7 @@ import { StatusType } from '../../components/Status/StatusType';
 import { StatusView, StatusViewProps } from '../../components/Status/StatusView';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { SaleWidgetViews } from '../../context/view-context/SaleViewContextTypes';
-import { Item, SaleErrorTypes } from './types';
+import { Item, SaleErrorTypes, PaymentTypes } from './types';
 import { widgetTheme } from '../../lib/theme';
 import { SaleContextProvider } from './context/SaleContextProvider';
 import { FundWithSmartCheckout } from './views/FundWithSmartCheckout';
@@ -67,16 +66,6 @@ export function SaleWidget(props: SaleWidgetProps) {
     connectLoaderParams,
   } = props;
 
-  console.log(
-    '@@@ SaleWidget',
-    config,
-    amount,
-    items,
-    fromContractAddress,
-    env,
-    environmentId,
-  );
-
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { checkout, provider } = connectLoaderState;
 
@@ -89,10 +78,7 @@ export function SaleWidget(props: SaleWidgetProps) {
   const loadingText = viewState.view.data?.loadingText
     || text.views[SharedViews.LOADING_VIEW].text;
 
-  const {
-    eventTargetState: { eventTarget },
-  } = useContext(EventTargetContext);
-
+  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
   const onMount = useCallback(() => {
     if (!checkout || !provider) return;
 
@@ -112,12 +98,13 @@ export function SaleWidget(props: SaleWidgetProps) {
     onMount();
   }, [checkout, provider]);
 
-  const updateToPaymentMethods = () => {
+  const goBackToPaymentMethods = (type?: PaymentTypes | undefined) => {
     viewDispatch({
       payload: {
         type: ViewActions.UPDATE_VIEW,
         view: {
           type: SaleWidgetViews.PAYMENT_METHODS,
+          data: { paymentMethod: type },
         },
       },
     });
@@ -129,9 +116,10 @@ export function SaleWidget(props: SaleWidgetProps) {
 
   const errorHandlersConfig: Record<SaleErrorTypes, ErrorHandlerConfig> = {
     [SaleErrorTypes.TRANSACTION_FAILED]: {
-      onActionClick: updateToPaymentMethods,
+      onActionClick: goBackToPaymentMethods,
       onSecondaryActionClick: () => {
-        /* TODO: redirects to Immutascan to check the transaction */
+        /* TODO: redirects to Immutascan to check the transaction if has is given */
+        console.log({ transactionHash: viewState.view?.data?.transactionHash }); // eslint-disable-line no-console
       },
       statusType: StatusType.FAILURE,
       statusIconStyles: {
@@ -153,36 +141,37 @@ export function SaleWidget(props: SaleWidgetProps) {
       statusType: StatusType.INFORMATION,
     },
     [SaleErrorTypes.WALLET_FAILED]: {
-      onActionClick: updateToPaymentMethods,
+      onActionClick: goBackToPaymentMethods,
       onSecondaryActionClick: closeWidget,
       statusType: StatusType.INFORMATION,
       statusIconStyles: {
         fill: biomeTheme.color.status.fatal.dim,
       },
     },
     [SaleErrorTypes.WALLET_REJECTED_NO_FUNDS]: {
-      onActionClick: updateToPaymentMethods,
+      onActionClick: goBackToPaymentMethods,
       onSecondaryActionClick: closeWidget,
       statusType: StatusType.INFORMATION,
     },
     [SaleErrorTypes.WALLET_REJECTED]: {
       onActionClick: () => {
-        /* TODO: trigger the approve and execute flow pop up flow again */
+        goBackToPaymentMethods(PaymentTypes.CRYPTO);
       },
       onSecondaryActionClick: closeWidget,
       statusType: StatusType.INFORMATION,
     },
     [SaleErrorTypes.DEFAULT]: {
-      onActionClick: updateToPaymentMethods,
+      onActionClick: goBackToPaymentMethods,
       onSecondaryActionClick: closeWidget,
       statusType: StatusType.INFORMATION,
     },
   };
 
-  const errorViewProps = useMemo<StatusViewProps>(() => {
+  const getErrorViewProps = (): StatusViewProps => {
     const errorTextConfig: AllErrorTextConfigs = text.views[SaleWidgetViews.SALE_FAIL].errors;
-    const errorType = viewState.view.data?.error || SaleErrorTypes.DEFAULT;
+    const errorType = viewState.view.data.errorType || SaleErrorTypes.DEFAULT;
     const handlers = errorHandlersConfig[errorType] || {};
+
     return {
       testId: 'fail-view',
       statusText: errorTextConfig[errorType].description,
@@ -198,7 +187,7 @@ export function SaleWidget(props: SaleWidgetProps) {
         ...handlers.statusIconStyles,
       },
     };
-  }, [viewState.view.data?.error]);
+  };
 
   return (
     <BiomeCombinedProviders theme={{ base: biomeTheme }}>
@@ -219,9 +208,6 @@ export function SaleWidget(props: SaleWidgetProps) {
           {viewState.view.type === SharedViews.LOADING_VIEW && (
             <LoadingView loadingText={loadingText} />
           )}
-          {viewState.view.type === SharedViews.ERROR_VIEW && (
-            <div>{viewState.view.error.message}</div>
-          )}
           {viewState.view.type
             === SaleWidgetViews.PAYMENT_METHODS && <PaymentMethods />}
           {viewState.view.type === SaleWidgetViews.PAY_WITH_CARD && (
@@ -231,7 +217,7 @@ export function SaleWidget(props: SaleWidgetProps) {
             <PayWithCoins />
           )}
           {viewState.view.type === SaleWidgetViews.SALE_FAIL && (
-            <StatusView {...errorViewProps} />
+            <StatusView {...getErrorViewProps()} />
           )}
           {viewState.view.type === SaleWidgetViews.SALE_SUCCESS
             && provider && (
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx
@@ -1,17 +1,29 @@
-/* eslint-disable no-console */
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { useSaleContext } from '../context/SaleContextProvider';
 import { TransakIframe } from '../../../components/Transak/TransakIframe';
 import { TransakNFTData } from '../../../components/Transak/TransakTypes';
 import { text as textConfig } from '../../../resources/text/textConfig';
 import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
+import { SaleErrorTypes } from '../types';
 
-export function WithCard() {
+export interface WithCardProps {
+  onInit?: () => void;
+  onOpen?: () => void;
+  onOrderCreated?: () => void;
+  onOrderProcessing?: () => void;
+  onOrderCompleted?: () => void;
+  onOrderFailed?: () => void;
+}
+
+export function WithCard(props: WithCardProps) {
+  const {
+    onInit, onOpen, onOrderCreated, onOrderProcessing, onOrderCompleted, onOrderFailed,
+  } = props;
   const { screenTitle, loading } = textConfig.views[SaleWidgetViews.PAY_WITH_CARD];
 
   const {
-    recipientEmail, recipientAddress, isPassportWallet, signResponse,
+    recipientEmail, recipientAddress, isPassportWallet, signResponse, goToErrorView,
   } = useSaleContext();
   const executeTxn = signResponse?.transactions.find((txn) => txn.methodCall.startsWith('execute'));
 
@@ -33,28 +45,11 @@ export function WithCard() {
     [signResponse],
   );
 
-  const onOpen = useCallback(() => {
-    console.log('onOpen');
-  }, []);
-
-  const onOrderCreated = useCallback(() => {
-    console.log('onOrderCreated');
-  }, []);
-
-  const onOrderProcessing = useCallback(() => {
-    console.log('onOrderProcessing');
-  }, []);
-
-  const onOrderCompleted = useCallback(() => {
-    console.log('onOrderCompleted');
-  }, []);
-
-  const onOrderFailed = useCallback(() => {
-    console.log('onOrderFailed');
-  }, []);
+  const onFailedToLoad = () => {
+    goToErrorView(SaleErrorTypes.TRANSACTION_FAILED);
+  };
 
   return (
-
     <TransakIframe
       id="transak-iframe"
       type="nft-checkout"
@@ -69,11 +64,13 @@ export function WithCard() {
       estimatedGasLimit={executeTxn.gasEstimate}
       smartContractAddress={executeTxn.contractAddress}
       partnerOrderId={executeTxn.params.reference}
+      onInit={onInit}
       onOpen={onOpen}
       onOrderCreated={onOrderCreated}
       onOrderProcessing={onOrderProcessing}
       onOrderCompleted={onOrderCompleted}
       onOrderFailed={onOrderFailed}
+      onFailedToLoad={onFailedToLoad}
     />
   );
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx
@@ -13,7 +13,7 @@ import { Passport } from '@imtbl/passport';
 import { SaleSuccess } from '@imtbl/checkout-widgets';
 
 import {
-  Item, PaymentTypes, SignResponse, SaleErrorTypes,
+  Item, PaymentTypes, SignResponse, SaleErrorTypes, SignOrderError,
 } from '../types';
 import { useSignOrder } from '../hooks/useSignOrder';
 import { ConnectLoaderState } from '../../../context/connect-loader-context/ConnectLoaderContext';
@@ -42,6 +42,7 @@ type SaleContextValues = SaleContextProps & {
   recipientAddress: string;
   recipientEmail: string;
   signResponse: SignResponse | undefined;
+  signError: SignOrderError | undefined;
   isPassportWallet: boolean;
   paymentMethod: PaymentTypes | undefined;
   setPaymentMethod: (paymentMethod: PaymentTypes) => void;
@@ -63,6 +64,7 @@ const SaleContext = createContext<SaleContextValues>({
   sign: () => Promise.resolve(undefined),
   execute: () => Promise.resolve({} as SaleSuccess),
   signResponse: undefined,
+  signError: undefined,
   passport: undefined,
   isPassportWallet: false,
   paymentMethod: undefined,
@@ -151,7 +153,9 @@ export function SaleContextProvider(props: {
     getUserInfo();
   }, [provider]);
 
-  const { sign: signOrder, execute, signResponse } = useSignOrder({
+  const {
+    sign: signOrder, execute, signResponse, signError,
+  } = useSignOrder({
     items,
     provider,
     fromContractAddress,
@@ -174,6 +178,11 @@ export function SaleContextProvider(props: {
     [signOrder],
   );
 
+  useEffect(() => {
+    if (!signError) return;
+    goToErrorView(signError.type, signError.data);
+  }, [signError]);
+
   const values = useMemo(
     () => ({
       config,
@@ -183,6 +192,7 @@ export function SaleContextProvider(props: {
       sign,
       execute,
       signResponse,
+      signError,
       environmentId,
       env,
       provider,
@@ -209,6 +219,7 @@ export function SaleContextProvider(props: {
       signResponse,
       paymentMethod,
       signResponse,
+      signError,
       goBackToPaymentMethods,
       goToErrorView,
     ],
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts
@@ -111,11 +111,26 @@ const toSignResponse = (
         name: order.currency.name,
         erc20Address: order.currency.erc20_address,
       },
-      products: order.products.map((product) => toSignedProduct(
-        product,
-        order.currency.name,
-        items.find((item) => item.productId === product.product_id),
-      )),
+      products: order.products
+        .map((product) => toSignedProduct(
+          product,
+          order.currency.name,
+          items.find((item) => item.productId === product.product_id),
+        ))
+        .reduce((acc, product) => {
+          const index = acc.findIndex((n) => n.name === product.name);
+
+          if (index === -1) {
+            acc.push({ ...product });
+          }
+
+          if (index > -1) {
+            acc[index].amount = [...acc[index].amount, ...product.amount];
+            acc[index].tokenId = [...acc[index].tokenId, ...product.tokenId];
+          }
+
+          return acc;
+        }, [] as SignedOrderProduct[]),
       totalAmount: Number(order.total_amount),
     },
     transactions: transactions.map((transaction) => ({
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCard.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCard.tsx
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { SaleErrorTypes } from '../../widgets/sale/types';`
`1`	`2`	`import { ViewType } from './ViewType';`
`2`	`3`
`3`	`4`	`export enum SaleWidgetViews {`
`@@ -35,7 +36,10 @@ interface SaleSuccessView extends ViewType {`
`35`	`36`	`}`
`36`	`37`	`interface SaleFailView extends ViewType {`
`37`	`38`	`type: SaleWidgetViews.SALE_FAIL;`
`38`		`- reason?: string;`
	`39`	`+ data?: {`
	`40`	`+ errorType: SaleErrorTypes;`
	`41`	`+ [key: string]: unknown;`
	`42`	`+ };`
`39`	`43`	`}`
`40`	`44`
`41`	`45`	`export enum FundWithSmartCheckoutSubViews {`