Skip to content

Commit

Permalink
Merge branch 'main' into debug-browser-191-sign-msg
Browse files Browse the repository at this point in the history
  • Loading branch information
imx-mikhala authored Jul 1, 2024
2 parents 11230ec + 39bd920 commit 2652b95
Show file tree
Hide file tree
Showing 18 changed files with 1,072 additions and 232 deletions.
20 changes: 13 additions & 7 deletions packages/checkout/widgets-lib/src/components/Handover/Handover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { HandoverAnimation } from './HandoverAnimation';
const contentAnimation = {
hidden: { y: 8, opacity: 0 },
show: (i) => ({
height: '100%',
y: 0,
opacity: 1,
transition: {
Expand All @@ -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
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -88,7 +94,7 @@ export function Handover({ id, children }: { id: string, children?: React.ReactN
</AnimatePresence>
</Stack>
</Stack>
))}
)}
</>
);
}
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Loading

0 comments on commit 2652b95

Please sign in to comment.