[feat][CM-679] [Sale Widget] Add Handover screens + user initiated Tr…

…ansaction flow (#1879)
immutable · Jul 1, 2024 · 39bd920 · 39bd920
1 parent 88be74d
commit 39bd920
Show file tree

Hide file tree

Showing 18 changed files with 1,072 additions and 232 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/Handover/Handover.tsx b/packages/checkout/widgets-lib/src/components/Handover/Handover.tsx
@@ -10,6 +10,7 @@ import { HandoverAnimation } from './HandoverAnimation';
 const contentAnimation = {
   hidden: { y: 8, opacity: 0 },
   show: (i) => ({
+    height: '100%',
     y: 0,
     opacity: 1,
     transition: {
@@ -36,7 +37,7 @@ export function Handover({ id, children }: { id: string, children?: React.ReactN
   return (
     <>
       {children}
-      {(loader && (
+      {loader && (
         <LoadingOverlay visible>
           <LoadingOverlay.Content>
             <LoadingOverlay.Content.LoopingText
@@ -45,8 +46,8 @@ export function Handover({ id, children }: { id: string, children?: React.ReactN
             />
           </LoadingOverlay.Content>
         </LoadingOverlay>
-      ))}
-      {(handover && (renderChildren || handover.animationUrl) && (
+      )}
+      {handover && (renderChildren || handover.animationUrl) && (
         <Stack
           sx={{
             backgroundColor: 'base.color.neutral.1000',
@@ -60,11 +61,16 @@ export function Handover({ id, children }: { id: string, children?: React.ReactN
             right: '0px',
           }}
         >
-          {(handover?.animationUrl && handover?.animationUrl.length > 0 && (
-            <HandoverAnimation url={handover.animationUrl} animationName={handover.animationName} />
-          ))}
+          {handover?.animationUrl?.length && (
+            <HandoverAnimation
+              key={handover.animationUrl}
+              url={handover.animationUrl}
+              inputValue={handover.inputValue}
+            />
+          )}
           <Stack
             sx={{
+              height: '100%',
               px: 'base.spacing.x6',
               py: 'base.spacing.x10',
               textAlign: 'center',
@@ -88,7 +94,7 @@ export function Handover({ id, children }: { id: string, children?: React.ReactN
             </AnimatePresence>
           </Stack>
         </Stack>
-      ))}
+      )}
     </>
   );
 }
diff --git a/packages/checkout/widgets-lib/src/components/Handover/HandoverAnimation.tsx b/packages/checkout/widgets-lib/src/components/Handover/HandoverAnimation.tsx
@@ -1,42 +1,37 @@
 import { Box } from '@biom3/react';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import {
   Fit,
   Layout,
   useRive,
   useStateMachineInput,
 } from '@rive-app/react-canvas-lite';
 
-export function HandoverAnimation({ url, animationName }: { url: string, animationName?: string }) {
+const STATE_MACHINE_NAME = 'State';
+const INPUT_NAME = 'mode';
+
+export function HandoverAnimation({
+  url,
+  inputValue = 0,
+}: {
+  url: string;
+  inputValue?: number;
+}) {
   const riveParams = {
     src: url,
     autoplay: true,
     layout: new Layout({ fit: Fit.Contain }),
-    stateMachines: 'State',
+    stateMachines: STATE_MACHINE_NAME,
   };
+
   const { rive, RiveComponent } = useRive(riveParams);
-  useStateMachineInput(rive, 'State', 'mode', 0);
+  const input = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME);
 
   useEffect(() => {
-    if (rive) {
-      // TODO: hook into animation complete event to auto close handover
-      // rive.on(EventType.RiveEvent, (event) => {
-      //   console.log('Handover event', event);
-      // });
-      // rive.on(EventType.Stop, (event) => {
-      //   console.log('Handover animation complete', event);
-      // });
-
-      if (animationName) {
-        if (rive.animationNames.includes(animationName)) {
-          rive.play(animationName);
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn('Handover animation not found', animationName);
-        }
-      }
+    if (rive && input) {
+      input.value = inputValue;
     }
-  }, [rive, animationName]);
+  }, [rive, input, inputValue]);
 
   return (
     <Box

diff --git a/packages/checkout/widgets-lib/src/components/Handover/HandoverContent.tsx b/packages/checkout/widgets-lib/src/components/Handover/HandoverContent.tsx
@@ -0,0 +1,87 @@
+import {
+  Body, Box, Button, Heading,
+} from '@biom3/react';
+
+export function HandoverContent({
+  headingText,
+  subheadingText,
+  primaryButtonText,
+  onPrimaryButtonClick,
+  secondaryButtonText,
+  onSecondaryButtonClick,
+}: {
+  headingText: string;
+  subheadingText?: string;
+  primaryButtonText?: string;
+  onPrimaryButtonClick?: () => void;
+  secondaryButtonText?: string;
+  onSecondaryButtonClick?: () => void;
+}) {
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box>
+        <Heading sx={{ paddingBottom: 'base.spacing.x4' }}>
+          {headingText}
+        </Heading>
+
+        <Body
+          size="small"
+          sx={{
+            textAlign: 'center',
+            color: 'base.color.text.body.secondary',
+          }}
+        >
+          {subheadingText}
+        </Body>
+      </Box>
+
+      <Box>
+        {primaryButtonText && onPrimaryButtonClick && (
+          <Box
+            sx={{
+              paddingBottom: 'base.spacing.x2',
+            }}
+          >
+            <Button
+              sx={{
+                width: '100%',
+              }}
+              variant="primary"
+              size="large"
+              testId="handover-primary-button"
+              onClick={onPrimaryButtonClick}
+            >
+              {primaryButtonText}
+            </Button>
+          </Box>
+        )}
+        {secondaryButtonText && onSecondaryButtonClick && (
+          <Box
+            sx={{
+              paddingBottom: 'base.spacing.x4',
+            }}
+          >
+            <Button
+              sx={{
+                width: '100%',
+              }}
+              variant="tertiary"
+              size="large"
+              testId="handover-secondary-button"
+              onClick={onSecondaryButtonClick}
+            >
+              {secondaryButtonText}
+            </Button>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/context/handover-context/HandoverContext.ts b/packages/checkout/widgets-lib/src/context/handover-context/HandoverContext.ts
@@ -9,9 +9,9 @@ export enum HandoverTarget {
 export type HandoverContent = {
   children?: React.ReactNode;
   animationUrl?: string;
-  animationName?: string;
-  onAnimationComplete?: () => void;
+  inputValue?: number;
   duration?: number; // in milliseconds
+  onClose?: () => void;
 };
 
 export type HandoverLoader = {