npm - @oneblink/apps-react - Versions diffs - 8.14.0-beta.2 → 9.0.0-beta.1 - Mend

@oneblink/apps-react 8.14.0-beta.2 → 9.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (416) hide show

package/dist/components/mfa/MfaDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MfaDialog.js","sourceRoot":"","sources":["../../../src/components/mfa/MfaDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { QRCodeSVG } from 'qrcode.react'\nimport {\n Box,\n Collapse,\n Dialog,\n Grid,\n Link,\n Typography,\n DialogContent,\n DialogActions,\n Button,\n} from '@mui/material'\nimport { authService } from '@oneblink/apps'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { CopyToClipBoardIconButton } from '../CopyToClipboardIconButton'\nimport SuccessSnackbar from '../SuccessSnackbar'\nimport InputField from '../InputField'\nimport { LoadingButton } from '@mui/lab'\n\nfunction MfaDialog({\n onClose,\n onCompleted,\n mfaSetup,\n}: {\n onClose: () => void\n onCompleted: () => void\n mfaSetup: Awaited<ReturnType<typeof authService.setupMfa>> \| undefined\n}) {\n const [code, setState] = React.useState('')\n const [hasSuccessfullySaved, showSuccessfullySaved, hideSuccessfullySaved] =\n useBooleanState(false)\n const [isShowingSecretCode, showSecretCode, hideSecretCode] =\n useBooleanState(false)\n\n const qrcodeValue = React.useMemo(() => {\n if (mfaSetup) {\n return authService.generateMfaQrCodeUrl(mfaSetup)\n }\n }, [mfaSetup])\n\n const [isSaving, startSaving, stopSaving] = useBooleanState(false)\n const handleSave = React.useCallback(async () => {\n startSaving()\n if (!code \|\| !mfaSetup) {\n return\n }\n\n await mfaSetup.mfaCodeCallback(code)\n onCompleted()\n stopSaving()\n showSuccessfullySaved()\n }, [\n code,\n mfaSetup,\n onCompleted,\n showSuccessfullySaved,\n startSaving,\n stopSaving,\n ])\n\n return (\n <React.Fragment>\n <Dialog open={!!mfaSetup} onClose={onClose} title=\"Complete MFA Setup\">\n <DialogContent dividers>\n <>\n <Typography variant=\"subtitle2\" gutterBottom>\n Authenticator App\n </Typography>\n <Typography variant=\"body2\" paragraph>\n Authenticator apps like{' '}\n <Link\n href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Google Authenticator\n </Link>{' '}\n and{' '}\n <Link\n href=\"https://www.microsoft.com/en-us/security/mobile-authenticator-app\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Microsoft Authenticator\n </Link>{' '}\n generate one-time passwords that are used as a second factor to\n verify your identity when prompted during sign-in.\n </Typography>\n <Typography variant=\"subtitle2\" gutterBottom>\n Scan the QR code\n </Typography>\n <Typography variant=\"body2\" paragraph>\n Use an authenticator app or browser extension to scan the QR code\n below.\n </Typography>\n\n <Box marginBottom={2}>\n <Grid container spacing={2} alignItems=\"center\">\n <Grid item xs={false}>\n <Box\n border={1}\n padding={2}\n borderRadius={1}\n borderColor=\"divider\"\n display=\"inline-block\"\n >\n <QRCodeSVG value={qrcodeValue \|\| ''} />\n </Box>\n </Grid>\n <Grid item xs>\n <Typography variant=\"caption\" color=\"text.secondary\">\n Having trouble scanning the QR code?{' '}\n <Link onClick={showSecretCode} component=\"button\">\n Click here\n </Link>{' '}\n to display the setup key which can be manually entered in\n your authenticator app.\n </Typography>\n </Grid>\n </Grid>\n </Box>\n\n <Collapse in={isShowingSecretCode}>\n <Box marginBottom={2}>\n <InputField\n label=\"Setup Key\"\n value={mfaSetup?.secretCode \|\| ''}\n fullWidth\n InputProps={{\n endAdornment: (\n <CopyToClipBoardIconButton\n text={mfaSetup?.secretCode \|\| ''}\n />\n ),\n }}\n helperText={\n <>\n <Link onClick={hideSecretCode} component=\"button\">\n Click here\n </Link>{' '}\n to hide the setup key\n </>\n }\n />\n </Box>\n </Collapse>\n\n <Typography variant=\"subtitle2\" gutterBottom>\n Verify App\n </Typography>\n <Typography variant=\"body2\" paragraph>\n Enter the 6-digit code found in your authenticator app.\n </Typography>\n\n <InputField\n autoFocus\n margin=\"none\"\n name=\"code\"\n label=\"Code\"\n fullWidth\n placeholder=\"XXXXXX\"\n variant=\"outlined\"\n value={code}\n onChange={(event) => {\n const newValue = event.target.value\n setState(() => newValue)\n }}\n disabled={isSaving}\n data-cypress=\"mfa-dialog-code\"\n />\n </>\n </DialogContent>\n <DialogActions>\n <Button onClick={onClose} disabled={isSaving}>\n Cancel\n </Button>\n <LoadingButton\n variant=\"contained\"\n color=\"primary\"\n loading={isSaving}\n onClick={handleSave}\n >\n Save\n </LoadingButton>\n </DialogActions>\n </Dialog>\n\n <SuccessSnackbar\n open={hasSuccessfullySaved}\n onClose={hideSuccessfullySaved}\n >\n MFA has been successfully setup.\n </SuccessSnackbar>\n </React.Fragment>\n )\n}\n\nexport default React.memo(MfaDialog)\n"]}
1	+ {"version":3,"file":"MfaDialog.js","sourceRoot":"","sources":["../../../src/components/mfa/MfaDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { QRCodeSVG } from 'qrcode.react'\nimport {\n Box,\n Collapse,\n Dialog,\n Grid,\n Link,\n Typography,\n DialogContent,\n DialogActions,\n Button,\n} from '@mui/material'\nimport { authService } from '@oneblink/apps'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { CopyToClipBoardIconButton } from '../CopyToClipboardIconButton'\nimport SuccessSnackbar from '../SuccessSnackbar'\nimport InputField from '../InputField'\n\nfunction MfaDialog({\n onClose,\n onCompleted,\n mfaSetup,\n}: {\n onClose: () => void\n onCompleted: () => void\n mfaSetup: Awaited<ReturnType<typeof authService.setupMfa>> \| undefined\n}) {\n const [code, setState] = React.useState('')\n const [hasSuccessfullySaved, showSuccessfullySaved, hideSuccessfullySaved] =\n useBooleanState(false)\n const [isShowingSecretCode, showSecretCode, hideSecretCode] =\n useBooleanState(false)\n\n const qrcodeValue = React.useMemo(() => {\n if (mfaSetup) {\n return authService.generateMfaQrCodeUrl(mfaSetup)\n }\n }, [mfaSetup])\n\n const [isSaving, startSaving, stopSaving] = useBooleanState(false)\n const handleSave = React.useCallback(async () => {\n startSaving()\n if (!code \|\| !mfaSetup) {\n return\n }\n\n await mfaSetup.mfaCodeCallback(code)\n onCompleted()\n stopSaving()\n showSuccessfullySaved()\n }, [\n code,\n mfaSetup,\n onCompleted,\n showSuccessfullySaved,\n startSaving,\n stopSaving,\n ])\n\n return (\n <React.Fragment>\n <Dialog open={!!mfaSetup} onClose={onClose} title=\"Complete MFA Setup\">\n <DialogContent dividers>\n <>\n <Typography variant=\"subtitle2\" gutterBottom>\n Authenticator App\n </Typography>\n <Typography variant=\"body2\" paragraph>\n Authenticator apps like{' '}\n <Link\n href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Google Authenticator\n </Link>{' '}\n and{' '}\n <Link\n href=\"https://www.microsoft.com/en-us/security/mobile-authenticator-app\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Microsoft Authenticator\n </Link>{' '}\n generate one-time passwords that are used as a second factor to\n verify your identity when prompted during sign-in.\n </Typography>\n <Typography variant=\"subtitle2\" gutterBottom>\n Scan the QR code\n </Typography>\n <Typography variant=\"body2\" paragraph>\n Use an authenticator app or browser extension to scan the QR code\n below.\n </Typography>\n\n <Box marginBottom={2}>\n <Grid container spacing={2} alignItems=\"center\">\n <Grid>\n <Box\n border={1}\n padding={2}\n borderRadius={1}\n borderColor=\"divider\"\n display=\"inline-block\"\n >\n <QRCodeSVG value={qrcodeValue \|\| ''} />\n </Box>\n </Grid>\n <Grid size={{ xs: 'grow' }}>\n <Typography variant=\"caption\" color=\"text.secondary\">\n Having trouble scanning the QR code?{' '}\n <Link onClick={showSecretCode} component=\"button\">\n Click here\n </Link>{' '}\n to display the setup key which can be manually entered in\n your authenticator app.\n </Typography>\n </Grid>\n </Grid>\n </Box>\n\n <Collapse in={isShowingSecretCode}>\n <Box marginBottom={2}>\n <InputField\n label=\"Setup Key\"\n value={mfaSetup?.secretCode \|\| ''}\n fullWidth\n slotProps={{\n input: {\n endAdornment: (\n <CopyToClipBoardIconButton\n text={mfaSetup?.secretCode \|\| ''}\n />\n ),\n },\n }}\n helperText={\n <>\n <Link onClick={hideSecretCode} component=\"button\">\n Click here\n </Link>{' '}\n to hide the setup key\n </>\n }\n />\n </Box>\n </Collapse>\n\n <Typography variant=\"subtitle2\" gutterBottom>\n Verify App\n </Typography>\n <Typography variant=\"body2\" paragraph>\n Enter the 6-digit code found in your authenticator app.\n </Typography>\n\n <InputField\n autoFocus\n margin=\"none\"\n name=\"code\"\n label=\"Code\"\n fullWidth\n placeholder=\"XXXXXX\"\n variant=\"outlined\"\n value={code}\n onChange={(event) => {\n const newValue = event.target.value\n setState(() => newValue)\n }}\n disabled={isSaving}\n data-cypress=\"mfa-dialog-code\"\n />\n </>\n </DialogContent>\n <DialogActions>\n <Button onClick={onClose} disabled={isSaving}>\n Cancel\n </Button>\n <Button\n variant=\"contained\"\n color=\"primary\"\n loading={isSaving}\n onClick={handleSave}\n >\n Save\n </Button>\n </DialogActions>\n </Dialog>\n\n <SuccessSnackbar\n open={hasSuccessfullySaved}\n onClose={hideSuccessfullySaved}\n >\n MFA has been successfully setup.\n </SuccessSnackbar>\n </React.Fragment>\n )\n}\n\nexport default React.memo(MfaDialog)\n"]}

package/dist/components/mfa/MultiFactorAuthentication.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
-import * as React from 'react';
-export declare const LargeIcon: import("@emotion/styled").StyledComponent<import("@mui/material").IconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "children" | "classes" | "sx" | "color" | "fontSize" | "baseClassName"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LargeIcon: import("@emotion/styled").StyledComponent<any, {}, {}>;
 type Props = {
     ssoSetupUrl?: string;
 };
@@ -41,5 +38,5 @@ type Props = {
  * @returns
  * @group Components
  */
-export default function MultiFactorAuthentication({ ssoSetupUrl }: Props): React.JSX.Element;
+export default function MultiFactorAuthentication({ ssoSetupUrl }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/mfa/MultiFactorAuthentication.js CHANGED Viewed

@@ -1,6 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Button, Chip, CircularProgress, Divider, Grid, Icon, Paper, Tooltip, Typography, styled, } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
 import ConfirmDialog from '../ConfirmDialog';
 import MfaDialog from './MfaDialog';
 import ErrorSnackbar from '../ErrorSnackbar';
@@ -14,46 +13,30 @@ function MfaStatus({ isExternalIdentityProviderUser, isLoading, loadingError, lo
     if (isExternalIdentityProviderUser)
         return null;
     if (isLoading) {
-        return (React.createElement(Box, { padding: 3 },
-            React.createElement(Grid, { container: true, justifyContent: "center" },
-                React.createElement(CircularProgress, null))));
+        return (_jsx(Box, { padding: 3, children: _jsx(Grid, { container: true, justifyContent: "center", children: _jsx(CircularProgress, {}) }) }));
     }
     if (loadingError) {
-        return (React.createElement("div", null,
-            React.createElement(ErrorMessage, { title: "Error Loading Multi Factor Authentication Configuration", onTryAgain: loadMfa }, loadingError.message)));
+        return (_jsx("div", { children: _jsx(ErrorMessage, { title: "Error Loading Multi Factor Authentication Configuration", onTryAgain: loadMfa, children: loadingError.message }) }));
     }
     if (isMfaEnabled) {
-        return (React.createElement(Chip, { label: "Enabled", icon: React.createElement(MaterialIcon, { color: "success" }, "verified_user") }));
+        return (_jsx(Chip, { label: "Enabled", icon: _jsx(MaterialIcon, { color: "success", children: "verified_user" }) }));
     }
-    return (React.createElement(Chip, { label: "Disabled", icon: React.createElement(MaterialIcon, { color: "warning" }, "remove_moderator") }));
+    return (_jsx(Chip, { label: "Disabled", icon: _jsx(MaterialIcon, { color: "warning", children: "remove_moderator" }) }));
 }
 function MfaSetup({ ssoSetupUrl }) {
     const { setupError, isMfaEnabled, isDisablingMfa, isSettingUpMfa, mfaSetup, beginMfaSetup, cancelMfaSetup, completeMfaSetup, clearMfaSetupError, beginDisablingMfa, completeDisablingMfa, cancelDisablingMfa, isExternalIdentityProviderUser, } = useMfa();
     if (ssoSetupUrl) {
-        return (React.createElement(Grid, { item: true },
-            React.createElement(Button, { variant: "outlined", size: "small", component: "a", href: ssoSetupUrl, target: "_blank", rel: "noopener noreferrer", "data-cypress": "configure-mfa-button" }, "Configure MFA")));
+        return (_jsx(Grid, { children: _jsx(Button, { variant: "outlined", size: "small", component: "a", href: ssoSetupUrl, target: "_blank", rel: "noopener noreferrer", "data-cypress": "configure-mfa-button", children: "Configure MFA" }) }));
     }
     if (isExternalIdentityProviderUser) {
-        return (React.createElement(Grid, { item: true },
-            React.createElement(Tooltip, { title: "MFA must be configured in your login provider." },
-                React.createElement("span", null,
-                    React.createElement(Button, { variant: "outlined", size: "small", disabled: isExternalIdentityProviderUser, "data-cypress": "configure-mfa-button" }, "Configure MFA")))));
+        return (_jsx(Grid, { children: _jsx(Tooltip, { title: "MFA must be configured in your login provider.", children: _jsx("span", { children: _jsx(Button, { variant: "outlined", size: "small", disabled: isExternalIdentityProviderUser, "data-cypress": "configure-mfa-button", children: "Configure MFA" }) }) }) }));
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Grid, { item: true },
-            React.createElement(Button, { variant: "outlined", size: "small", disabled: !isMfaEnabled, "data-cypress": "disable-mfa-button", onClick: beginDisablingMfa }, "Disable MFA"),
-            React.createElement(ConfirmDialog, { isOpen: isDisablingMfa, onClose: cancelDisablingMfa, onConfirm: completeDisablingMfa, title: "Please Confirm", confirmButtonText: "Disable MFA", confirmButtonIcon: React.createElement(MaterialIcon, null, "remove_moderator"), cypress: {
-                    dialog: 'disable-mfa-dialog',
-                    confirmButton: 'disable-mfa-dialog-confirm-button',
-                    cancelButton: 'disable-mfa-dialog-cancel-button',
-                    error: 'disable-mfa-dialog-error-message',
-                } },
-                React.createElement(Typography, { variant: "body2" }, "Are you sure want to disable multi factor authentication (MFA)?"))),
-        React.createElement(Grid, { item: true },
-            React.createElement(LoadingButton, { variant: "contained", size: "small", loading: isSettingUpMfa, disabled: isMfaEnabled, onClick: beginMfaSetup, "data-cypress": "setup-mfa-button" }, "Setup MFA"),
-            React.createElement(MfaDialog, { mfaSetup: mfaSetup, onClose: cancelMfaSetup, onCompleted: completeMfaSetup })),
-        React.createElement(ErrorSnackbar, { open: !!setupError, onClose: clearMfaSetupError },
-            React.createElement("span", { "data-cypress": "mfa-setup-error-message" }, setupError === null || setupError === void 0 ? void 0 : setupError.message))));
+    return (_jsxs(_Fragment, { children: [_jsxs(Grid, { children: [_jsx(Button, { variant: "outlined", size: "small", disabled: !isMfaEnabled, "data-cypress": "disable-mfa-button", onClick: beginDisablingMfa, children: "Disable MFA" }), _jsx(ConfirmDialog, { isOpen: isDisablingMfa, onClose: cancelDisablingMfa, onConfirm: completeDisablingMfa, title: "Please Confirm", confirmButtonText: "Disable MFA", confirmButtonIcon: _jsx(MaterialIcon, { children: "remove_moderator" }), cypress: {
+                            dialog: 'disable-mfa-dialog',
+                            confirmButton: 'disable-mfa-dialog-confirm-button',
+                            cancelButton: 'disable-mfa-dialog-cancel-button',
+                            error: 'disable-mfa-dialog-error-message',
+                        }, children: _jsx(Typography, { variant: "body2", children: "Are you sure want to disable multi factor authentication (MFA)?" }) })] }), _jsxs(Grid, { children: [_jsx(Button, { variant: "contained", size: "small", loading: isSettingUpMfa, disabled: isMfaEnabled, onClick: beginMfaSetup, "data-cypress": "setup-mfa-button", children: "Setup MFA" }), _jsx(MfaDialog, { mfaSetup: mfaSetup, onClose: cancelMfaSetup, onCompleted: completeMfaSetup })] }), _jsx(ErrorSnackbar, { open: !!setupError, onClose: clearMfaSetupError, children: _jsx("span", { "data-cypress": "mfa-setup-error-message", children: setupError === null || setupError === void 0 ? void 0 : setupError.message }) })] }));
 }
 /**
  * React Component that provides a mechanism for app users to configure Multi
@@ -93,20 +76,6 @@ function MfaSetup({ ssoSetupUrl }) {
  */
 export default function MultiFactorAuthentication({ ssoSetupUrl }) {
     const { loadingError, isLoading, isMfaEnabled, loadMfa, isExternalIdentityProviderUser, } = useMfa();
-    return (React.createElement(Grid, { item: true, xs: true, lg: 8 },
-        React.createElement(Box, { padding: 3 },
-            React.createElement(Paper, null,
-                React.createElement(Box, { padding: 3 },
-                    React.createElement(Grid, { container: true, spacing: 2, alignItems: "center" },
-                        React.createElement(Grid, { item: true, xs: true },
-                            React.createElement(Typography, { variant: "h4", fontWeight: "light" },
-                                "Multi Factor Authentication",
-                                ' ',
-                                React.createElement(MfaStatus, { loadMfa: loadMfa, isLoading: isLoading, loadingError: loadingError, isMfaEnabled: isMfaEnabled, isExternalIdentityProviderUser: !!isExternalIdentityProviderUser })),
-                            React.createElement(Box, { marginY: 1 },
-                                React.createElement(Divider, null)),
-                            React.createElement(Typography, { variant: "body2", paragraph: true }, "Multi factor authentication (MFA), also known as two factor authentication (2FA), is a best practice that requires a second authentication factor in addition to user name and password sign-in credentials. We strongly recommend enabling MFA to enhance your account security."),
-                            React.createElement(Grid, { container: true, justifyContent: "flex-end", spacing: 1 },
-                                React.createElement(MfaSetup, { ssoSetupUrl: ssoSetupUrl || '' })))))))));
+    return (_jsx(Grid, { size: { xs: 'grow', lg: 8 }, children: _jsx(Box, { padding: 3, children: _jsx(Paper, { children: _jsx(Box, { padding: 3, children: _jsx(Grid, { container: true, spacing: 2, alignItems: "center", children: _jsxs(Grid, { size: { xs: 'grow' }, children: [_jsxs(Typography, { variant: "h4", fontWeight: "light", children: ["Multi Factor Authentication", ' ', _jsx(MfaStatus, { loadMfa: loadMfa, isLoading: isLoading, loadingError: loadingError, isMfaEnabled: isMfaEnabled, isExternalIdentityProviderUser: !!isExternalIdentityProviderUser })] }), _jsx(Box, { marginY: 1, children: _jsx(Divider, {}) }), _jsx(Typography, { variant: "body2", paragraph: true, children: "Multi factor authentication (MFA), also known as two factor authentication (2FA), is a best practice that requires a second authentication factor in addition to user name and password sign-in credentials. We strongly recommend enabling MFA to enhance your account security." }), _jsx(Grid, { container: true, justifyContent: "flex-end", spacing: 1, children: _jsx(MfaSetup, { ssoSetupUrl: ssoSetupUrl || '' }) })] }) }) }) }) }) }));
 }
 //# sourceMappingURL=MultiFactorAuthentication.js.map

package/dist/components/mfa/MultiFactorAuthentication.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiFactorAuthentication.js","sourceRoot":"","sources":["../../../src/components/mfa/MultiFactorAuthentication.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n Box,\n Button,\n Chip,\n CircularProgress,\n Divider,\n Grid,\n Icon,\n Paper,\n Tooltip,\n Typography,\n styled,\n} from '@mui/material'\nimport { LoadingButton } from '@mui/lab'\nimport ConfirmDialog from '../ConfirmDialog'\nimport MfaDialog from './MfaDialog'\nimport ErrorSnackbar from '../ErrorSnackbar'\nimport MaterialIcon from '../MaterialIcon'\nimport useMfa from '../../hooks/useMfa'\nimport ErrorMessage from '../messages/ErrorMessage'\n\nexport const LargeIcon = styled(Icon)(({ theme }) => ({\n fontSize: `${theme.typography.h4.fontSize} !important`,\n}))\n\ntype Props = {\n ssoSetupUrl?: string\n}\n\ntype MfaStatusProps = {\n isExternalIdentityProviderUser: boolean\n isLoading: boolean\n isMfaEnabled: boolean\n loadMfa: () => void\n loadingError?: Error\n}\n\nfunction MfaStatus({\n isExternalIdentityProviderUser,\n isLoading,\n loadingError,\n loadMfa,\n isMfaEnabled,\n}: MfaStatusProps) {\n if (isExternalIdentityProviderUser) return null\n\n if (isLoading) {\n return (\n <Box padding={3}>\n <Grid container justifyContent=\"center\">\n <CircularProgress />\n </Grid>\n </Box>\n )\n }\n\n if (loadingError) {\n return (\n <div>\n <ErrorMessage\n title=\"Error Loading Multi Factor Authentication Configuration\"\n onTryAgain={loadMfa}\n >\n {loadingError.message}\n </ErrorMessage>\n </div>\n )\n }\n\n if (isMfaEnabled) {\n return (\n <Chip\n label=\"Enabled\"\n icon={<MaterialIcon color=\"success\">verified_user</MaterialIcon>}\n />\n )\n }\n\n return (\n <Chip\n label=\"Disabled\"\n icon={<MaterialIcon color=\"warning\">remove_moderator</MaterialIcon>}\n />\n )\n}\n\nfunction MfaSetup({ ssoSetupUrl }: { ssoSetupUrl: string }) {\n const {\n setupError,\n isMfaEnabled,\n isDisablingMfa,\n isSettingUpMfa,\n mfaSetup,\n beginMfaSetup,\n cancelMfaSetup,\n completeMfaSetup,\n clearMfaSetupError,\n beginDisablingMfa,\n completeDisablingMfa,\n cancelDisablingMfa,\n isExternalIdentityProviderUser,\n } = useMfa()\n\n if (ssoSetupUrl) {\n return (\n <Grid item>\n <Button\n variant=\"outlined\"\n size=\"small\"\n component=\"a\"\n href={ssoSetupUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n data-cypress=\"configure-mfa-button\"\n >\n Configure MFA\n </Button>\n </Grid>\n )\n }\n\n if (isExternalIdentityProviderUser) {\n return (\n <Grid item>\n <Tooltip title=\"MFA must be configured in your login provider.\">\n <span>\n <Button\n variant=\"outlined\"\n size=\"small\"\n disabled={isExternalIdentityProviderUser}\n data-cypress=\"configure-mfa-button\"\n >\n Configure MFA\n </Button>\n </span>\n </Tooltip>\n </Grid>\n )\n }\n\n return (\n <>\n <Grid item>\n <Button\n variant=\"outlined\"\n size=\"small\"\n disabled={!isMfaEnabled}\n data-cypress=\"disable-mfa-button\"\n onClick={beginDisablingMfa}\n >\n Disable MFA\n </Button>\n <ConfirmDialog\n isOpen={isDisablingMfa}\n onClose={cancelDisablingMfa}\n onConfirm={completeDisablingMfa}\n title=\"Please Confirm\"\n confirmButtonText=\"Disable MFA\"\n confirmButtonIcon={<MaterialIcon>remove_moderator</MaterialIcon>}\n cypress={{\n dialog: 'disable-mfa-dialog',\n confirmButton: 'disable-mfa-dialog-confirm-button',\n cancelButton: 'disable-mfa-dialog-cancel-button',\n error: 'disable-mfa-dialog-error-message',\n }}\n >\n <Typography variant=\"body2\">\n Are you sure want to disable multi factor authentication (MFA)?\n </Typography>\n </ConfirmDialog>\n </Grid>\n\n <Grid item>\n <LoadingButton\n variant=\"contained\"\n size=\"small\"\n loading={isSettingUpMfa}\n disabled={isMfaEnabled}\n onClick={beginMfaSetup}\n data-cypress=\"setup-mfa-button\"\n >\n Setup MFA\n </LoadingButton>\n <MfaDialog\n mfaSetup={mfaSetup}\n onClose={cancelMfaSetup}\n onCompleted={completeMfaSetup}\n />\n </Grid>\n <ErrorSnackbar open={!!setupError} onClose={clearMfaSetupError}>\n <span data-cypress=\"mfa-setup-error-message\">\n {setupError?.message}\n </span>\n </ErrorSnackbar>\n </>\n )\n}\n/*\n React Component that provides a mechanism for app users to configure Multi\n * Factor Authentication. `<MfaProvider />` must be provided above this\n * component in the component tree.\n \n #### Example\n \n ```js\n * import * as React from 'react'\n * import {\n * MfaProvider,\n * MultiFactorAuthentication,\n * } from '@oneblink/apps-react'\n \n function Component() {\n * return <MultiFactorAuthentication />\n * }\n \n function App() {\n * return (\n * <MfaProvider>\n * <Component />\n * </MfaProvider>\n * )\n * }\n \n const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n \n @param props\n * @returns\n * @group Components\n */\nexport default function MultiFactorAuthentication({ ssoSetupUrl }: Props) {\n const {\n loadingError,\n isLoading,\n isMfaEnabled,\n loadMfa,\n isExternalIdentityProviderUser,\n } = useMfa()\n\n return (\n <Grid item xs={true} lg={8}>\n <Box padding={3}>\n <Paper>\n <Box padding={3}>\n <Grid container spacing={2} alignItems=\"center\">\n <Grid item xs>\n <Typography variant=\"h4\" fontWeight=\"light\">\n Multi Factor Authentication{' '}\n <MfaStatus\n loadMfa={loadMfa}\n isLoading={isLoading}\n loadingError={loadingError}\n isMfaEnabled={isMfaEnabled}\n isExternalIdentityProviderUser={\n !!isExternalIdentityProviderUser\n }\n />\n </Typography>\n <Box marginY={1}>\n <Divider />\n </Box>\n <Typography variant=\"body2\" paragraph>\n Multi factor authentication (MFA), also known as two factor\n authentication (2FA), is a best practice that requires a\n second authentication factor in addition to user name and\n password sign-in credentials. We strongly recommend enabling\n MFA to enhance your account security.\n </Typography>\n <Grid container justifyContent=\"flex-end\" spacing={1}>\n <MfaSetup ssoSetupUrl={ssoSetupUrl \|\| ''} />\n </Grid>\n </Grid>\n </Grid>\n </Box>\n </Paper>\n </Box>\n </Grid>\n )\n}\n"]}
1	+ {"version":3,"file":"MultiFactorAuthentication.js","sourceRoot":"","sources":["../../../src/components/mfa/MultiFactorAuthentication.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Box,\n Button,\n Chip,\n CircularProgress,\n Divider,\n Grid,\n Icon,\n Paper,\n Tooltip,\n Typography,\n styled,\n} from '@mui/material'\nimport ConfirmDialog from '../ConfirmDialog'\nimport MfaDialog from './MfaDialog'\nimport ErrorSnackbar from '../ErrorSnackbar'\nimport MaterialIcon from '../MaterialIcon'\nimport useMfa from '../../hooks/useMfa'\nimport ErrorMessage from '../messages/ErrorMessage'\n\nexport const LargeIcon = styled(Icon)(({ theme }) => ({\n fontSize: `${theme.typography.h4.fontSize} !important`,\n}))\n\ntype Props = {\n ssoSetupUrl?: string\n}\n\ntype MfaStatusProps = {\n isExternalIdentityProviderUser: boolean\n isLoading: boolean\n isMfaEnabled: boolean\n loadMfa: () => void\n loadingError?: Error\n}\n\nfunction MfaStatus({\n isExternalIdentityProviderUser,\n isLoading,\n loadingError,\n loadMfa,\n isMfaEnabled,\n}: MfaStatusProps) {\n if (isExternalIdentityProviderUser) return null\n\n if (isLoading) {\n return (\n <Box padding={3}>\n <Grid container justifyContent=\"center\">\n <CircularProgress />\n </Grid>\n </Box>\n )\n }\n\n if (loadingError) {\n return (\n <div>\n <ErrorMessage\n title=\"Error Loading Multi Factor Authentication Configuration\"\n onTryAgain={loadMfa}\n >\n {loadingError.message}\n </ErrorMessage>\n </div>\n )\n }\n\n if (isMfaEnabled) {\n return (\n <Chip\n label=\"Enabled\"\n icon={<MaterialIcon color=\"success\">verified_user</MaterialIcon>}\n />\n )\n }\n\n return (\n <Chip\n label=\"Disabled\"\n icon={<MaterialIcon color=\"warning\">remove_moderator</MaterialIcon>}\n />\n )\n}\n\nfunction MfaSetup({ ssoSetupUrl }: { ssoSetupUrl: string }) {\n const {\n setupError,\n isMfaEnabled,\n isDisablingMfa,\n isSettingUpMfa,\n mfaSetup,\n beginMfaSetup,\n cancelMfaSetup,\n completeMfaSetup,\n clearMfaSetupError,\n beginDisablingMfa,\n completeDisablingMfa,\n cancelDisablingMfa,\n isExternalIdentityProviderUser,\n } = useMfa()\n\n if (ssoSetupUrl) {\n return (\n <Grid>\n <Button\n variant=\"outlined\"\n size=\"small\"\n component=\"a\"\n href={ssoSetupUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n data-cypress=\"configure-mfa-button\"\n >\n Configure MFA\n </Button>\n </Grid>\n )\n }\n\n if (isExternalIdentityProviderUser) {\n return (\n <Grid>\n <Tooltip title=\"MFA must be configured in your login provider.\">\n <span>\n <Button\n variant=\"outlined\"\n size=\"small\"\n disabled={isExternalIdentityProviderUser}\n data-cypress=\"configure-mfa-button\"\n >\n Configure MFA\n </Button>\n </span>\n </Tooltip>\n </Grid>\n )\n }\n\n return (\n <>\n <Grid>\n <Button\n variant=\"outlined\"\n size=\"small\"\n disabled={!isMfaEnabled}\n data-cypress=\"disable-mfa-button\"\n onClick={beginDisablingMfa}\n >\n Disable MFA\n </Button>\n <ConfirmDialog\n isOpen={isDisablingMfa}\n onClose={cancelDisablingMfa}\n onConfirm={completeDisablingMfa}\n title=\"Please Confirm\"\n confirmButtonText=\"Disable MFA\"\n confirmButtonIcon={<MaterialIcon>remove_moderator</MaterialIcon>}\n cypress={{\n dialog: 'disable-mfa-dialog',\n confirmButton: 'disable-mfa-dialog-confirm-button',\n cancelButton: 'disable-mfa-dialog-cancel-button',\n error: 'disable-mfa-dialog-error-message',\n }}\n >\n <Typography variant=\"body2\">\n Are you sure want to disable multi factor authentication (MFA)?\n </Typography>\n </ConfirmDialog>\n </Grid>\n\n <Grid>\n <Button\n variant=\"contained\"\n size=\"small\"\n loading={isSettingUpMfa}\n disabled={isMfaEnabled}\n onClick={beginMfaSetup}\n data-cypress=\"setup-mfa-button\"\n >\n Setup MFA\n </Button>\n <MfaDialog\n mfaSetup={mfaSetup}\n onClose={cancelMfaSetup}\n onCompleted={completeMfaSetup}\n />\n </Grid>\n <ErrorSnackbar open={!!setupError} onClose={clearMfaSetupError}>\n <span data-cypress=\"mfa-setup-error-message\">\n {setupError?.message}\n </span>\n </ErrorSnackbar>\n </>\n )\n}\n/*\n React Component that provides a mechanism for app users to configure Multi\n * Factor Authentication. `<MfaProvider />` must be provided above this\n * component in the component tree.\n \n #### Example\n \n ```js\n * import * as React from 'react'\n * import {\n * MfaProvider,\n * MultiFactorAuthentication,\n * } from '@oneblink/apps-react'\n \n function Component() {\n * return <MultiFactorAuthentication />\n * }\n \n function App() {\n * return (\n * <MfaProvider>\n * <Component />\n * </MfaProvider>\n * )\n * }\n \n const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n \n @param props\n * @returns\n * @group Components\n */\nexport default function MultiFactorAuthentication({ ssoSetupUrl }: Props) {\n const {\n loadingError,\n isLoading,\n isMfaEnabled,\n loadMfa,\n isExternalIdentityProviderUser,\n } = useMfa()\n\n return (\n <Grid size={{ xs: 'grow', lg: 8 }}>\n <Box padding={3}>\n <Paper>\n <Box padding={3}>\n <Grid container spacing={2} alignItems=\"center\">\n <Grid size={{ xs: 'grow' }}>\n <Typography variant=\"h4\" fontWeight=\"light\">\n Multi Factor Authentication{' '}\n <MfaStatus\n loadMfa={loadMfa}\n isLoading={isLoading}\n loadingError={loadingError}\n isMfaEnabled={isMfaEnabled}\n isExternalIdentityProviderUser={\n !!isExternalIdentityProviderUser\n }\n />\n </Typography>\n <Box marginY={1}>\n <Divider />\n </Box>\n <Typography variant=\"body2\" paragraph>\n Multi factor authentication (MFA), also known as two factor\n authentication (2FA), is a best practice that requires a\n second authentication factor in addition to user name and\n password sign-in credentials. We strongly recommend enabling\n MFA to enhance your account security.\n </Typography>\n <Grid container justifyContent=\"flex-end\" spacing={1}>\n <MfaSetup ssoSetupUrl={ssoSetupUrl \|\| ''} />\n </Grid>\n </Grid>\n </Grid>\n </Box>\n </Paper>\n </Box>\n </Grid>\n )\n}\n"]}

package/dist/components/payments/PaymentForm.d.ts CHANGED Viewed

@@ -13,6 +13,6 @@ declare function PaymentForm({ captchaSiteKey, captchaType, onCompleted, onCance
     }) => void;
     appImageUrl?: string;
     title?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof PaymentForm>;
 export default _default;

package/dist/components/payments/PaymentForm.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { paymentService } from '@oneblink/apps';
 import React from 'react';
 import WestpacQuickStreamPaymentForm from './WestpacQuickStreamPaymentForm';
@@ -22,7 +23,7 @@ function PaymentForm({ captchaSiteKey, captchaType, onCompleted, onCancelled, ap
                     abortSignal,
                 });
                 return {
-                    renderPaymentForm: () => (React.createElement(WestpacQuickStreamPaymentForm, { formSubmissionResult: formSubmissionResult, paymentSubmissionEvent: paymentSubmissionEvent, formSubmissionPaymentId: formSubmissionPaymentId, supplierBusinessCode: supplierBusinessCode, publishableApiKey: publishableApiKey, isTestMode: isTestMode, captchaSiteKey: captchaSiteKey, captchaType: captchaType, onCompleted: onCompleted, onCancelled: onCancelled, appImageUrl: appImageUrl, title: title })),
+                    renderPaymentForm: () => (_jsx(WestpacQuickStreamPaymentForm, { formSubmissionResult: formSubmissionResult, paymentSubmissionEvent: paymentSubmissionEvent, formSubmissionPaymentId: formSubmissionPaymentId, supplierBusinessCode: supplierBusinessCode, publishableApiKey: publishableApiKey, isTestMode: isTestMode, captchaSiteKey: captchaSiteKey, captchaType: captchaType, onCompleted: onCompleted, onCancelled: onCancelled, appImageUrl: appImageUrl, title: title })),
                 };
             }
             default: {
@@ -41,16 +42,10 @@ function PaymentForm({ captchaSiteKey, captchaType, onCompleted, onCancelled, ap
     const [state] = useLoadDataState(loadPaymentFormConfiguration);
     switch (state.status) {
         case 'LOADING': {
-            return (React.createElement("section", null,
-                React.createElement("div", { className: "cypress-loading has-text-centered" },
-                    React.createElement(OnLoading, { className: "has-text-centered" }),
-                    React.createElement("span", null, "Loading payment configuration..."))));
+            return (_jsx("section", { children: _jsxs("div", { className: "cypress-loading has-text-centered", children: [_jsx(OnLoading, { className: "has-text-centered" }), _jsx("span", { children: "Loading payment configuration..." })] }) }));
         }
         case 'ERROR': {
-            return (React.createElement("section", { className: "cypress-payment-form-loading-error-message", role: "alert" },
-                React.createElement("div", { className: "ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8" },
-                    React.createElement(MaterialIcon, { className: "ob-payment-form__error-icon has-text-danger icon-x-large" }, "error")),
-                React.createElement("p", { className: "ob-payment-form__error-message has-text-centered has-margin-bottom-4" }, state.error.message)));
+            return (_jsxs("section", { className: "cypress-payment-form-loading-error-message", role: "alert", children: [_jsx("div", { className: "ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8", children: _jsx(MaterialIcon, { className: "ob-payment-form__error-icon has-text-danger icon-x-large", children: "error" }) }), _jsx("p", { className: "ob-payment-form__error-message has-text-centered has-margin-bottom-4", children: state.error.message })] }));
         }
         case 'SUCCESS': {
             return state.result.renderPaymentForm();

package/dist/components/payments/PaymentForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/PaymentForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,6BAA6B,MAAM,iCAAiC,CAAA;AAC3E,OAAO,QAAQ,MAAM,sBAAsB,CAAA;AAC3C,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAC3D,OAAO,SAAS,MAAM,uBAAuB,CAAA;AAC7C,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAG1C,SAAS,WAAW,CAAC,EACnB,cAAc,EACd,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,KAAK,GAWN;IACC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,4BAA4B,GAAG,KAAK,CAAC,WAAW,CACpD,KAAK,EAAE,WAAwB,EAAE,EAAE;QACjC,MAAM,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,CAAA;QAC7D,IAAI,OAAO,uBAAuB,KAAK,QAAQ,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CACb,8DAA8D,CAC/D,CAAA;QACH,CAAC;QAED,MAAM,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,GACpD,MAAM,cAAc,CAAC,8BAA8B,EAAE,CAAA;QACvD,QAAQ,sBAAsB,CAAC,IAAI,EAAE,CAAC;YACpC,KAAK,sBAAsB,CAAC,CAAC,CAAC;gBAC5B,MAAM,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAC3D,MAAM,cAAc,CAAC,kBAAkB,CAAC,2BAA2B,CACjE;oBACE,uBAAuB;oBACvB,oBAAoB;oBACpB,sBAAsB;oBACtB,WAAW;iBACZ,CACF,CAAA;gBACH,OAAO;oBACL,iBAAiB,EAAE,GAAG,EAAE,CAAC,CACvB,~~oBAAC~~,6BAA6B,IAC5B,oBAAoB,EAAE,oBAAoB,EAC1C,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,uBAAuB,EAChD,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,GACZ,CACH;iBACF,CAAA;YACH,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,MAAM,IAAI,KAAK,CACb,IAAI,sBAAsB,CAAC,IAAI,wDAAwD,CACxF,CAAA;YACH,CAAC;QACH,CAAC;IACH,CAAC,EACD;QACE,WAAW;QACX,cAAc;QACd,WAAW;QACX,WAAW;QACX,WAAW;QACX,KAAK,CAAC,uBAAuB;QAC7B,KAAK;KACN,CACF,CAAA;IAED,MAAM,CAAC,KAAK,CAAC,GAAG,gBAAgB,CAAC,4BAA4B,CAAC,CAAA;IAE9D,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;QACrB,KAAK,SAAS,CAAC,CAAC,CAAC;YACf,OAAO,CACL~~;gBACE~~,~~6BAAK~~,SAAS,EAAC,mCAAmC~~;oBAChD~~,~~oBAAC~~,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa~~;oBACrD~~,~~qEAA6C~~,~~CACzC~~,~~CACE~~,CACX,CAAA;QACH,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,OAAO,CACL,~~iCACE~~,SAAS,EAAC,4CAA4C,EACtD,IAAI,EAAC,OAAO~~;gBAEZ~~,~~6BAAK~~,SAAS,EAAC,6EAA6E~~;oBAC1F~~,~~oBAAC~~,YAAY,IAAC,SAAS,EAAC,0DAA0D,~~YAEnE~~,~~CACX;gBACN~~,~~2BAAG~~,SAAS,EAAC,sEAAsE,~~IAChF~~,KAAK,CAAC,KAAK,CAAC,OAAO,~~CAClB~~,~~CACI~~,CACX,CAAA;QACH,CAAC;QACD,KAAK,SAAS,CAAC,CAAC,CAAC;YACf,OAAO,KAAK,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAA;QACzC,CAAC;IACH,CAAC;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import { paymentService } from '@oneblink/apps'\nimport { SubmissionTypes } from '@oneblink/types'\nimport React from 'react'\nimport WestpacQuickStreamPaymentForm from './WestpacQuickStreamPaymentForm'\nimport useQuery from '../../hooks/useQuery'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport OnLoading from '../renderer/OnLoading'\nimport MaterialIcon from '../MaterialIcon'\nimport { CaptchaType } from '../../types/form'\n\nfunction PaymentForm({\n captchaSiteKey,\n captchaType,\n onCompleted,\n onCancelled,\n appImageUrl,\n title,\n}: {\n captchaSiteKey: string\n captchaType?: CaptchaType\n onCompleted: (result: {\n formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n paymentReceiptUrl: string\n }) => void\n onCancelled: (result: { paymentReceiptUrl: string }) => void\n appImageUrl?: string\n title?: string\n}) {\n const query = useQuery()\n\n const loadPaymentFormConfiguration = React.useCallback(\n async (abortSignal: AbortSignal) => {\n const formSubmissionPaymentId = query.formSubmissionPaymentId\n if (typeof formSubmissionPaymentId !== 'string') {\n throw new Error(\n 'It looks like you are attempting to make an unknown payment.',\n )\n }\n\n const { formSubmissionResult, paymentSubmissionEvent } =\n await paymentService.getFormSubmissionResultPayment()\n switch (paymentSubmissionEvent.type) {\n case 'WESTPAC_QUICK_STREAM': {\n const { supplierBusinessCode, publishableApiKey, isTestMode } =\n await paymentService.westpacQuickStream.getPaymentFormConfiguration(\n {\n formSubmissionPaymentId,\n formSubmissionResult,\n paymentSubmissionEvent,\n abortSignal,\n },\n )\n return {\n renderPaymentForm: () => (\n <WestpacQuickStreamPaymentForm\n formSubmissionResult={formSubmissionResult}\n paymentSubmissionEvent={paymentSubmissionEvent}\n formSubmissionPaymentId={formSubmissionPaymentId}\n supplierBusinessCode={supplierBusinessCode}\n publishableApiKey={publishableApiKey}\n isTestMode={isTestMode}\n captchaSiteKey={captchaSiteKey}\n captchaType={captchaType}\n onCompleted={onCompleted}\n onCancelled={onCancelled}\n appImageUrl={appImageUrl}\n title={title}\n />\n ),\n }\n }\n default: {\n throw new Error(\n `\"${paymentSubmissionEvent.type}\" payment events do not support a custom payment form.`,\n )\n }\n }\n },\n [\n appImageUrl,\n captchaSiteKey,\n captchaType,\n onCancelled,\n onCompleted,\n query.formSubmissionPaymentId,\n title,\n ],\n )\n\n const [state] = useLoadDataState(loadPaymentFormConfiguration)\n\n switch (state.status) {\n case 'LOADING': {\n return (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Loading payment configuration...</span>\n </div>\n </section>\n )\n }\n case 'ERROR': {\n return (\n <section\n className=\"cypress-payment-form-loading-error-message\"\n role=\"alert\"\n >\n <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n error\n </MaterialIcon>\n </div>\n <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n {state.error.message}\n </p>\n </section>\n )\n }\n case 'SUCCESS': {\n return state.result.renderPaymentForm()\n }\n }\n}\n\nexport default React.memo(PaymentForm)\n"]}
1	+ {"version":3,"file":"PaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/PaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { paymentService } from '@oneblink/apps'\nimport { SubmissionTypes } from '@oneblink/types'\nimport React from 'react'\nimport WestpacQuickStreamPaymentForm from './WestpacQuickStreamPaymentForm'\nimport useQuery from '../../hooks/useQuery'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport OnLoading from '../renderer/OnLoading'\nimport MaterialIcon from '../MaterialIcon'\nimport { CaptchaType } from '../../types/form'\n\nfunction PaymentForm({\n captchaSiteKey,\n captchaType,\n onCompleted,\n onCancelled,\n appImageUrl,\n title,\n}: {\n captchaSiteKey: string\n captchaType?: CaptchaType\n onCompleted: (result: {\n formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n paymentReceiptUrl: string\n }) => void\n onCancelled: (result: { paymentReceiptUrl: string }) => void\n appImageUrl?: string\n title?: string\n}) {\n const query = useQuery()\n\n const loadPaymentFormConfiguration = React.useCallback(\n async (abortSignal: AbortSignal) => {\n const formSubmissionPaymentId = query.formSubmissionPaymentId\n if (typeof formSubmissionPaymentId !== 'string') {\n throw new Error(\n 'It looks like you are attempting to make an unknown payment.',\n )\n }\n\n const { formSubmissionResult, paymentSubmissionEvent } =\n await paymentService.getFormSubmissionResultPayment()\n switch (paymentSubmissionEvent.type) {\n case 'WESTPAC_QUICK_STREAM': {\n const { supplierBusinessCode, publishableApiKey, isTestMode } =\n await paymentService.westpacQuickStream.getPaymentFormConfiguration(\n {\n formSubmissionPaymentId,\n formSubmissionResult,\n paymentSubmissionEvent,\n abortSignal,\n },\n )\n return {\n renderPaymentForm: () => (\n <WestpacQuickStreamPaymentForm\n formSubmissionResult={formSubmissionResult}\n paymentSubmissionEvent={paymentSubmissionEvent}\n formSubmissionPaymentId={formSubmissionPaymentId}\n supplierBusinessCode={supplierBusinessCode}\n publishableApiKey={publishableApiKey}\n isTestMode={isTestMode}\n captchaSiteKey={captchaSiteKey}\n captchaType={captchaType}\n onCompleted={onCompleted}\n onCancelled={onCancelled}\n appImageUrl={appImageUrl}\n title={title}\n />\n ),\n }\n }\n default: {\n throw new Error(\n `\"${paymentSubmissionEvent.type}\" payment events do not support a custom payment form.`,\n )\n }\n }\n },\n [\n appImageUrl,\n captchaSiteKey,\n captchaType,\n onCancelled,\n onCompleted,\n query.formSubmissionPaymentId,\n title,\n ],\n )\n\n const [state] = useLoadDataState(loadPaymentFormConfiguration)\n\n switch (state.status) {\n case 'LOADING': {\n return (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Loading payment configuration...</span>\n </div>\n </section>\n )\n }\n case 'ERROR': {\n return (\n <section\n className=\"cypress-payment-form-loading-error-message\"\n role=\"alert\"\n >\n <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n error\n </MaterialIcon>\n </div>\n <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n {state.error.message}\n </p>\n </section>\n )\n }\n case 'SUCCESS': {\n return state.result.renderPaymentForm()\n }\n }\n}\n\nexport default React.memo(PaymentForm)\n"]}

package/dist/components/payments/WestpacQuickStreamPaymentForm.d.ts CHANGED Viewed

@@ -47,6 +47,6 @@ declare function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSu
     }) => void;
     appImageUrl?: string;
     title?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof WestpacQuickStreamPaymentForm>;
 export default _default;

package/dist/components/payments/WestpacQuickStreamPaymentForm.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { OneBlinkAppsError, paymentService, localisationService, } from '@oneblink/apps';
 import clsx from 'clsx';
 import React from 'react';
@@ -236,51 +237,16 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
             });
         }
     }, [formSubmissionPaymentId, formSubmissionResult, onCancelled]);
-    return (React.createElement(React.Fragment, null,
-        isLoading && (React.createElement("section", null,
-            React.createElement("div", { className: "cypress-loading has-text-centered" },
-                React.createElement(OnLoading, { className: "has-text-centered" }),
-                React.createElement("span", null, "Building payment form...")))),
-        loadError && (React.createElement("section", { className: "cypress-payment-form-loading-error-message" },
-            React.createElement("div", { className: "ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8" },
-                React.createElement(MaterialIcon, { className: "ob-payment-form__error-icon has-text-danger icon-x-large" }, "error")),
-            React.createElement("p", { className: "ob-payment-form__error-message has-text-centered has-margin-bottom-4" }, loadError.message))),
-        React.createElement("section", null,
-            React.createElement("form", { onSubmit: (event) => {
-                    event.preventDefault();
-                    handleSubmit();
-                } },
-                React.createElement("div", { className: "ob-payment-form__westpac-quickstream-container" },
-                    !!appImageUrl && (React.createElement("figure", { className: "image is-128x128 has-margin-bottom-6 ml-auto mr-auto" },
-                        React.createElement("img", { alt: "Application Icon", className: "is-rounded", src: appImageUrl }))),
-                    !!title && (React.createElement("h3", { className: "title is-3 is-size-3-mobile ob-header__heading has-text-centered" }, title)),
-                    React.createElement("label", { className: "label ob-label has-text-centered" }, "Fill out the form below to complete your secure payment."),
-                    React.createElement("div", { className: "ob-payment-form__westpac-quickstream-amount" },
-                        React.createElement("div", null, "Amount"),
-                        React.createElement("div", { className: "ob-payment-form__westpac-quickstream-amount-value" }, localisationService.formatCurrency((_b = (_a = formSubmissionResult.payment) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0))),
-                    React.createElement("div", { "data-quickstream-api": "creditCardContainer", className: "quickstream-credit-card-container" }),
-                    !isLoading && !loadError && (React.createElement(React.Fragment, null,
-                        React.createElement(ReCAPTCHA, { ...recaptchaProps, className: "ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha" }),
-                        displayCaptchaRequired && (React.createElement(FormElementValidationMessage, { message: "Please complete the CAPTCHA successfully", className: "cypress-required" }))))),
-                !isLoading && !loadError && (React.createElement("div", { className: "ob-payment-form__westpac-quickstream-form-actions" },
-                    React.createElement("button", { type: "button", disabled: isCompletingTransaction || isCancellingTransaction, onClick: handleCancel, className: clsx('button ob-button is-outlined', {
-                            'is-loading': isCancellingTransaction,
-                        }) }, "Cancel"),
-                    React.createElement("button", { type: "submit", disabled: isCompletingTransaction || isCancellingTransaction, className: clsx('button ob-button is-success', {
-                            'is-loading': isCompletingTransaction,
-                        }) }, "Make Payment"))))),
-        React.createElement(Modal, { isOpen: !!completeTransactionError, title: "Payment Issue", className: "cypress-payment-error-close-button", actions: React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", className: "button ob-button cypress-payment-error-close-button is-primary", onClick: clearCompleteTransactionError, autoFocus: true }, "Okay")) },
-            React.createElement(React.Fragment, null,
-                React.createElement("div", null, completeTransactionError instanceof Error
-                    ? completeTransactionError.message
-                    : completeTransactionError),
-                completeTransactionError instanceof OneBlinkAppsError && (React.createElement(OneBlinkAppsErrorOriginalMessage, { error: completeTransactionError.originalError })))),
-        React.createElement(Modal, { isOpen: !!cancelError, title: "Cancel Issue", className: "cypress-cancel-error-close-button", actions: React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", className: "button ob-button cypress-cancel-error-close-button is-primary", onClick: clearCancelError, autoFocus: true }, "Okay")) },
-            React.createElement(React.Fragment, null,
-                React.createElement("div", null, cancelError instanceof Error ? cancelError.message : cancelError),
-                cancelError instanceof OneBlinkAppsError && (React.createElement(OneBlinkAppsErrorOriginalMessage, { error: cancelError.originalError }))))));
+    return (_jsxs(_Fragment, { children: [isLoading && (_jsx("section", { children: _jsxs("div", { className: "cypress-loading has-text-centered", children: [_jsx(OnLoading, { className: "has-text-centered" }), _jsx("span", { children: "Building payment form..." })] }) })), loadError && (_jsxs("section", { className: "cypress-payment-form-loading-error-message", children: [_jsx("div", { className: "ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8", children: _jsx(MaterialIcon, { className: "ob-payment-form__error-icon has-text-danger icon-x-large", children: "error" }) }), _jsx("p", { className: "ob-payment-form__error-message has-text-centered has-margin-bottom-4", children: loadError.message })] })), _jsx("section", { children: _jsxs("form", { onSubmit: (event) => {
+                        event.preventDefault();
+                        handleSubmit();
+                    }, children: [_jsxs("div", { className: "ob-payment-form__westpac-quickstream-container", children: [!!appImageUrl && (_jsx("figure", { className: "image is-128x128 has-margin-bottom-6 ml-auto mr-auto", children: _jsx("img", { alt: "Application Icon", className: "is-rounded", src: appImageUrl }) })), !!title && (_jsx("h3", { className: "title is-3 is-size-3-mobile ob-header__heading has-text-centered", children: title })), _jsx("label", { className: "label ob-label has-text-centered", children: "Fill out the form below to complete your secure payment." }), _jsxs("div", { className: "ob-payment-form__westpac-quickstream-amount", children: [_jsx("div", { children: "Amount" }), _jsx("div", { className: "ob-payment-form__westpac-quickstream-amount-value", children: localisationService.formatCurrency((_b = (_a = formSubmissionResult.payment) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0) })] }), _jsx("div", { "data-quickstream-api": "creditCardContainer", className: "quickstream-credit-card-container" }), !isLoading && !loadError && (_jsxs(_Fragment, { children: [_jsx(ReCAPTCHA, { ...recaptchaProps, className: "ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha" }), displayCaptchaRequired && (_jsx(FormElementValidationMessage, { message: "Please complete the CAPTCHA successfully", className: "cypress-required" }))] }))] }), !isLoading && !loadError && (_jsxs("div", { className: "ob-payment-form__westpac-quickstream-form-actions", children: [_jsx("button", { type: "button", disabled: isCompletingTransaction || isCancellingTransaction, onClick: handleCancel, className: clsx('button ob-button is-outlined', {
+                                        'is-loading': isCancellingTransaction,
+                                    }), children: "Cancel" }), _jsx("button", { type: "submit", disabled: isCompletingTransaction || isCancellingTransaction, className: clsx('button ob-button is-success', {
+                                        'is-loading': isCompletingTransaction,
+                                    }), children: "Make Payment" })] }))] }) }), _jsx(Modal, { isOpen: !!completeTransactionError, title: "Payment Issue", className: "cypress-payment-error-close-button", actions: _jsx(_Fragment, { children: _jsx("button", { type: "button", className: "button ob-button cypress-payment-error-close-button is-primary", onClick: clearCompleteTransactionError, autoFocus: true, children: "Okay" }) }), children: _jsxs(_Fragment, { children: [_jsx("div", { children: completeTransactionError instanceof Error
+                                ? completeTransactionError.message
+                                : completeTransactionError }), completeTransactionError instanceof OneBlinkAppsError && (_jsx(OneBlinkAppsErrorOriginalMessage, { error: completeTransactionError.originalError }))] }) }), _jsx(Modal, { isOpen: !!cancelError, title: "Cancel Issue", className: "cypress-cancel-error-close-button", actions: _jsx(_Fragment, { children: _jsx("button", { type: "button", className: "button ob-button cypress-cancel-error-close-button is-primary", onClick: clearCancelError, autoFocus: true, children: "Okay" }) }), children: _jsxs(_Fragment, { children: [_jsx("div", { children: cancelError instanceof Error ? cancelError.message : cancelError }), cancelError instanceof OneBlinkAppsError && (_jsx(OneBlinkAppsErrorOriginalMessage, { error: cancelError.originalError }))] }) })] }));
 }
 export default React.memo(WestpacQuickStreamPaymentForm);
 //# sourceMappingURL=WestpacQuickStreamPaymentForm.js.map

package/dist/components/payments/WestpacQuickStreamPaymentForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WestpacQuickStreamPaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/WestpacQuickStreamPaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n OneBlinkAppsError,\n paymentService,\n submissionService,\n localisationService,\n} from '@oneblink/apps'\nimport { SubmissionTypes, SubmissionEventTypes } from '@oneblink/types'\nimport clsx from 'clsx'\nimport React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\nimport * as bulmaToast from 'bulma-toast'\nimport OnLoading from '../renderer/OnLoading'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport Modal from '../renderer/Modal'\nimport MaterialIcon from '../MaterialIcon'\nimport useReCAPTCHAProps from '../../hooks/useReCAPTCHAProps'\nimport { CaptchaType } from '../../typedoc'\nimport FormElementValidationMessage from '../renderer/FormElementValidationMessage'\n\ninterface TrustedFrame {\n submitForm(\n callback: (\n errors:\n \| Array<{\n fieldName: string\n messages: string[]\n }>\n \| undefined,\n data: {\n singleUseToken: {\n singleUseTokenId: string\n }\n },\n ) => void,\n ): void\n}\n\ndeclare global {\n interface Window {\n QuickstreamAPI: {\n init(options: { publishableApiKey: string }): void\n creditCards: {\n createTrustedFrame(\n options: unknown,\n callback: (\n errors:\n \| Array<{\n fieldName: string\n messages: string[]\n }>\n \| undefined,\n data: {\n trustedFrame: TrustedFrame\n },\n ) => void,\n ): void\n }\n }\n }\n}\nfunction WestpacQuickStreamPaymentForm({\n formSubmissionResult,\n paymentSubmissionEvent,\n formSubmissionPaymentId,\n supplierBusinessCode,\n publishableApiKey,\n isTestMode,\n captchaSiteKey,\n captchaType,\n onCompleted,\n onCancelled,\n appImageUrl,\n title,\n}: {\n formSubmissionResult: submissionService.FormSubmissionResult\n paymentSubmissionEvent: SubmissionEventTypes.WestpacQuickStreamSubmissionEvent\n formSubmissionPaymentId: string\n supplierBusinessCode: string\n publishableApiKey: string\n isTestMode: boolean\n captchaSiteKey: string\n captchaType?: CaptchaType\n onCompleted: (result: {\n formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n paymentReceiptUrl: string\n }) => void\n onCancelled: (result: { paymentReceiptUrl: string }) => void\n appImageUrl?: string\n title?: string\n}) {\n const [\n {\n isCompletingTransaction,\n completeTransactionError,\n captchaToken,\n displayCaptchaRequired,\n },\n setCompleteTransactionState,\n ] = React.useState<{\n captchaToken: string \| null\n displayCaptchaRequired: boolean\n isCompletingTransaction: boolean\n completeTransactionError: Error \| null\n }>({\n isCompletingTransaction: false,\n completeTransactionError: null,\n captchaToken: null,\n displayCaptchaRequired: false,\n })\n\n const captchaRef = React.useRef<ReCAPTCHA>(null)\n\n const clearCompleteTransactionError = React.useCallback(() => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: null,\n }))\n }, [])\n\n const [{ trustedFrame, isLoading, loadError }, setLoadState] =\n React.useState<{\n trustedFrame: TrustedFrame \| null\n isLoading: boolean\n loadError: Error \| null\n }>({\n trustedFrame: null,\n isLoading: true,\n loadError: null,\n })\n\n React.useEffect(() => {\n const abortController = new AbortController()\n const scriptEle = document.createElement('script')\n scriptEle.type = 'text/javascript'\n scriptEle.async = true\n\n const run = async () => {\n try {\n scriptEle.src = isTestMode\n ? 'https://api.quickstream.support.qvalent.com/rest/v1/quickstream-api-1.0.min.js'\n : 'https://api.quickstream.westpac.com.au/rest/v1/quickstream-api-1.0.min.js'\n\n await new Promise((resolve, reject) => {\n try {\n scriptEle.addEventListener(\n 'load',\n () => {\n resolve(undefined)\n },\n {\n signal: abortController.signal,\n },\n )\n\n scriptEle.addEventListener(\n 'error',\n () => {\n reject(new Error(`Failed to load the script ${scriptEle.src}`))\n },\n {\n signal: abortController.signal,\n },\n )\n\n document.body.appendChild(scriptEle)\n } catch (error) {\n console.warn('Failed to load script', error)\n reject(error)\n }\n })\n\n window.QuickstreamAPI.init({\n publishableApiKey,\n })\n const newTrustedFrame = await new Promise<TrustedFrame>(\n (resolve, reject) => {\n window.QuickstreamAPI.creditCards.createTrustedFrame(\n {\n config: {\n supplierBusinessCode,\n },\n iframe: {\n style: {\n width: '100%',\n },\n },\n showAcceptedCards: true,\n showRequiredIndicators: true,\n },\n (errors, data) => {\n if (errors) {\n reject(errors)\n return\n }\n resolve(data.trustedFrame)\n },\n )\n },\n )\n\n if (!abortController.signal.aborted) {\n setLoadState({\n trustedFrame: newTrustedFrame,\n isLoading: false,\n loadError: null,\n })\n }\n } catch (error) {\n if (!abortController.signal.aborted) {\n setLoadState({\n trustedFrame: null,\n isLoading: false,\n loadError: error as Error,\n })\n }\n }\n }\n\n run()\n\n return () => {\n abortController.abort()\n document.body.removeChild(scriptEle)\n }\n }, [isTestMode, publishableApiKey, supplierBusinessCode])\n\n const recaptchaType = React.useMemo(\n () => captchaType ?? 'CHECKBOX',\n [captchaType],\n )\n\n const hanedleCaptchaChange = React.useCallback((newValue: string \| null) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n captchaToken: newValue,\n displayCaptchaRequired: newValue === null,\n }))\n }, [])\n\n const recaptchaProps = useReCAPTCHAProps({\n captchaSiteKey,\n captchaRef,\n onCaptchaChange: hanedleCaptchaChange,\n captchaType: recaptchaType,\n })\n\n const getRecaptchaToken = React.useCallback(async () => {\n captchaRef.current?.reset()\n switch (captchaType) {\n case 'INVISIBLE': {\n const token = await captchaRef.current\n ?.executeAsync()\n .catch((error) => {\n console.log('Invisible captcha executeAsync failure', error)\n return null\n })\n if (!token) {\n console.log('Captcha token failure')\n bulmaToast.toast({\n message: 'Failed to get a captcha token',\n type: 'is-danger',\n extraClasses: 'ob-toast cypress-failed-captcha-token-creation',\n duration: 4000,\n pauseOnHover: true,\n closeOnClick: true,\n })\n }\n return {\n recaptchaToken: token ?? null,\n displayCaptchaRequired: false,\n }\n }\n case 'CHECKBOX':\n default:\n return { recaptchaToken: captchaToken, displayCaptchaRequired: true }\n }\n }, [captchaToken, captchaType])\n\n const handleSubmit = React.useCallback(async () => {\n if (!trustedFrame) {\n return\n }\n\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: true,\n completeTransactionError: null,\n }))\n\n trustedFrame.submitForm(async (errors, data) => {\n if (errors) {\n console.log('Invalid payment form submission', errors)\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: null,\n }))\n return\n }\n\n const { recaptchaToken, displayCaptchaRequired } =\n await getRecaptchaToken()\n\n if (!recaptchaToken) {\n setCompleteTransactionState({\n captchaToken: null,\n displayCaptchaRequired,\n isCompletingTransaction: false,\n completeTransactionError: null,\n })\n return\n }\n\n paymentService.westpacQuickStream\n .completeTransaction({\n singleUseTokenId: data.singleUseToken.singleUseTokenId,\n formSubmissionResult,\n formSubmissionPaymentId,\n paymentSubmissionEvent,\n captchaSiteKey,\n captchaToken: recaptchaToken,\n })\n .then(onCompleted)\n .catch((error) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: error,\n }))\n })\n })\n }, [\n trustedFrame,\n getRecaptchaToken,\n formSubmissionResult,\n formSubmissionPaymentId,\n paymentSubmissionEvent,\n captchaSiteKey,\n onCompleted,\n ])\n\n const [{ isCancellingTransaction, cancelError }, setCancelState] =\n React.useState<{\n isCancellingTransaction: boolean\n cancelError: Error \| null\n }>({\n isCancellingTransaction: false,\n cancelError: null,\n })\n\n const clearCancelError = React.useCallback(() => {\n setCancelState({\n isCancellingTransaction: false,\n cancelError: null,\n })\n }, [])\n\n const handleCancel = React.useCallback(async () => {\n setCancelState({\n isCancellingTransaction: true,\n cancelError: null,\n })\n try {\n const result = await paymentService.westpacQuickStream.cancelPayment({\n formSubmissionPaymentId,\n formSubmissionResult,\n })\n onCancelled(result)\n } catch (error) {\n console.warn('Failed to cancel payment', error)\n setCancelState({\n isCancellingTransaction: false,\n cancelError: error as Error,\n })\n }\n }, [formSubmissionPaymentId, formSubmissionResult, onCancelled])\n\n return (\n <>\n {isLoading && (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Building payment form...</span>\n </div>\n </section>\n )}\n\n {loadError && (\n <section className=\"cypress-payment-form-loading-error-message\">\n <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n error\n </MaterialIcon>\n </div>\n <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n {loadError.message}\n </p>\n </section>\n )}\n\n <section>\n <form\n onSubmit={(event) => {\n event.preventDefault()\n handleSubmit()\n }}\n >\n <div className=\"ob-payment-form__westpac-quickstream-container\">\n {!!appImageUrl && (\n <figure className=\"image is-128x128 has-margin-bottom-6 ml-auto mr-auto\">\n <img\n alt=\"Application Icon\"\n className=\"is-rounded\"\n src={appImageUrl}\n />\n </figure>\n )}\n {!!title && (\n <h3 className=\"title is-3 is-size-3-mobile ob-header__heading has-text-centered\">\n {title}\n </h3>\n )}\n <label className=\"label ob-label has-text-centered\">\n Fill out the form below to complete your secure payment.\n </label>\n\n <div className=\"ob-payment-form__westpac-quickstream-amount\">\n <div>Amount</div>\n <div className=\"ob-payment-form__westpac-quickstream-amount-value\">\n {localisationService.formatCurrency(\n formSubmissionResult.payment?.amount ?? 0,\n )}\n </div>\n </div>\n <div\n data-quickstream-api=\"creditCardContainer\"\n className=\"quickstream-credit-card-container\"\n ></div>\n {!isLoading && !loadError && (\n <>\n <ReCAPTCHA\n {...recaptchaProps}\n className=\"ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha\"\n />\n {displayCaptchaRequired && (\n <FormElementValidationMessage\n message=\"Please complete the CAPTCHA successfully\"\n className=\"cypress-required\"\n />\n )}\n </>\n )}\n </div>\n {!isLoading && !loadError && (\n <div className=\"ob-payment-form__westpac-quickstream-form-actions\">\n <button\n type=\"button\"\n disabled={isCompletingTransaction \|\| isCancellingTransaction}\n onClick={handleCancel}\n className={clsx('button ob-button is-outlined', {\n 'is-loading': isCancellingTransaction,\n })}\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={isCompletingTransaction \|\| isCancellingTransaction}\n className={clsx('button ob-button is-success', {\n 'is-loading': isCompletingTransaction,\n })}\n >\n Make Payment\n </button>\n </div>\n )}\n </form>\n </section>\n\n <Modal\n isOpen={!!completeTransactionError}\n title=\"Payment Issue\"\n className=\"cypress-payment-error-close-button\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button cypress-payment-error-close-button is-primary\"\n onClick={clearCompleteTransactionError}\n autoFocus\n >\n Okay\n </button>\n </>\n }\n >\n <>\n <div>\n {completeTransactionError instanceof Error\n ? completeTransactionError.message\n : completeTransactionError}\n </div>\n {completeTransactionError instanceof OneBlinkAppsError && (\n <OneBlinkAppsErrorOriginalMessage\n error={completeTransactionError.originalError}\n />\n )}\n </>\n </Modal>\n\n <Modal\n isOpen={!!cancelError}\n title=\"Cancel Issue\"\n className=\"cypress-cancel-error-close-button\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button cypress-cancel-error-close-button is-primary\"\n onClick={clearCancelError}\n autoFocus\n >\n Okay\n </button>\n </>\n }\n >\n <>\n <div>\n {cancelError instanceof Error ? cancelError.message : cancelError}\n </div>\n {cancelError instanceof OneBlinkAppsError && (\n <OneBlinkAppsErrorOriginalMessage\n error={cancelError.originalError}\n />\n )}\n </>\n </Modal>\n </>\n )\n}\n\nexport default React.memo(WestpacQuickStreamPaymentForm)\n"]}
1	+ {"version":3,"file":"WestpacQuickStreamPaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/WestpacQuickStreamPaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n OneBlinkAppsError,\n paymentService,\n submissionService,\n localisationService,\n} from '@oneblink/apps'\nimport { SubmissionTypes, SubmissionEventTypes } from '@oneblink/types'\nimport clsx from 'clsx'\nimport React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\nimport * as bulmaToast from 'bulma-toast'\nimport OnLoading from '../renderer/OnLoading'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport Modal from '../renderer/Modal'\nimport MaterialIcon from '../MaterialIcon'\nimport useReCAPTCHAProps from '../../hooks/useReCAPTCHAProps'\nimport { CaptchaType } from '../../typedoc'\nimport FormElementValidationMessage from '../renderer/FormElementValidationMessage'\n\ninterface TrustedFrame {\n submitForm(\n callback: (\n errors:\n \| Array<{\n fieldName: string\n messages: string[]\n }>\n \| undefined,\n data: {\n singleUseToken: {\n singleUseTokenId: string\n }\n },\n ) => void,\n ): void\n}\n\ndeclare global {\n interface Window {\n QuickstreamAPI: {\n init(options: { publishableApiKey: string }): void\n creditCards: {\n createTrustedFrame(\n options: unknown,\n callback: (\n errors:\n \| Array<{\n fieldName: string\n messages: string[]\n }>\n \| undefined,\n data: {\n trustedFrame: TrustedFrame\n },\n ) => void,\n ): void\n }\n }\n }\n}\nfunction WestpacQuickStreamPaymentForm({\n formSubmissionResult,\n paymentSubmissionEvent,\n formSubmissionPaymentId,\n supplierBusinessCode,\n publishableApiKey,\n isTestMode,\n captchaSiteKey,\n captchaType,\n onCompleted,\n onCancelled,\n appImageUrl,\n title,\n}: {\n formSubmissionResult: submissionService.FormSubmissionResult\n paymentSubmissionEvent: SubmissionEventTypes.WestpacQuickStreamSubmissionEvent\n formSubmissionPaymentId: string\n supplierBusinessCode: string\n publishableApiKey: string\n isTestMode: boolean\n captchaSiteKey: string\n captchaType?: CaptchaType\n onCompleted: (result: {\n formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n paymentReceiptUrl: string\n }) => void\n onCancelled: (result: { paymentReceiptUrl: string }) => void\n appImageUrl?: string\n title?: string\n}) {\n const [\n {\n isCompletingTransaction,\n completeTransactionError,\n captchaToken,\n displayCaptchaRequired,\n },\n setCompleteTransactionState,\n ] = React.useState<{\n captchaToken: string \| null\n displayCaptchaRequired: boolean\n isCompletingTransaction: boolean\n completeTransactionError: Error \| null\n }>({\n isCompletingTransaction: false,\n completeTransactionError: null,\n captchaToken: null,\n displayCaptchaRequired: false,\n })\n\n const captchaRef = React.useRef<ReCAPTCHA>(null)\n\n const clearCompleteTransactionError = React.useCallback(() => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: null,\n }))\n }, [])\n\n const [{ trustedFrame, isLoading, loadError }, setLoadState] =\n React.useState<{\n trustedFrame: TrustedFrame \| null\n isLoading: boolean\n loadError: Error \| null\n }>({\n trustedFrame: null,\n isLoading: true,\n loadError: null,\n })\n\n React.useEffect(() => {\n const abortController = new AbortController()\n const scriptEle = document.createElement('script')\n scriptEle.type = 'text/javascript'\n scriptEle.async = true\n\n const run = async () => {\n try {\n scriptEle.src = isTestMode\n ? 'https://api.quickstream.support.qvalent.com/rest/v1/quickstream-api-1.0.min.js'\n : 'https://api.quickstream.westpac.com.au/rest/v1/quickstream-api-1.0.min.js'\n\n await new Promise((resolve, reject) => {\n try {\n scriptEle.addEventListener(\n 'load',\n () => {\n resolve(undefined)\n },\n {\n signal: abortController.signal,\n },\n )\n\n scriptEle.addEventListener(\n 'error',\n () => {\n reject(new Error(`Failed to load the script ${scriptEle.src}`))\n },\n {\n signal: abortController.signal,\n },\n )\n\n document.body.appendChild(scriptEle)\n } catch (error) {\n console.warn('Failed to load script', error)\n reject(error)\n }\n })\n\n window.QuickstreamAPI.init({\n publishableApiKey,\n })\n const newTrustedFrame = await new Promise<TrustedFrame>(\n (resolve, reject) => {\n window.QuickstreamAPI.creditCards.createTrustedFrame(\n {\n config: {\n supplierBusinessCode,\n },\n iframe: {\n style: {\n width: '100%',\n },\n },\n showAcceptedCards: true,\n showRequiredIndicators: true,\n },\n (errors, data) => {\n if (errors) {\n reject(errors)\n return\n }\n resolve(data.trustedFrame)\n },\n )\n },\n )\n\n if (!abortController.signal.aborted) {\n setLoadState({\n trustedFrame: newTrustedFrame,\n isLoading: false,\n loadError: null,\n })\n }\n } catch (error) {\n if (!abortController.signal.aborted) {\n setLoadState({\n trustedFrame: null,\n isLoading: false,\n loadError: error as Error,\n })\n }\n }\n }\n\n run()\n\n return () => {\n abortController.abort()\n document.body.removeChild(scriptEle)\n }\n }, [isTestMode, publishableApiKey, supplierBusinessCode])\n\n const recaptchaType = React.useMemo(\n () => captchaType ?? 'CHECKBOX',\n [captchaType],\n )\n\n const hanedleCaptchaChange = React.useCallback((newValue: string \| null) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n captchaToken: newValue,\n displayCaptchaRequired: newValue === null,\n }))\n }, [])\n\n const recaptchaProps = useReCAPTCHAProps({\n captchaSiteKey,\n captchaRef,\n onCaptchaChange: hanedleCaptchaChange,\n captchaType: recaptchaType,\n })\n\n const getRecaptchaToken = React.useCallback(async () => {\n captchaRef.current?.reset()\n switch (captchaType) {\n case 'INVISIBLE': {\n const token = await captchaRef.current\n ?.executeAsync()\n .catch((error) => {\n console.log('Invisible captcha executeAsync failure', error)\n return null\n })\n if (!token) {\n console.log('Captcha token failure')\n bulmaToast.toast({\n message: 'Failed to get a captcha token',\n type: 'is-danger',\n extraClasses: 'ob-toast cypress-failed-captcha-token-creation',\n duration: 4000,\n pauseOnHover: true,\n closeOnClick: true,\n })\n }\n return {\n recaptchaToken: token ?? null,\n displayCaptchaRequired: false,\n }\n }\n case 'CHECKBOX':\n default:\n return { recaptchaToken: captchaToken, displayCaptchaRequired: true }\n }\n }, [captchaToken, captchaType])\n\n const handleSubmit = React.useCallback(async () => {\n if (!trustedFrame) {\n return\n }\n\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: true,\n completeTransactionError: null,\n }))\n\n trustedFrame.submitForm(async (errors, data) => {\n if (errors) {\n console.log('Invalid payment form submission', errors)\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: null,\n }))\n return\n }\n\n const { recaptchaToken, displayCaptchaRequired } =\n await getRecaptchaToken()\n\n if (!recaptchaToken) {\n setCompleteTransactionState({\n captchaToken: null,\n displayCaptchaRequired,\n isCompletingTransaction: false,\n completeTransactionError: null,\n })\n return\n }\n\n paymentService.westpacQuickStream\n .completeTransaction({\n singleUseTokenId: data.singleUseToken.singleUseTokenId,\n formSubmissionResult,\n formSubmissionPaymentId,\n paymentSubmissionEvent,\n captchaSiteKey,\n captchaToken: recaptchaToken,\n })\n .then(onCompleted)\n .catch((error) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: error,\n }))\n })\n })\n }, [\n trustedFrame,\n getRecaptchaToken,\n formSubmissionResult,\n formSubmissionPaymentId,\n paymentSubmissionEvent,\n captchaSiteKey,\n onCompleted,\n ])\n\n const [{ isCancellingTransaction, cancelError }, setCancelState] =\n React.useState<{\n isCancellingTransaction: boolean\n cancelError: Error \| null\n }>({\n isCancellingTransaction: false,\n cancelError: null,\n })\n\n const clearCancelError = React.useCallback(() => {\n setCancelState({\n isCancellingTransaction: false,\n cancelError: null,\n })\n }, [])\n\n const handleCancel = React.useCallback(async () => {\n setCancelState({\n isCancellingTransaction: true,\n cancelError: null,\n })\n try {\n const result = await paymentService.westpacQuickStream.cancelPayment({\n formSubmissionPaymentId,\n formSubmissionResult,\n })\n onCancelled(result)\n } catch (error) {\n console.warn('Failed to cancel payment', error)\n setCancelState({\n isCancellingTransaction: false,\n cancelError: error as Error,\n })\n }\n }, [formSubmissionPaymentId, formSubmissionResult, onCancelled])\n\n return (\n <>\n {isLoading && (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Building payment form...</span>\n </div>\n </section>\n )}\n\n {loadError && (\n <section className=\"cypress-payment-form-loading-error-message\">\n <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n error\n </MaterialIcon>\n </div>\n <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n {loadError.message}\n </p>\n </section>\n )}\n\n <section>\n <form\n onSubmit={(event) => {\n event.preventDefault()\n handleSubmit()\n }}\n >\n <div className=\"ob-payment-form__westpac-quickstream-container\">\n {!!appImageUrl && (\n <figure className=\"image is-128x128 has-margin-bottom-6 ml-auto mr-auto\">\n <img\n alt=\"Application Icon\"\n className=\"is-rounded\"\n src={appImageUrl}\n />\n </figure>\n )}\n {!!title && (\n <h3 className=\"title is-3 is-size-3-mobile ob-header__heading has-text-centered\">\n {title}\n </h3>\n )}\n <label className=\"label ob-label has-text-centered\">\n Fill out the form below to complete your secure payment.\n </label>\n\n <div className=\"ob-payment-form__westpac-quickstream-amount\">\n <div>Amount</div>\n <div className=\"ob-payment-form__westpac-quickstream-amount-value\">\n {localisationService.formatCurrency(\n formSubmissionResult.payment?.amount ?? 0,\n )}\n </div>\n </div>\n <div\n data-quickstream-api=\"creditCardContainer\"\n className=\"quickstream-credit-card-container\"\n ></div>\n {!isLoading && !loadError && (\n <>\n <ReCAPTCHA\n {...recaptchaProps}\n className=\"ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha\"\n />\n {displayCaptchaRequired && (\n <FormElementValidationMessage\n message=\"Please complete the CAPTCHA successfully\"\n className=\"cypress-required\"\n />\n )}\n </>\n )}\n </div>\n {!isLoading && !loadError && (\n <div className=\"ob-payment-form__westpac-quickstream-form-actions\">\n <button\n type=\"button\"\n disabled={isCompletingTransaction \|\| isCancellingTransaction}\n onClick={handleCancel}\n className={clsx('button ob-button is-outlined', {\n 'is-loading': isCancellingTransaction,\n })}\n >\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={isCompletingTransaction \|\| isCancellingTransaction}\n className={clsx('button ob-button is-success', {\n 'is-loading': isCompletingTransaction,\n })}\n >\n Make Payment\n </button>\n </div>\n )}\n </form>\n </section>\n\n <Modal\n isOpen={!!completeTransactionError}\n title=\"Payment Issue\"\n className=\"cypress-payment-error-close-button\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button cypress-payment-error-close-button is-primary\"\n onClick={clearCompleteTransactionError}\n autoFocus\n >\n Okay\n </button>\n </>\n }\n >\n <>\n <div>\n {completeTransactionError instanceof Error\n ? completeTransactionError.message\n : completeTransactionError}\n </div>\n {completeTransactionError instanceof OneBlinkAppsError && (\n <OneBlinkAppsErrorOriginalMessage\n error={completeTransactionError.originalError}\n />\n )}\n </>\n </Modal>\n\n <Modal\n isOpen={!!cancelError}\n title=\"Cancel Issue\"\n className=\"cypress-cancel-error-close-button\"\n actions={\n <>\n <button\n type=\"button\"\n className=\"button ob-button cypress-cancel-error-close-button is-primary\"\n onClick={clearCancelError}\n autoFocus\n >\n Okay\n </button>\n </>\n }\n >\n <>\n <div>\n {cancelError instanceof Error ? cancelError.message : cancelError}\n </div>\n {cancelError instanceof OneBlinkAppsError && (\n <OneBlinkAppsErrorOriginalMessage\n error={cancelError.originalError}\n />\n )}\n </>\n </Modal>\n </>\n )\n}\n\nexport default React.memo(WestpacQuickStreamPaymentForm)\n"]}

package/dist/components/receipts/Receipt.d.ts CHANGED Viewed

@@ -4,6 +4,6 @@ type Props = {
     containerClassName: string;
     children: React.ReactNode;
 };
-declare function Receipt({ className, containerClassName, children }: Props): React.JSX.Element;
+declare function Receipt({ className, containerClassName, children }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Receipt>;
 export default _default;

package/dist/components/receipts/Receipt.js CHANGED Viewed

@@ -1,8 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 function Receipt({ className, containerClassName, children }) {
-    return (React.createElement("section", { className: clsx('ob-receipt', className) },
-        React.createElement("div", { className: clsx('ob-receipt__container', containerClassName) }, children)));
+    return (_jsx("section", { className: clsx('ob-receipt', className), children: _jsx("div", { className: clsx('ob-receipt__container', containerClassName), children: children }) }));
 }
 export default React.memo(Receipt);
 //# sourceMappingURL=Receipt.js.map

package/dist/components/receipts/Receipt.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Receipt.js","sourceRoot":"","sources":["../../../src/components/receipts/Receipt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAQvB,SAAS,OAAO,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAS;IACjE,OAAO,CACL,~~iCAAS~~,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC~~;QAC~~/C,~~6BAAK~~,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,~~IAC9D~~,QAAQ,~~CACL~~,~~CACE~~,CACX,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n className: string\n containerClassName: string\n children: React.ReactNode\n}\n\nfunction Receipt({ className, containerClassName, children }: Props) {\n return (\n <section className={clsx('ob-receipt', className)}>\n <div className={clsx('ob-receipt__container', containerClassName)}>\n {children}\n </div>\n </section>\n )\n}\n\nexport default React.memo(Receipt)\n"]}
1	+ {"version":3,"file":"Receipt.js","sourceRoot":"","sources":["../../../src/components/receipts/Receipt.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAQvB,SAAS,OAAO,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAS;IACjE,OAAO,CACL,kBAAS,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,YAC/C,cAAK,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,YAC9D,QAAQ,GACL,GACE,CACX,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n className: string\n containerClassName: string\n children: React.ReactNode\n}\n\nfunction Receipt({ className, containerClassName, children }: Props) {\n return (\n <section className={clsx('ob-receipt', className)}>\n <div className={clsx('ob-receipt__container', containerClassName)}>\n {children}\n </div>\n </section>\n )\n}\n\nexport default React.memo(Receipt)\n"]}

package/dist/components/receipts/ReceiptButton.d.ts CHANGED Viewed

@@ -6,6 +6,6 @@ type Props = {
     isLoading?: boolean;
     onClick: () => unknown;
 };
-declare function ReceiptButton({ className, label, isDisabled, isLoading, onClick, }: Props): React.JSX.Element;
+declare function ReceiptButton({ className, label, isDisabled, isLoading, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ReceiptButton>;
 export default _default;

package/dist/components/receipts/ReceiptButton.js CHANGED Viewed

@@ -1,9 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 function ReceiptButton({ className, label, isDisabled, isLoading, onClick, }) {
-    return (React.createElement("button", { type: "button", className: clsx('button ob-button ob-receipt__button', className, {
+    return (_jsx("button", { type: "button", className: clsx('button ob-button ob-receipt__button', className, {
             'is-loading': isLoading,
-        }), disabled: isLoading || isDisabled, onClick: onClick }, label));
+        }), disabled: isLoading || isDisabled, onClick: onClick, children: label }));
 }
 export default React.memo(ReceiptButton);
 //# sourceMappingURL=ReceiptButton.js.map