@oneblink/apps-react 5.12.0-beta.9 → 5.12.0
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.
- package/dist/OneBlinkFormBase.js +9 -8
- package/dist/OneBlinkFormBase.js.map +1 -1
- package/dist/PaymentReceipt.js +2 -1
- package/dist/PaymentReceipt.js.map +1 -1
- package/dist/components/ArcGISWebMap.js +2 -1
- package/dist/components/ArcGISWebMap.js.map +1 -1
- package/dist/components/CopyToClipboardIconButton.js +2 -2
- package/dist/components/CopyToClipboardIconButton.js.map +1 -1
- package/dist/components/CustomAccordion.d.ts +1 -1
- package/dist/components/ErrorSnackbar.js +6 -8
- package/dist/components/ErrorSnackbar.js.map +1 -1
- package/dist/components/Lists.d.ts +1 -1
- package/dist/components/MaterialIcon.d.ts +3 -0
- package/dist/components/MaterialIcon.js +7 -0
- package/dist/components/MaterialIcon.js.map +1 -0
- package/dist/components/formStore/FormStoreTableProvider.js +3 -3
- package/dist/components/formStore/FormStoreTableProvider.js.map +1 -1
- package/dist/components/formStore/OneBlinkFormStoreClearFiltersButton.js +2 -2
- package/dist/components/formStore/OneBlinkFormStoreClearFiltersButton.js.map +1 -1
- package/dist/components/formStore/OneBlinkFormStoreColumnsButton.js +3 -3
- package/dist/components/formStore/OneBlinkFormStoreColumnsButton.js.map +1 -1
- package/dist/components/formStore/OneBlinkFormStoreDownloadButton.js +3 -3
- package/dist/components/formStore/OneBlinkFormStoreDownloadButton.js.map +1 -1
- package/dist/components/formStore/OneBlinkFormStoreRefreshButton.js +2 -2
- package/dist/components/formStore/OneBlinkFormStoreRefreshButton.js.map +1 -1
- package/dist/components/formStore/OneBlinkFormStoreTable.js +4 -4
- package/dist/components/formStore/OneBlinkFormStoreTable.js.map +1 -1
- package/dist/components/formStore/display/ElementDisplay.js +2 -2
- package/dist/components/formStore/display/ElementDisplay.js.map +1 -1
- package/dist/components/formStore/display/FormStoreIcon.d.ts +3 -2
- package/dist/components/formStore/display/FormStoreIcon.js +5 -2
- package/dist/components/formStore/display/FormStoreIcon.js.map +1 -1
- package/dist/components/formStore/table/ActionedByTableCell.js +4 -4
- package/dist/components/formStore/table/ActionedByTableCell.js.map +1 -1
- package/dist/components/formStore/table/HeaderCellMoreButton.js +5 -6
- package/dist/components/formStore/table/HeaderCellMoreButton.js.map +1 -1
- package/dist/components/formStore/table/RepeatableSetCellAccordion.js +2 -2
- package/dist/components/formStore/table/RepeatableSetCellAccordion.js.map +1 -1
- package/dist/components/messages/ErrorMessage.js +3 -5
- package/dist/components/messages/ErrorMessage.js.map +1 -1
- package/dist/components/messages/LargeIconMessage.d.ts +6 -4
- package/dist/components/messages/LargeIconMessage.js +1 -1
- package/dist/components/messages/LargeIconMessage.js.map +1 -1
- package/dist/components/payments/PaymentForm.js +2 -1
- package/dist/components/payments/PaymentForm.js.map +1 -1
- package/dist/components/payments/WestpacQuickStreamPaymentForm.js +2 -1
- package/dist/components/payments/WestpacQuickStreamPaymentForm.js.map +1 -1
- package/dist/components/receipts/ReceiptList.js +3 -2
- package/dist/components/receipts/ReceiptList.js.map +1 -1
- package/dist/components/receipts/ReceiptListItem.js +3 -2
- package/dist/components/receipts/ReceiptListItem.js.map +1 -1
- package/dist/components/renderer/AutocompleteDropdown.js +3 -2
- package/dist/components/renderer/AutocompleteDropdown.js.map +1 -1
- package/dist/components/renderer/CopyToClipboardButton.js +2 -1
- package/dist/components/renderer/CopyToClipboardButton.js.map +1 -1
- package/dist/components/renderer/CustomisableButtonInner.js +2 -1
- package/dist/components/renderer/CustomisableButtonInner.js.map +1 -1
- package/dist/components/renderer/FormElementLabelContainer.js +2 -1
- package/dist/components/renderer/FormElementLabelContainer.js.map +1 -1
- package/dist/components/renderer/LookupButton.js +2 -1
- package/dist/components/renderer/LookupButton.js.map +1 -1
- package/dist/components/renderer/LookupNotification.js +4 -3
- package/dist/components/renderer/LookupNotification.js.map +1 -1
- package/dist/components/renderer/attachments/AttachmentStatus.js +5 -4
- package/dist/components/renderer/attachments/AttachmentStatus.js.map +1 -1
- package/dist/components/renderer/attachments/DropdownMenu.js +2 -1
- package/dist/components/renderer/attachments/DropdownMenu.js.map +1 -1
- package/dist/components/renderer/attachments/FileCardContent.js +2 -1
- package/dist/components/renderer/attachments/FileCardContent.js.map +1 -1
- package/dist/components/renderer/attachments/ImagePreviewUnavailable.js +3 -2
- package/dist/components/renderer/attachments/ImagePreviewUnavailable.js.map +1 -1
- package/dist/form-elements/ComplianceButton.js +2 -1
- package/dist/form-elements/ComplianceButton.js.map +1 -1
- package/dist/form-elements/FormElementBarcodeScanner.js +2 -1
- package/dist/form-elements/FormElementBarcodeScanner.js.map +1 -1
- package/dist/form-elements/FormElementCalculation.js +2 -1
- package/dist/form-elements/FormElementCalculation.js.map +1 -1
- package/dist/form-elements/FormElementCamera.js +3 -2
- package/dist/form-elements/FormElementCamera.js.map +1 -1
- package/dist/form-elements/FormElementDate.js +2 -1
- package/dist/form-elements/FormElementDate.js.map +1 -1
- package/dist/form-elements/FormElementDateTime.js +2 -1
- package/dist/form-elements/FormElementDateTime.js.map +1 -1
- package/dist/form-elements/FormElementEmail.js +2 -1
- package/dist/form-elements/FormElementEmail.js.map +1 -1
- package/dist/form-elements/FormElementFiles.js +2 -1
- package/dist/form-elements/FormElementFiles.js.map +1 -1
- package/dist/form-elements/FormElementFreshdeskDependentField.js.map +1 -1
- package/dist/form-elements/FormElementNumber.js +2 -1
- package/dist/form-elements/FormElementNumber.js.map +1 -1
- package/dist/form-elements/FormElementRepeatableSet.js +5 -4
- package/dist/form-elements/FormElementRepeatableSet.js.map +1 -1
- package/dist/form-elements/FormElementSection.js +3 -2
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/form-elements/FormElementTelephone.js +2 -1
- package/dist/form-elements/FormElementTelephone.js.map +1 -1
- package/dist/form-elements/FormElementTime.js +2 -1
- package/dist/form-elements/FormElementTime.js.map +1 -1
- package/dist/hooks/useDynamicOptionsLoaderState.d.ts +1 -1
- package/dist/hooks/useDynamicOptionsLoaderState.js +2 -1
- package/dist/hooks/useDynamicOptionsLoaderState.js.map +1 -1
- package/dist/hooks/useFormSubmissionState.d.ts +1 -1
- package/dist/hooks/useFormSubmissionState.js.map +1 -1
- package/dist/styles/icons.scss +13 -11
- package/dist/styles.css +4 -7
- package/dist/types/mui-color.d.ts +4 -0
- package/dist/types/mui-color.js +2 -0
- package/dist/types/mui-color.js.map +1 -0
- package/package.json +2 -3
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { saveAs } from 'file-saver';
|
3
3
|
import { Chip, CircularProgress, Grid } from '@mui/material';
|
4
|
-
import { SaveAlt, AttachFile } from '@mui/icons-material';
|
5
4
|
import ErrorSnackbar from '../../ErrorSnackbar';
|
6
5
|
import { UnorderedList, ListItem } from '../../Lists';
|
7
6
|
import { getCognitoIdToken } from '@oneblink/apps/dist/services/cognito';
|
7
|
+
import MaterialIcon from '../../MaterialIcon';
|
8
8
|
async function fetchFile(url) {
|
9
9
|
const idToken = await getCognitoIdToken();
|
10
10
|
const response = await fetch(url, {
|
@@ -50,7 +50,7 @@ export function FileChip({ file: { fileName, url, data }, }) {
|
|
50
50
|
}
|
51
51
|
}, [data, fileName, url]);
|
52
52
|
return (React.createElement(React.Fragment, null,
|
53
|
-
React.createElement(Chip, { label: fileName, deleteIcon: React.createElement(
|
53
|
+
React.createElement(Chip, { label: fileName, deleteIcon: React.createElement(MaterialIcon, null, "save_alt"), onDelete: handleDownload, variant: "outlined", icon: isDownloading ? (React.createElement(CircularProgress, { size: 16 })) : (React.createElement(MaterialIcon, null, "attach_file")) }),
|
54
54
|
React.createElement(ErrorSnackbar, { open: !!error, onClose: clearError },
|
55
55
|
React.createElement("span", { "data-cypress": "download-legacy-file-error-message" }, error && error.message))));
|
56
56
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ElementDisplay.js","sourceRoot":"","sources":["../../../../src/components/formStore/display/ElementDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,
|
1
|
+
{"version":3,"file":"ElementDisplay.js","sourceRoot":"","sources":["../../../../src/components/formStore/display/ElementDisplay.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { saveAs } from 'file-saver'\nimport { Chip, CircularProgress, Grid } from '@mui/material'\nimport ErrorSnackbar from '../../ErrorSnackbar'\nimport { UnorderedList, ListItem } from '../../Lists'\nimport { FormElementWithOptions } from '@oneblink/types/typescript/forms'\nimport { getCognitoIdToken } from '@oneblink/apps/dist/services/cognito'\nimport MaterialIcon from '../../MaterialIcon'\n\nasync function fetchFile(url: string) {\n const idToken = await getCognitoIdToken()\n const response = await fetch(url, {\n headers: {\n Authorization: `Bearer ${idToken}`,\n },\n })\n\n if (!response.ok) {\n throw new Error(\n `Unable to download file. HTTP Status Code: ${response.status}`,\n )\n }\n\n return await response.blob()\n}\n\nexport function FileChip({\n file: { fileName, url, data },\n}: {\n file: {\n fileName: string\n url?: string\n isPrivate?: boolean\n data?: string\n }\n}) {\n const [{ isDownloading, error }, setState] = React.useState<{\n error?: Error\n isDownloading: boolean\n }>({\n isDownloading: false,\n })\n const clearError = React.useCallback(() => {\n setState({\n isDownloading: false,\n })\n }, [])\n const handleDownload = React.useCallback(async () => {\n try {\n setState({\n isDownloading: true,\n })\n\n if (url) {\n const blob = await fetchFile(url)\n saveAs(blob, fileName)\n } else if (data) {\n saveAs(data, fileName)\n }\n\n setState({\n isDownloading: false,\n })\n } catch (error) {\n setState({\n isDownloading: false,\n error: error as Error,\n })\n }\n }, [data, fileName, url])\n return (\n <>\n <Chip\n label={fileName}\n deleteIcon={<MaterialIcon>save_alt</MaterialIcon>}\n onDelete={handleDownload}\n variant=\"outlined\"\n icon={\n isDownloading ? (\n <CircularProgress size={16} />\n ) : (\n <MaterialIcon>attach_file</MaterialIcon>\n )\n }\n />\n <ErrorSnackbar open={!!error} onClose={clearError}>\n <span data-cypress=\"download-legacy-file-error-message\">\n {error && error.message}\n </span>\n </ErrorSnackbar>\n </>\n )\n}\n\nexport function FilesElementDataTableCellContent({\n value,\n}: {\n value: Array<{\n fileName: string\n url?: string | undefined\n isPrivate?: boolean | undefined\n data?: string | undefined\n }>\n}) {\n return (\n <Grid container spacing={1}>\n {value.map((file, index) => {\n return (\n <Grid item key={index} xs={12}>\n <FileChip file={file} />\n </Grid>\n )\n })}\n </Grid>\n )\n}\n\nexport function MultiSelectFormElementTableCellContent({\n value,\n formElement,\n}: {\n value: string[]\n formElement: FormElementWithOptions\n}) {\n return (\n <UnorderedList disablePadding>\n {value.map((selection, index) => {\n const label = getSelectedOptionLabel(formElement, selection)\n return <ListItem key={index}>{label?.toString()}</ListItem>\n })}\n </UnorderedList>\n )\n}\n\nexport function getSelectedOptionLabel(\n formElement: FormElementWithOptions,\n value: string,\n) {\n const selectedOption = (formElement.options || []).find(\n (opt) => opt.value === value,\n )\n return selectedOption ? selectedOption.label : value\n}\n"]}
|
@@ -1,2 +1,3 @@
|
|
1
|
-
import
|
2
|
-
|
1
|
+
import * as React from 'react';
|
2
|
+
import MaterialIcon from '../../MaterialIcon';
|
3
|
+
export default function Work(props: Omit<React.ComponentProps<typeof MaterialIcon>, 'children'>): React.JSX.Element;
|
@@ -1,3 +1,6 @@
|
|
1
|
-
import
|
2
|
-
|
1
|
+
import * as React from 'react';
|
2
|
+
import MaterialIcon from '../../MaterialIcon';
|
3
|
+
export default function Work(props) {
|
4
|
+
return React.createElement(MaterialIcon, { ...props }, "work");
|
5
|
+
}
|
3
6
|
//# sourceMappingURL=FormStoreIcon.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormStoreIcon.js","sourceRoot":"","sources":["../../../../src/components/formStore/display/FormStoreIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"FormStoreIcon.js","sourceRoot":"","sources":["../../../../src/components/formStore/display/FormStoreIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,oBAAoB,CAAA;AAC7C,MAAM,CAAC,OAAO,UAAU,IAAI,CAC1B,KAAkE;IAElE,OAAO,oBAAC,YAAY,OAAK,KAAK,WAAqB,CAAA;AACrD,CAAC","sourcesContent":["import * as React from 'react'\nimport MaterialIcon from '../../MaterialIcon'\nexport default function Work(\n props: Omit<React.ComponentProps<typeof MaterialIcon>, 'children'>,\n) {\n return <MaterialIcon {...props}>work</MaterialIcon>\n}\n"]}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { userService } from '@oneblink/sdk-core';
|
3
3
|
import { Chip, Avatar } from '@mui/material';
|
4
|
-
import { AccountCircle, VpnKey as KeyIcon, Help as HelpIcon, } from '@mui/icons-material';
|
5
4
|
import TableCellCopyButton from './TableCellCopyButton';
|
5
|
+
import MaterialIcon from '../../MaterialIcon';
|
6
6
|
function ActionedByTableCell({ userProfile, developerKey, ...rest }) {
|
7
7
|
const chipProps = useActionedByChipProps({
|
8
8
|
userProfile,
|
@@ -24,19 +24,19 @@ function useActionedByChipProps({ userProfile, developerKey, }) {
|
|
24
24
|
emptyChipProps.avatar = (React.createElement(Avatar, { alt: userProfile.fullName, src: userProfile.picture }));
|
25
25
|
}
|
26
26
|
else {
|
27
|
-
emptyChipProps.icon = React.createElement(
|
27
|
+
emptyChipProps.icon = React.createElement(MaterialIcon, null, "account_circle");
|
28
28
|
}
|
29
29
|
emptyChipProps.label = userService.getUserFriendlyName(userProfile);
|
30
30
|
return emptyChipProps;
|
31
31
|
}
|
32
32
|
if (developerKey) {
|
33
33
|
return {
|
34
|
-
icon: React.createElement(
|
34
|
+
icon: React.createElement(MaterialIcon, null, "vpn_key"),
|
35
35
|
label: developerKey.name,
|
36
36
|
};
|
37
37
|
}
|
38
38
|
return {
|
39
|
-
icon: React.createElement(
|
39
|
+
icon: React.createElement(MaterialIcon, null, "help"),
|
40
40
|
label: 'Anonymous',
|
41
41
|
};
|
42
42
|
}, [developerKey, userProfile]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ActionedByTableCell.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ActionedByTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,
|
1
|
+
{"version":3,"file":"ActionedByTableCell.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ActionedByTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,YAAY,MAAM,oBAAoB,CAAA;AAE7C,SAAS,mBAAmB,CAAC,EAC3B,WAAW,EACX,YAAY,EACZ,GAAG,IAAI,EAIR;IACC,MAAM,SAAS,GAAG,sBAAsB,CAAC;QACvC,WAAW;QACX,YAAY;QACZ,GAAG,IAAI;KACR,CAAC,CAAA;IAEF,OAAO,CACL;QACE,oBAAC,IAAI,OAAK,SAAS,KAAM,IAAI,GAAI;QACjC,oBAAC,mBAAmB,IAAC,IAAI,EAAE,SAAS,CAAC,KAAK,GAAI,CAC7C,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;AAE9C,SAAS,sBAAsB,CAAC,EAC9B,WAAW,EACX,YAAY,GAIb;IAKC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,WAAW,EAAE;YACf,MAAM,cAAc,GAIhB;gBACF,KAAK,EAAE,EAAE;aACV,CAAA;YAED,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,cAAc,CAAC,MAAM,GAAG,CACtB,oBAAC,MAAM,IAAC,GAAG,EAAE,WAAW,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAW,CAAC,OAAO,GAAI,CAChE,CAAA;aACF;iBAAM;gBACL,cAAc,CAAC,IAAI,GAAG,oBAAC,YAAY,yBAA8B,CAAA;aAClE;YAED,cAAc,CAAC,KAAK,GAAG,WAAW,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;YACnE,OAAO,cAAc,CAAA;SACtB;QAED,IAAI,YAAY,EAAE;YAChB,OAAO;gBACL,IAAI,EAAE,oBAAC,YAAY,kBAAuB;gBAC1C,KAAK,EAAE,YAAY,CAAC,IAAI;aACzB,CAAA;SACF;QAED,OAAO;YACL,IAAI,EAAE,oBAAC,YAAY,eAAoB;YACvC,KAAK,EAAE,WAAW;SACnB,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAA;AACjC,CAAC","sourcesContent":["import * as React from 'react'\nimport { userService } from '@oneblink/sdk-core'\nimport { UserProfile } from '@oneblink/types/typescript/misc'\nimport { Chip, Avatar } from '@mui/material'\nimport TableCellCopyButton from './TableCellCopyButton'\nimport MaterialIcon from '../../MaterialIcon'\n\nfunction ActionedByTableCell({\n userProfile,\n developerKey,\n ...rest\n}: React.ComponentProps<typeof Chip> & {\n userProfile?: UserProfile\n developerKey?: { name: string }\n}) {\n const chipProps = useActionedByChipProps({\n userProfile,\n developerKey,\n ...rest,\n })\n\n return (\n <>\n <Chip {...chipProps} {...rest} />\n <TableCellCopyButton text={chipProps.label} />\n </>\n )\n}\n\nexport default React.memo(ActionedByTableCell)\n\nfunction useActionedByChipProps({\n userProfile,\n developerKey,\n}: React.ComponentProps<typeof Chip> & {\n userProfile?: UserProfile\n developerKey?: { name: string }\n}): {\n label: string\n icon?: React.ComponentProps<typeof Chip>['icon']\n avatar?: React.ComponentProps<typeof Chip>['avatar']\n} {\n return React.useMemo(() => {\n if (userProfile) {\n const emptyChipProps: {\n label: string\n icon?: React.ComponentProps<typeof Chip>['icon']\n avatar?: React.ComponentProps<typeof Chip>['avatar']\n } = {\n label: '',\n }\n\n if (userProfile.picture) {\n emptyChipProps.avatar = (\n <Avatar alt={userProfile.fullName} src={userProfile.picture} />\n )\n } else {\n emptyChipProps.icon = <MaterialIcon>account_circle</MaterialIcon>\n }\n\n emptyChipProps.label = userService.getUserFriendlyName(userProfile)\n return emptyChipProps\n }\n\n if (developerKey) {\n return {\n icon: <MaterialIcon>vpn_key</MaterialIcon>,\n label: developerKey.name,\n }\n }\n\n return {\n icon: <MaterialIcon>help</MaterialIcon>,\n label: 'Anonymous',\n }\n }, [developerKey, userProfile])\n}\n"]}
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { Box, Button, Divider, Grid, IconButton, Popover, } from '@mui/material';
|
3
|
-
import
|
4
|
-
import { FilterList as FilterListIcon, MoreVert as MoreVertIcon, VisibilityOff as VisibilityOffIcon, } from '@mui/icons-material';
|
2
|
+
import { Box, Button, Divider, Grid, IconButton, Popover, styled, } from '@mui/material';
|
3
|
+
import MaterialIcon from '../../MaterialIcon';
|
5
4
|
import { useIsHovering } from '../../../hooks/useIsHovering';
|
6
5
|
import useNullableState from '../../../hooks/useNullableState';
|
7
6
|
import ColumnFilters from './ColumnFilters';
|
@@ -19,7 +18,7 @@ function HeaderCellMoreButton({ headerGroup, onHide, }) {
|
|
19
18
|
event.stopPropagation();
|
20
19
|
setAnchorEl(event.currentTarget);
|
21
20
|
} },
|
22
|
-
React.createElement(
|
21
|
+
React.createElement(MaterialIcon, { fontSize: "small", color: isHovering ? 'action' : 'disabled' }, "more_vert")),
|
23
22
|
React.createElement(Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: (event) => {
|
24
23
|
event.stopPropagation();
|
25
24
|
clearAnchorEl();
|
@@ -41,9 +40,9 @@ function HeaderCellMoreButton({ headerGroup, onHide, }) {
|
|
41
40
|
React.createElement(Box, { paddingX: 2, paddingY: 1 },
|
42
41
|
React.createElement(Grid, { container: true, justifyContent: "flex-end", spacing: 1 },
|
43
42
|
headerGroup.filter && (React.createElement(Grid, { item: true },
|
44
|
-
React.createElement(Button, { variant: "outlined", disabled: headerGroup.filter.value === undefined, onClick: () => { var _a; return (_a = headerGroup.filter) === null || _a === void 0 ? void 0 : _a.onChange(undefined, false); }, size: "small", startIcon: React.createElement(
|
43
|
+
React.createElement(Button, { variant: "outlined", disabled: headerGroup.filter.value === undefined, onClick: () => { var _a; return (_a = headerGroup.filter) === null || _a === void 0 ? void 0 : _a.onChange(undefined, false); }, size: "small", startIcon: React.createElement(MaterialIcon, null, "filter_list") }, "Clear"))),
|
45
44
|
React.createElement(Grid, { item: true },
|
46
|
-
React.createElement(Button, { variant: "outlined", onClick: onHide, size: "small", startIcon: React.createElement(
|
45
|
+
React.createElement(Button, { variant: "outlined", onClick: onHide, size: "small", startIcon: React.createElement(MaterialIcon, null, "visibility_off") }, "Hide")))))));
|
47
46
|
}
|
48
47
|
export default React.memo(HeaderCellMoreButton);
|
49
48
|
//# sourceMappingURL=HeaderCellMoreButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"HeaderCellMoreButton.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/HeaderCellMoreButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,GAAG,EACH,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,OAAO,
|
1
|
+
{"version":3,"file":"HeaderCellMoreButton.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/HeaderCellMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { HeaderGroup } from 'react-table'\nimport {\n Box,\n Button,\n Divider,\n Grid,\n IconButton,\n Popover,\n SxProps,\n styled,\n} from '@mui/material'\nimport MaterialIcon from '../../MaterialIcon'\nimport { useIsHovering } from '../../../hooks/useIsHovering'\nimport useNullableState from '../../../hooks/useNullableState'\nimport ColumnFilters from './ColumnFilters'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\n\nconst StyledIconButton = styled(IconButton)(({ theme }) => ({\n margin: theme.spacing(-1, -1, -1, 1),\n}))\n\nconst paperStyles: SxProps = {\n maxWidth: 500,\n}\n\nfunction HeaderCellMoreButton({\n headerGroup,\n onHide,\n}: {\n headerGroup: HeaderGroup<FormStoreRecord>\n onHide: () => void\n}) {\n const isHovering = useIsHovering()\n const [anchorEl, setAnchorEl, clearAnchorEl] =\n useNullableState<HTMLButtonElement>(null)\n\n return (\n <span>\n <StyledIconButton\n color=\"inherit\"\n onClick={(event) => {\n event.stopPropagation()\n setAnchorEl(event.currentTarget)\n }}\n >\n <MaterialIcon\n fontSize=\"small\"\n color={isHovering ? 'action' : 'disabled'}\n >\n more_vert\n </MaterialIcon>\n </StyledIconButton>\n <Popover\n open={!!anchorEl}\n anchorEl={anchorEl}\n onClose={(event: React.MouseEvent) => {\n event.stopPropagation()\n clearAnchorEl()\n }}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'right',\n }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'right',\n }}\n PaperProps={{\n sx: paperStyles,\n }}\n onClick={(event) => {\n event.stopPropagation()\n }}\n >\n {headerGroup.filter && (\n <>\n <Box padding={2}>\n <ColumnFilters filter={headerGroup.filter} />\n </Box>\n <Divider />\n </>\n )}\n <Box paddingX={2} paddingY={1}>\n <Grid container justifyContent=\"flex-end\" spacing={1}>\n {headerGroup.filter && (\n <Grid item>\n <Button\n variant=\"outlined\"\n disabled={headerGroup.filter.value === undefined}\n onClick={() => headerGroup.filter?.onChange(undefined, false)}\n size=\"small\"\n startIcon={<MaterialIcon>filter_list</MaterialIcon>}\n >\n Clear\n </Button>\n </Grid>\n )}\n <Grid item>\n <Button\n variant=\"outlined\"\n onClick={onHide}\n size=\"small\"\n startIcon={<MaterialIcon>visibility_off</MaterialIcon>}\n >\n Hide\n </Button>\n </Grid>\n </Grid>\n </Box>\n </Popover>\n </span>\n )\n}\n\nexport default React.memo(HeaderCellMoreButton)\n"]}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { CustomAccordion, CustomAccordionSummary, CustomAccordionDetails, } from '../../CustomAccordion';
|
3
3
|
import { Typography } from '@mui/material';
|
4
|
-
import
|
4
|
+
import MaterialIcon from '../../MaterialIcon';
|
5
5
|
const RepeatableSetCell = ({ isOpen, onChange, title, children }) => {
|
6
6
|
return (React.createElement(CustomAccordion, { expanded: isOpen, onChange: onChange, "data-cypress": "form-store-repeatable-set-cell-accordion" },
|
7
|
-
React.createElement(CustomAccordionSummary, { expandIcon: React.createElement(
|
7
|
+
React.createElement(CustomAccordionSummary, { expandIcon: React.createElement(MaterialIcon, null, "expand_more"), "data-cypress": "form-store-repeatable-set-cell-accordion-summary" },
|
8
8
|
React.createElement(Typography, null, title)),
|
9
9
|
React.createElement(CustomAccordionDetails, null, children)));
|
10
10
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RepeatableSetCellAccordion.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/RepeatableSetCellAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,
|
1
|
+
{"version":3,"file":"RepeatableSetCellAccordion.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/RepeatableSetCellAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,YAAY,MAAM,oBAAoB,CAAA;AAS7C,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAS,EAAE,EAAE;IACzE,OAAO,CACL,oBAAC,eAAe,IACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,QAAQ,kBACL,0CAA0C;QAEvD,oBAAC,sBAAsB,IACrB,UAAU,EAAE,oBAAC,YAAY,sBAA2B,kBACvC,kDAAkD;YAE/D,oBAAC,UAAU,QAAE,KAAK,CAAc,CACT;QACzB,oBAAC,sBAAsB,QAAE,QAAQ,CAA0B,CAC3C,CACnB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n CustomAccordion,\n CustomAccordionSummary,\n CustomAccordionDetails,\n} from '../../CustomAccordion'\nimport { Typography } from '@mui/material'\nimport MaterialIcon from '../../MaterialIcon'\n\ntype Props = {\n isOpen: boolean\n onChange: () => void\n title: string\n children: React.ReactNode\n}\n\nconst RepeatableSetCell = ({ isOpen, onChange, title, children }: Props) => {\n return (\n <CustomAccordion\n expanded={isOpen}\n onChange={onChange}\n data-cypress=\"form-store-repeatable-set-cell-accordion\"\n >\n <CustomAccordionSummary\n expandIcon={<MaterialIcon>expand_more</MaterialIcon>}\n data-cypress=\"form-store-repeatable-set-cell-accordion-summary\"\n >\n <Typography>{title}</Typography>\n </CustomAccordionSummary>\n <CustomAccordionDetails>{children}</CustomAccordionDetails>\n </CustomAccordion>\n )\n}\n\nexport default React.memo<Props>(RepeatableSetCell)\n"]}
|
@@ -1,13 +1,11 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import ErrorIcon from '@mui/icons-material/Error';
|
3
2
|
import LargeIconMessage from './LargeIconMessage';
|
4
3
|
import { Button } from '@mui/material';
|
4
|
+
import MaterialIcon from '../MaterialIcon';
|
5
|
+
const ErrorIcon = (props) => React.createElement(MaterialIcon, { ...props }, "error");
|
5
6
|
function ErrorMessage({ title, children, gutterTop, gutterBottom, IconComponent, onTryAgain, }) {
|
6
|
-
if (!IconComponent) {
|
7
|
-
IconComponent = ErrorIcon;
|
8
|
-
}
|
9
7
|
return (React.createElement(React.Fragment, null,
|
10
|
-
React.createElement(LargeIconMessage, { IconComponent: IconComponent, title: title, variant: "error", gutterTop: gutterTop, gutterBottom: gutterBottom, action: onTryAgain && (React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain(), "data-cypress": "error-try-again-button" }, "Try Again")), className: "ob-error-snackbar" }, children)));
|
8
|
+
React.createElement(LargeIconMessage, { IconComponent: IconComponent || ErrorIcon, title: title, variant: "error", gutterTop: gutterTop, gutterBottom: gutterBottom, action: onTryAgain && (React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain(), "data-cypress": "error-try-again-button" }, "Try Again")), className: "ob-error-snackbar" }, children)));
|
11
9
|
}
|
12
10
|
export default React.memo(ErrorMessage);
|
13
11
|
//# sourceMappingURL=ErrorMessage.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/components/messages/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,
|
1
|
+
{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/components/messages/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAEN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,MAAM,SAAS,GAA2C,CACxD,KAAgD,EAChD,EAAE,CAAC,oBAAC,YAAY,OAAK,KAAK,YAAsB,CAAA;AAElD,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,aAAa,EACb,UAAU,GACJ;IACN,OAAO,CACL;QACE,oBAAC,gBAAgB,IACf,aAAa,EAAE,aAAa,IAAI,SAAS,EACzC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,MAAM,EACJ,UAAU,IAAI,CACZ,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,kBACd,wBAAwB,gBAG9B,CACV,EAEH,SAAS,EAAC,mBAAmB,IAE5B,QAAQ,CACQ,CAClB,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport LargeIconMessage, {\n Props as LargeIconMessageProps,\n} from './LargeIconMessage'\nimport { Button } from '@mui/material'\nimport MaterialIcon from '../MaterialIcon'\ntype Props = {\n IconComponent?: LargeIconMessageProps['IconComponent']\n title: string\n gutterTop?: boolean\n gutterBottom?: boolean\n children?: React.ReactNode\n onTryAgain?: () => void\n}\n\nconst ErrorIcon: LargeIconMessageProps['IconComponent'] = (\n props: React.ComponentProps<typeof MaterialIcon>,\n) => <MaterialIcon {...props}>error</MaterialIcon>\n\nfunction ErrorMessage({\n title,\n children,\n gutterTop,\n gutterBottom,\n IconComponent,\n onTryAgain,\n}: Props) {\n return (\n <>\n <LargeIconMessage\n IconComponent={IconComponent || ErrorIcon}\n title={title}\n variant=\"error\"\n gutterTop={gutterTop}\n gutterBottom={gutterBottom}\n action={\n onTryAgain && (\n <Button\n variant=\"outlined\"\n color=\"primary\"\n onClick={() => onTryAgain()}\n data-cypress=\"error-try-again-button\"\n >\n Try Again\n </Button>\n )\n }\n className=\"ob-error-snackbar\"\n >\n {children}\n </LargeIconMessage>\n </>\n )\n}\n\nexport default React.memo<Props>(ErrorMessage)\n"]}
|
@@ -1,13 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
+
import { Icon } from '@mui/material';
|
2
3
|
import { CommonProps } from '@mui/material/OverridableComponent';
|
3
|
-
|
4
|
+
import { Color } from '../../types/mui-color';
|
5
|
+
type IconProps = React.ComponentProps<typeof Icon>;
|
4
6
|
export type Props = {
|
5
7
|
IconComponent: React.ComponentType<{
|
6
|
-
color:
|
7
|
-
style:
|
8
|
+
color: IconProps['color'];
|
9
|
+
style: IconProps['style'];
|
8
10
|
}>;
|
9
11
|
title: string;
|
10
|
-
variant:
|
12
|
+
variant: Color;
|
11
13
|
gutterTop?: boolean;
|
12
14
|
gutterBottom?: boolean;
|
13
15
|
children?: React.ReactNode;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { Typography, Grid, Container, useTheme, styled } from '@mui/material';
|
2
|
+
import { Typography, Grid, Container, useTheme, styled, } from '@mui/material';
|
3
3
|
function LargeIconMessage({ IconComponent, title, variant, gutterTop, gutterBottom, children, action, className, }) {
|
4
4
|
const theme = useTheme();
|
5
5
|
const fontSize = React.useMemo(() => theme.spacing(16), [theme]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"LargeIconMessage.js","sourceRoot":"","sources":["../../../src/components/messages/LargeIconMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,
|
1
|
+
{"version":3,"file":"LargeIconMessage.js","sourceRoot":"","sources":["../../../src/components/messages/LargeIconMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,MAAM,GAEP,MAAM,eAAe,CAAA;AAoBtB,SAAS,gBAAgB,CAAC,EACxB,aAAa,EACb,KAAK,EACL,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,SAAS,GACH;IACN,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEhE,OAAO,CACL,oBAAC,SAAS,IAAC,QAAQ,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,IAAI,uBAAuB;QACtE,oBAAC,mBAAmB,IAAC,SAAS,EAAE,SAAS;YACvC,oBAAC,aAAa,IAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAI,CAClC;QACtB,oBAAC,UAAU,IACT,OAAO,EAAC,IAAI,EACZ,KAAK,EAAC,QAAQ,EACd,YAAY,QACZ,KAAK,EAAE,GAAG,OAAO,OAAO,IAEvB,KAAK,CACK;QACZ,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,gBAAgB,IACf,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,CAAC,CAAC,MAAM,EACnB,YAAY,EAAE,CAAC,MAAM,IAAI,YAAY,IAEpC,QAAQ,CACQ,CACpB,CAAC,CAAC,CAAC,IAAI;QACP,MAAM,IAAI,CACT,oBAAC,UAAU,IACT,SAAS,QACT,cAAc,EAAC,QAAQ,EACvB,YAAY,EAAE,YAAY,IAEzB,MAAM,CACI,CACd,CACS,CACb,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,gBAAgB,CAAC,CAAA;AAElD,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,EAAE;IACxC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,WAAW;CAClD,CAAC,CAEC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5B,SAAS,EAAE,QAAQ;IACnB,GAAG,CAAC,SAAS;QACX,CAAC,CAAC;YACE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC7B;QACH,CAAC,CAAC,EAAE,CAAC;CACR,CAAC,CAAC,CAAA;AAEH,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc;CACrD,CAAC,CAA0C,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IACxE,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;CAC5D,CAAC,CAAC,CAAA;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE;IAC9B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc;CACrD,CAAC,CAA6B,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3D,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;CAC5D,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n Typography,\n Grid,\n Container,\n useTheme,\n styled,\n Icon,\n} from '@mui/material'\nimport { CommonProps } from '@mui/material/OverridableComponent'\nimport { Color } from '../../types/mui-color'\n\ntype IconProps = React.ComponentProps<typeof Icon>\n\nexport type Props = {\n IconComponent: React.ComponentType<{\n color: IconProps['color']\n style: IconProps['style']\n }>\n title: string\n variant: Color\n gutterTop?: boolean\n gutterBottom?: boolean\n children?: React.ReactNode\n action?: React.ReactNode\n className?: CommonProps['className']\n}\n\nfunction LargeIconMessage({\n IconComponent,\n title,\n variant,\n gutterTop,\n gutterBottom,\n children,\n action,\n className,\n}: Props) {\n const theme = useTheme()\n\n const fontSize = React.useMemo(() => theme.spacing(16), [theme])\n\n return (\n <Container maxWidth=\"sm\" className={className || 'ob-large-icon-message'}>\n <StyledIconContainer gutterTop={gutterTop}>\n <IconComponent color={variant} style={{ fontSize }} />\n </StyledIconContainer>\n <Typography\n variant=\"h5\"\n align=\"center\"\n gutterBottom\n color={`${variant}.main`}\n >\n {title}\n </Typography>\n {children ? (\n <StyledTypography\n align=\"center\"\n variant=\"body2\"\n paragraph={!!action}\n gutterBottom={!action && gutterBottom}\n >\n {children}\n </StyledTypography>\n ) : null}\n {action && (\n <StyledGrid\n container\n justifyContent=\"center\"\n gutterBottom={gutterBottom}\n >\n {action}\n </StyledGrid>\n )}\n </Container>\n )\n}\n\nexport default React.memo<Props>(LargeIconMessage)\n\nconst StyledIconContainer = styled('div', {\n shouldForwardProp: (prop) => prop !== 'gutterTop',\n})<{\n gutterTop?: boolean\n}>(({ theme, gutterTop }) => ({\n textAlign: 'center',\n ...(gutterTop\n ? {\n paddingTop: theme.spacing(4),\n }\n : {}),\n}))\n\nconst StyledTypography = styled(Typography, {\n shouldForwardProp: (prop) => prop !== 'gutterBottom',\n})<React.ComponentProps<typeof Typography>>(({ theme, gutterBottom }) => ({\n ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),\n}))\n\nconst StyledGrid = styled(Grid, {\n shouldForwardProp: (prop) => prop !== 'gutterBottom',\n})<{ gutterBottom?: boolean }>(({ theme, gutterBottom }) => ({\n ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),\n}))\n"]}
|
@@ -4,6 +4,7 @@ import WestpacQuickStreamPaymentForm from './WestpacQuickStreamPaymentForm';
|
|
4
4
|
import useQuery from '../../hooks/useQuery';
|
5
5
|
import useLoadDataState from '../../hooks/useLoadDataState';
|
6
6
|
import OnLoading from '../renderer/OnLoading';
|
7
|
+
import MaterialIcon from '../MaterialIcon';
|
7
8
|
function PaymentForm({ captchaSiteKey, onCompleted, onCancelled, appImageUrl, title, }) {
|
8
9
|
const query = useQuery();
|
9
10
|
const loadPaymentFormConfiguration = React.useCallback(async (abortSignal) => {
|
@@ -50,7 +51,7 @@ function PaymentForm({ captchaSiteKey, onCompleted, onCancelled, appImageUrl, ti
|
|
50
51
|
case 'ERROR': {
|
51
52
|
return (React.createElement("section", { className: "cypress-payment-form-loading-error-message" },
|
52
53
|
React.createElement("div", { className: "ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8" },
|
53
|
-
React.createElement(
|
54
|
+
React.createElement(MaterialIcon, { className: "ob-payment-form__error-icon has-text-danger icon-x-large" }, "error")),
|
54
55
|
React.createElement("p", { className: "ob-payment-form__error-message has-text-centered has-margin-bottom-4" }, state.error.message)));
|
55
56
|
}
|
56
57
|
case 'SUCCESS': {
|
@@ -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;
|
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'\n\nfunction PaymentForm({\n captchaSiteKey,\n onCompleted,\n onCancelled,\n appImageUrl,\n title,\n}: {\n captchaSiteKey: string\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 'BPOINT':\n case 'CP_PAY':\n case 'NSW_GOV_PAY':\n case 'WESTPAC_QUICK_WEB': {\n throw new Error(\n `\"${paymentSubmissionEvent.type}\" payment events do not support a custom payment form.`,\n )\n }\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 onCompleted={onCompleted}\n onCancelled={onCancelled}\n appImageUrl={appImageUrl}\n title={title}\n />\n ),\n }\n }\n }\n },\n [\n appImageUrl,\n captchaSiteKey,\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 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 {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"]}
|
@@ -5,6 +5,7 @@ import ReCAPTCHA from 'react-google-recaptcha';
|
|
5
5
|
import OnLoading from '../renderer/OnLoading';
|
6
6
|
import OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage';
|
7
7
|
import Modal from '../renderer/Modal';
|
8
|
+
import MaterialIcon from '../MaterialIcon';
|
8
9
|
function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmissionEvent, formSubmissionPaymentId, supplierBusinessCode, publishableApiKey, isTestMode, captchaSiteKey, onCompleted, onCancelled, appImageUrl, title, }) {
|
9
10
|
var _a, _b;
|
10
11
|
const [{ isCompletingTransaction, completeTransactionError, captchaToken, displayCaptchaRequired, }, setCompleteTransactionState,] = React.useState({
|
@@ -192,7 +193,7 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
|
|
192
193
|
React.createElement("span", null, "Building payment form...")))),
|
193
194
|
loadError && (React.createElement("section", { className: "cypress-payment-form-loading-error-message" },
|
194
195
|
React.createElement("div", { className: "ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8" },
|
195
|
-
React.createElement(
|
196
|
+
React.createElement(MaterialIcon, { className: "ob-payment-form__error-icon has-text-danger icon-x-large" }, "error")),
|
196
197
|
React.createElement("p", { className: "ob-payment-form__error-message has-text-centered has-margin-bottom-4" }, loadError.message))),
|
197
198
|
React.createElement("section", null,
|
198
199
|
React.createElement("form", { onSubmit: (event) => {
|
@@ -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 OnLoading from '../renderer/OnLoading'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport Modal from '../renderer/Modal'\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 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 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 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 threeDS2: true,\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 handleSubmit = React.useCallback(async () => {\n if (!trustedFrame) {\n return\n }\n\n if (!captchaToken) {\n setCompleteTransactionState({\n captchaToken: null,\n displayCaptchaRequired: true,\n isCompletingTransaction: false,\n completeTransactionError: null,\n })\n return\n }\n\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: true,\n completeTransactionError: null,\n }))\n\n trustedFrame.submitForm((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 paymentService.westpacQuickStream\n .completeTransaction({\n singleUseTokenId: data.singleUseToken.singleUseTokenId,\n formSubmissionResult,\n formSubmissionPaymentId,\n paymentSubmissionEvent,\n captchaToken,\n })\n .then(onCompleted)\n .catch((error) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: error,\n }))\n })\n })\n }, [\n captchaToken,\n formSubmissionPaymentId,\n formSubmissionResult,\n onCompleted,\n paymentSubmissionEvent,\n trustedFrame,\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 <i className=\"ob-payment-form__error-icon material-icons has-text-danger icon-x-large\">\n error\n </i>\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 sitekey={captchaSiteKey}\n onChange={(newValue) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n captchaToken: newValue,\n displayCaptchaRequired: newValue === null,\n }))\n }}\n className=\"ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha\"\n />\n {displayCaptchaRequired && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-required cypress-validation-message\">\n Please complete the CAPTCHA successfully\n </div>\n </div>\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 OnLoading from '../renderer/OnLoading'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport Modal from '../renderer/Modal'\nimport MaterialIcon from '../MaterialIcon'\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 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 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 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 threeDS2: true,\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 handleSubmit = React.useCallback(async () => {\n if (!trustedFrame) {\n return\n }\n\n if (!captchaToken) {\n setCompleteTransactionState({\n captchaToken: null,\n displayCaptchaRequired: true,\n isCompletingTransaction: false,\n completeTransactionError: null,\n })\n return\n }\n\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: true,\n completeTransactionError: null,\n }))\n\n trustedFrame.submitForm((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 paymentService.westpacQuickStream\n .completeTransaction({\n singleUseTokenId: data.singleUseToken.singleUseTokenId,\n formSubmissionResult,\n formSubmissionPaymentId,\n paymentSubmissionEvent,\n captchaToken,\n })\n .then(onCompleted)\n .catch((error) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n isCompletingTransaction: false,\n completeTransactionError: error,\n }))\n })\n })\n }, [\n captchaToken,\n formSubmissionPaymentId,\n formSubmissionResult,\n onCompleted,\n paymentSubmissionEvent,\n trustedFrame,\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 sitekey={captchaSiteKey}\n onChange={(newValue) => {\n setCompleteTransactionState((currentState) => ({\n ...currentState,\n captchaToken: newValue,\n displayCaptchaRequired: newValue === null,\n }))\n }}\n className=\"ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha\"\n />\n {displayCaptchaRequired && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-required cypress-validation-message\">\n Please complete the CAPTCHA successfully\n </div>\n </div>\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,11 +1,12 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import clsx from 'clsx';
|
3
|
+
import MaterialIcon from '../MaterialIcon';
|
3
4
|
function ReceiptList({ successIconClassName, warningIconClassName, warningMessageClassName, warningMessage, children, }) {
|
4
5
|
return (React.createElement("div", { className: "ob-list has-dividers has-shadow has-margin-bottom-4" },
|
5
6
|
React.createElement("div", { className: "ob-list__item" },
|
6
7
|
React.createElement("div", { className: "ob-list__content-wrapper" },
|
7
|
-
React.createElement("div", { className: "ob-list__content" }, !warningMessage ? (React.createElement(
|
8
|
-
React.createElement(
|
8
|
+
React.createElement("div", { className: "ob-list__content" }, !warningMessage ? (React.createElement(MaterialIcon, { className: clsx('has-text-centered has-text-success icon-x-large', successIconClassName) }, "check_circle_outline")) : (React.createElement(React.Fragment, null,
|
9
|
+
React.createElement(MaterialIcon, { className: clsx('has-text-centered has-text-danger icon-x-large', warningIconClassName) }, "warning"),
|
9
10
|
React.createElement("p", { className: clsx('has-text-centered', warningMessageClassName) }, warningMessage)))))),
|
10
11
|
children));
|
11
12
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;
|
1
|
+
{"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,6BAAK,SAAS,EAAC,qDAAqD;QAClE,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,iDAAiD,EACjD,oBAAoB,CACrB,2BAGY,CAChB,CAAC,CAAC,CAAC,CACF;oBACE,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD,oBAAoB,CACrB,cAGY;oBAEf,2BACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,IAE5D,cAAc,CACb,CACH,CACJ,CACG,CACF,CACF;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n successIconClassName: string\n warningIconClassName?: string\n warningMessageClassName?: string\n warningMessage?: string\n children: React.ReactNode\n}\n\nfunction ReceiptList({\n successIconClassName,\n warningIconClassName,\n warningMessageClassName,\n warningMessage,\n children,\n}: Props) {\n return (\n <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n <div className=\"ob-list__item\">\n <div className=\"ob-list__content-wrapper\">\n <div className=\"ob-list__content\">\n {!warningMessage ? (\n <MaterialIcon\n className={clsx(\n 'has-text-centered has-text-success icon-x-large',\n successIconClassName,\n )}\n >\n check_circle_outline\n </MaterialIcon>\n ) : (\n <>\n <MaterialIcon\n className={clsx(\n 'has-text-centered has-text-danger icon-x-large',\n warningIconClassName,\n )}\n >\n warning\n </MaterialIcon>\n\n <p\n className={clsx('has-text-centered', warningMessageClassName)}\n >\n {warningMessage}\n </p>\n </>\n )}\n </div>\n </div>\n </div>\n {children}\n </div>\n )\n}\n\nexport default React.memo(ReceiptList)\n"]}
|
@@ -1,10 +1,11 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import clsx from 'clsx';
|
3
3
|
import utilsService from '../../services/utils-service';
|
4
|
+
import MaterialIcon from '../MaterialIcon';
|
4
5
|
function ReceiptListItem({ className, valueClassName, icon, label, value, allowCopyToClipboard, }) {
|
5
6
|
return (React.createElement("div", { className: clsx('ob-list__item', className) },
|
6
7
|
!!icon && (React.createElement("div", { className: "ob-list__avatar" },
|
7
|
-
React.createElement(
|
8
|
+
React.createElement(MaterialIcon, { className: "icon-medium" }, icon))),
|
8
9
|
React.createElement("div", { className: "ob-list__content-wrapper" },
|
9
10
|
React.createElement("div", { className: "ob-list__content" },
|
10
11
|
React.createElement("div", { className: "ob-list__text-secondary" }, label),
|
@@ -12,7 +13,7 @@ function ReceiptListItem({ className, valueClassName, icon, label, value, allowC
|
|
12
13
|
allowCopyToClipboard && (React.createElement("div", { className: "ob-list__actions" },
|
13
14
|
React.createElement("button", { type: "button", className: "button ob-button ob-list__button is-small is-white tooltip has-tooltip-left", onClick: () => utilsService.copyToClipboard(value), "data-tooltip": "Copy to clipboard" },
|
14
15
|
React.createElement("span", { className: "icon has-text-grey" },
|
15
|
-
React.createElement(
|
16
|
+
React.createElement(MaterialIcon, { className: "icon-small ob-icon__copy has-text" }, "file_copy")))))));
|
16
17
|
}
|
17
18
|
export default React.memo(ReceiptListItem);
|
18
19
|
//# sourceMappingURL=ReceiptListItem.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ReceiptListItem.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,8BAA8B,CAAA;
|
1
|
+
{"version":3,"file":"ReceiptListItem.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAW1C,SAAS,eAAe,CAAC,EACvB,SAAS,EACT,cAAc,EACd,IAAI,EACJ,KAAK,EACL,KAAK,EACL,oBAAoB,GACd;IACN,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;QAC7C,CAAC,CAAC,IAAI,IAAI,CACT,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,YAAY,IAAC,SAAS,EAAC,aAAa,IAAE,IAAI,CAAgB,CACvD,CACP;QACD,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAO;gBACtD,6BAAK,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,cAAc,CAAC,IAC1D,KAAK,CACF,CACF,CACF;QACL,oBAAoB,IAAI,CACvB,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6EAA6E,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,kBACrC,mBAAmB;gBAEhC,8BAAM,SAAS,EAAC,oBAAoB;oBAClC,oBAAC,YAAY,IAAC,SAAS,EAAC,mCAAmC,gBAE5C,CACV,CACA,CACL,CACP,CACG,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport utilsService from '../../services/utils-service'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n className: string\n valueClassName: string\n icon?: string\n label: string\n value: string\n allowCopyToClipboard?: boolean\n}\n\nfunction ReceiptListItem({\n className,\n valueClassName,\n icon,\n label,\n value,\n allowCopyToClipboard,\n}: Props) {\n return (\n <div className={clsx('ob-list__item', className)}>\n {!!icon && (\n <div className=\"ob-list__avatar\">\n <MaterialIcon className=\"icon-medium\">{icon}</MaterialIcon>\n </div>\n )}\n <div className=\"ob-list__content-wrapper\">\n <div className=\"ob-list__content\">\n <div className=\"ob-list__text-secondary\">{label}</div>\n <div className={clsx('ob-list__text-primary', valueClassName)}>\n {value}\n </div>\n </div>\n </div>\n {allowCopyToClipboard && (\n <div className=\"ob-list__actions\">\n <button\n type=\"button\"\n className=\"button ob-button ob-list__button is-small is-white tooltip has-tooltip-left\"\n onClick={() => utilsService.copyToClipboard(value)}\n data-tooltip=\"Copy to clipboard\"\n >\n <span className=\"icon has-text-grey\">\n <MaterialIcon className=\"icon-small ob-icon__copy has-text\">\n file_copy\n </MaterialIcon>\n </span>\n </button>\n </div>\n )}\n </div>\n )\n}\n\nexport default React.memo(ReceiptListItem)\n"]}
|