Sale widget fixes (#1236)

Co-authored-by: Jhonatan Gonzalez <jhesgodi@gmail.com>
Co-authored-by: Charlie McKenzie <charlie@dreamoftrees.com>

Author: 3 people

packages/checkout/widgets-lib/src/components/Transak/useTransakEvents.ts

@@ -11,7 +11,7 @@ import {
 } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 
 const TRANSAK_ORIGIN = 'transak.com';
-const FAILED_TO_LOAD_TIMEOUT_IN_MS = 5000;
+const FAILED_TO_LOAD_TIMEOUT_IN_MS = 10000;
 
 export type TransakEventHandlers = {
   onInit?: (data: Record<string, unknown>) => void;
@@ -78,18 +78,19 @@ export const useTransakEvents = (props: UseTransakEventsProps) => {
   const [initialised, setInitialsed] = useState<boolean>(false);
   const failedToLoadTimeout = failedToLoadTimeoutInMs || FAILED_TO_LOAD_TIMEOUT_IN_MS;
 
-  const timeout = useRef<NodeJS.Timeout | number>(0);
+  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const onInit = (data: Record<string, unknown>) => {
     setInitialsed(true);
     clearTimeout(timeout.current);
+    timeout.current = undefined;
     props.onInit?.(data);
   };
 
   const onLoad = () => {
     if (onFailedToLoad === undefined) return;
 
-    if (!initialised) {
+    if (timeout.current === undefined && !initialised) {
       timeout.current = setTimeout(() => {
         if (!initialised) onFailedToLoad();
       }, failedToLoadTimeout);

packages/checkout/widgets-lib/src/widgets/sale/components/FundingRouteSelect/FundingRouteSelect.tsx

@@ -19,6 +19,7 @@ import { PurchaseMenuItem } from '../PurchaseMenuItem/PurchaseMenuItem';
 import { text } from '../../../../resources/text/textConfig';
 import { sendSaleWidgetCloseEvent } from '../../SaleWidgetEvents';
 import { EventTargetContext } from '../../../../context/event-target-context/EventTargetContext';
+import { useSaleContext } from '../../context/SaleContextProvider';
 
 type FundingRouteSelectProps = {
   fundingRoutes: FundingRoute[];
@@ -31,6 +32,7 @@ export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: Fu
   const [activeFundingRouteIndex, setActiveFundingRouteIndex] = useState(0);
   const { viewDispatch } = useContext(ViewContext);
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
+  const { goBackToPaymentMethods } = useSaleContext();
 
   const onClickContinue = () => {
     onFundingRouteSelected(fundingRoutes[activeFundingRouteIndex]);
@@ -98,7 +100,7 @@ export function FundingRouteSelect({ fundingRoutes, onFundingRouteSelected }: Fu
             <Button key="continueButton" sx={{ mt: 'auto' }} variant="primary" onClick={onClickContinue}>
               {textConfig.fundingRouteSelect.continue}
             </Button>,
-            <Button key="payWithCardButton" variant="tertiary">
+            <Button key="payWithCardButton" variant="tertiary" onClick={() => goBackToPaymentMethods()}>
               {textConfig.fundingRouteSelect.payWithCardInstead}
             </Button>,
           ] }

packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx

@@ -17,25 +17,11 @@ const defaultPassportConfig = {
 
 const defaultItems: SaleItem[] = [
   {
-    productId: 'P0001',
+    productId: '645',
     qty: 3,
-    name: 'Bulbasaur',
-    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/1.png',
-    description: 'Bulbasaur',
-  },
-  {
-    productId: 'P0002',
-    qty: 2,
-    name: 'Ivyasaur',
-    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/2.png',
-    description: 'Ivyasaur',
-  },
-  {
-    productId: 'P0003',
-    qty: 1,
-    name: 'Venusaur',
-    image: 'https://pokemon-nfts.s3.ap-southeast-2.amazonaws.com/images/3.png',
-    description: 'Venusaur',
+    name: 'Landorus',
+    image: 'https://pokemon-nfts.mystagingwebsite.com/wp-content/uploads/2023/11/645-300x300.png',
+    description: 'Landorus',
   },
 ];