@oneblink/apps-react 4.0.0-beta.9 → 4.0.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.
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { useHistory } from 'react-router-dom';
3
- import { paymentService, submissionService, localisationService, } from '@oneblink/apps';
3
+ import { paymentService, submissionService, } from '@oneblink/apps';
4
4
  import useIsMounted from './hooks/useIsMounted';
5
5
  import useQuery from './hooks/useQuery';
6
6
  import Modal from './components/renderer/Modal';
@@ -11,11 +11,12 @@ function PaymentReceipt({ onDone, onCancel, }) {
11
11
  const isMounted = useIsMounted();
12
12
  const query = useQuery();
13
13
  const history = useHistory();
14
- const [{ isLoading, loadError, transaction, submissionResult }, setLoadState,] = React.useState({
14
+ const [{ isLoading, loadError, transaction, submissionResult, receiptItems }, setLoadState,] = React.useState({
15
15
  isLoading: true,
16
16
  loadError: null,
17
17
  transaction: null,
18
18
  submissionResult: null,
19
+ receiptItems: null,
19
20
  });
20
21
  const [{ isRunningPostSubmissionAction, postSubmissionError }, setPostSubmissionState,] = React.useState({
21
22
  isRunningPostSubmissionAction: false,
@@ -43,10 +44,12 @@ function PaymentReceipt({ onDone, onCancel, }) {
43
44
  let newError = null;
44
45
  let newTransaction = null;
45
46
  let newSubmissionResult = null;
47
+ let newReceiptItems = null;
46
48
  try {
47
49
  const result = await handlePaymentQuerystring(query);
48
50
  newTransaction = result.transaction;
49
51
  newSubmissionResult = result.submissionResult;
52
+ newReceiptItems = result.receiptItems;
50
53
  }
51
54
  catch (error) {
52
55
  console.warn('Error while attempting to load transaction', error);
@@ -58,6 +61,7 @@ function PaymentReceipt({ onDone, onCancel, }) {
58
61
  loadError: newError,
59
62
  transaction: newTransaction,
60
63
  submissionResult: newSubmissionResult,
64
+ receiptItems: newReceiptItems,
61
65
  });
62
66
  }
63
67
  };
@@ -136,10 +140,12 @@ function PaymentReceipt({ onDone, onCancel, }) {
136
140
  React.createElement(ReceiptList, { successIconClassName: "ob-payment-receipt__success-icon", warningIconClassName: "ob-payment-receipt__warning-icon", warningMessageClassName: "ob-payment-receipt__warning-message cypress-payment-receipt-warning-message", warningMessage: transaction.isSuccess
137
141
  ? undefined
138
142
  : transaction.errorMessage || undefined },
139
- submissionResult && submissionResult.submissionId && (React.createElement(ReceiptListItem, { className: "ob-payment-receipt__submission-id", valueClassName: "cypress-payment-receipt-submission-id", icon: "receipt", label: "Submission Id", value: submissionResult.submissionId, allowCopyToClipboard: true })),
140
- !!transaction.id && (React.createElement(ReceiptListItem, { className: "ob-payment-receipt__transaction-id", valueClassName: "cypress-payment-receipt-transaction-id", icon: "shopping_cart", label: "Transaction Id", value: transaction.id, allowCopyToClipboard: true })),
141
- !!transaction.creditCardMask && (React.createElement(ReceiptListItem, { className: "ob-payment-receipt__card-number", valueClassName: "cypress-payment-receipt-card-number", icon: "credit_card", label: "Card Number", value: transaction.creditCardMask })),
142
- !!transaction.amount && (React.createElement(ReceiptListItem, { className: "ob-payment-receipt__amount", valueClassName: "cypress-payment-receipt-amount", icon: "attach_money", label: "Amount", value: localisationService.formatCurrency(transaction.amount) })),
143
+ receiptItems &&
144
+ receiptItems.length &&
145
+ receiptItems.map((receiptItem, i) => {
146
+ var _a, _b;
147
+ return (React.createElement(ReceiptListItem, { key: i, className: (_a = receiptItem.className) !== null && _a !== void 0 ? _a : '', valueClassName: (_b = receiptItem.valueClassName) !== null && _b !== void 0 ? _b : '', icon: receiptItem.icon, label: receiptItem.label, value: receiptItem.value, allowCopyToClipboard: receiptItem.allowCopyToClipboard }));
148
+ }),
143
149
  React.createElement(ReceiptListItem, { className: "ob-payment-receipt__warning", valueClassName: "cypress-payment-receipt-warning", label: "Warning", value: "Please do not click back in your browser, doing so will cause issues with your payment." })),
144
150
  React.createElement("div", { className: "buttons" }, transaction.isSuccess ? (React.createElement(ReceiptButton, { className: "is-primary ob-payment-receipt__button ob-payment-receipt__okay-button cypress-payment-receipt-okay-button", label: "Done", isLoading: isRunningPostSubmissionAction, onClick: handleDone })) : (React.createElement(React.Fragment, null,
145
151
  React.createElement(ReceiptButton, { className: "ob-payment-receipt__button ob-payment-receipt__cancel-button cypress-payment-receipt-cancel-button", label: "Cancel", isDisabled: isRetrying, isLoading: isRunningPostSubmissionAction, onClick: handleCancel }),
@@ -1 +1 @@
1
- {"version":3,"file":"PaymentReceipt.js","sourceRoot":"","sources":["../src/PaymentReceipt.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport {\n paymentService,\n submissionService,\n localisationService,\n OneBlinkAppsError,\n} from '@oneblink/apps'\nimport useIsMounted from './hooks/useIsMounted'\n\nimport useQuery from './hooks/useQuery'\nimport Modal from './components/renderer/Modal'\nimport OnLoading from './components/renderer/OnLoading'\nimport {\n Receipt,\n ReceiptList,\n ReceiptListItem,\n ReceiptButton,\n} from './components/receipts'\n\nconst { handlePaymentQuerystring, handlePaymentSubmissionEvent } =\n paymentService\n\nfunction PaymentReceipt({\n onDone,\n onCancel,\n}: {\n /**\n * The function to call when the user clicks 'Done'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onDone: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n /**\n * The function to call when the user clicks 'Cancel'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onCancel: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n const isMounted = useIsMounted()\n const query = useQuery()\n const history = useHistory()\n\n const [\n { isLoading, loadError, transaction, submissionResult },\n setLoadState,\n ] = React.useState<{\n isLoading: boolean\n loadError: Error | null\n transaction: paymentService.HandlePaymentResult['transaction'] | null\n submissionResult: submissionService.FormSubmissionResult | null\n }>({\n isLoading: true,\n loadError: null,\n transaction: null,\n submissionResult: null,\n })\n const [\n { isRunningPostSubmissionAction, postSubmissionError },\n setPostSubmissionState,\n ] = React.useState<{\n isRunningPostSubmissionAction: boolean\n postSubmissionError: OneBlinkAppsError | null\n }>({\n isRunningPostSubmissionAction: false,\n postSubmissionError: null,\n })\n const clearPostSubmissionError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n postSubmissionError: null,\n }))\n }, [])\n const [{ isRetrying, retryError }, setRetryState] = React.useState<{\n isRetrying: boolean\n retryError: OneBlinkAppsError | null\n }>({\n isRetrying: false,\n retryError: null,\n })\n const clearRetryError = React.useCallback(() => {\n setRetryState((currentState) => ({\n ...currentState,\n retryError: null,\n }))\n }, [])\n\n React.useEffect(() => {\n let ignore = false\n\n const getTransaction = async () => {\n let newError = null\n let newTransaction = null\n let newSubmissionResult = null\n try {\n const result = await handlePaymentQuerystring(query)\n newTransaction = result.transaction\n newSubmissionResult = result.submissionResult\n } catch (error) {\n console.warn('Error while attempting to load transaction', error)\n newError = error as Error\n }\n\n if (!ignore) {\n setLoadState({\n isLoading: false,\n loadError: newError,\n transaction: newTransaction,\n submissionResult: newSubmissionResult,\n })\n }\n }\n getTransaction()\n\n return () => {\n ignore = true\n }\n }, [query])\n\n const executePostSubmissionAction = React.useCallback(\n async (\n action: (\n submissionRresult: submissionService.FormSubmissionResult,\n ) => Promise<void>,\n ) => {\n if (!submissionResult || !isMounted.current) {\n return\n }\n\n setPostSubmissionState({\n isRunningPostSubmissionAction: true,\n postSubmissionError: null,\n })\n\n let newError = null\n try {\n await action({ ...submissionResult, payment: null })\n } catch (error) {\n console.warn('Error while running post submission action', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setPostSubmissionState({\n isRunningPostSubmissionAction: false,\n postSubmissionError: newError,\n })\n }\n },\n [isMounted, submissionResult],\n )\n\n const handleDone = React.useCallback(async () => {\n executePostSubmissionAction(onDone)\n }, [executePostSubmissionAction, onDone])\n\n const handleCancel = React.useCallback(() => {\n executePostSubmissionAction(onCancel)\n }, [executePostSubmissionAction, onCancel])\n\n const handleTryAgain = React.useCallback(async () => {\n if (!submissionResult || !submissionResult.payment) {\n return\n }\n const paymentSubmissionEvent = submissionResult.payment.submissionEvent\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: true,\n retryError: null,\n })\n }\n\n let newError = null\n try {\n submissionResult.payment = await handlePaymentSubmissionEvent({\n amount: submissionResult.payment.amount,\n formSubmissionResult: submissionResult,\n paymentSubmissionEvent,\n paymentReceiptUrl: `${window.location.origin}${window.location.pathname}`,\n })\n await submissionService.executePostSubmissionAction(\n submissionResult,\n history.push,\n )\n } catch (error) {\n console.warn('Error while attempting to retry transaction', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: false,\n retryError: newError,\n })\n }\n }, [history.push, isMounted, submissionResult])\n\n return (\n <div>\n {isLoading && (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Retrieving transaction details...</span>\n </div>\n </section>\n )}\n\n {transaction && (\n <Receipt\n className=\"ob-payment-receipt\"\n containerClassName=\"ob-payment-receipt__container\"\n >\n <ReceiptList\n successIconClassName=\"ob-payment-receipt__success-icon\"\n warningIconClassName=\"ob-payment-receipt__warning-icon\"\n warningMessageClassName=\"ob-payment-receipt__warning-message cypress-payment-receipt-warning-message\"\n warningMessage={\n transaction.isSuccess\n ? undefined\n : transaction.errorMessage || undefined\n }\n >\n {submissionResult && submissionResult.submissionId && (\n <ReceiptListItem\n className=\"ob-payment-receipt__submission-id\"\n valueClassName=\"cypress-payment-receipt-submission-id\"\n icon=\"receipt\"\n label=\"Submission Id\"\n value={submissionResult.submissionId}\n allowCopyToClipboard\n />\n )}\n\n {!!transaction.id && (\n <ReceiptListItem\n className=\"ob-payment-receipt__transaction-id\"\n valueClassName=\"cypress-payment-receipt-transaction-id\"\n icon=\"shopping_cart\"\n label=\"Transaction Id\"\n value={transaction.id}\n allowCopyToClipboard\n />\n )}\n\n {!!transaction.creditCardMask && (\n <ReceiptListItem\n className=\"ob-payment-receipt__card-number\"\n valueClassName=\"cypress-payment-receipt-card-number\"\n icon=\"credit_card\"\n label=\"Card Number\"\n value={transaction.creditCardMask}\n />\n )}\n\n {!!transaction.amount && (\n <ReceiptListItem\n className=\"ob-payment-receipt__amount\"\n valueClassName=\"cypress-payment-receipt-amount\"\n icon=\"attach_money\"\n label=\"Amount\"\n value={localisationService.formatCurrency(transaction.amount)}\n />\n )}\n <ReceiptListItem\n className=\"ob-payment-receipt__warning\"\n valueClassName=\"cypress-payment-receipt-warning\"\n label=\"Warning\"\n value=\"Please do not click back in your browser, doing so will cause issues with your payment.\"\n />\n </ReceiptList>\n\n <div className=\"buttons\">\n {transaction.isSuccess ? (\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__okay-button cypress-payment-receipt-okay-button\"\n label=\"Done\"\n isLoading={isRunningPostSubmissionAction}\n onClick={handleDone}\n />\n ) : (\n <>\n <ReceiptButton\n className=\"ob-payment-receipt__button ob-payment-receipt__cancel-button cypress-payment-receipt-cancel-button\"\n label=\"Cancel\"\n isDisabled={isRetrying}\n isLoading={isRunningPostSubmissionAction}\n onClick={handleCancel}\n />\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button\"\n label=\"Try Again\"\n isDisabled={isRunningPostSubmissionAction}\n isLoading={isRetrying}\n onClick={handleTryAgain}\n />\n </>\n )}\n </div>\n </Receipt>\n )}\n\n {loadError && (\n <section className=\"cypress-payment-receipt-loading-error-message\">\n <div className=\"ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8\">\n <i className=\"ob-payment-receipt__error-icon material-icons has-text-danger icon-x-large\">\n error\n </i>\n </div>\n <p className=\"ob-payment-receipt__error-message has-text-centered has-margin-bottom-4\">\n {loadError.message}\n </p>\n </section>\n )}\n\n {retryError && (\n <Modal\n isOpen\n title={retryError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearRetryError}\n >\n Okay\n </button>\n }\n >\n {retryError.message}\n </Modal>\n )}\n\n {postSubmissionError && (\n <Modal\n isOpen\n title={postSubmissionError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearPostSubmissionError}\n >\n Okay\n </button>\n }\n >\n {postSubmissionError.message}\n </Modal>\n )}\n </div>\n )\n}\n\n/**\n * Component for rendering a OneBlink Form Payment Receipt. This component will\n * payment receipt but it is up to the developer to implement what happens when\n * the user clicks 'Done'.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function ReceiptContainer() {\n * const handleDone = React.useCallback(async () => {\n * console.log('All done!')\n * }, [])\n * const handleCancel = React.useCallback(async () => {\n * console.log('Cancelled!')\n * }, [])\n *\n * return <PaymentReceipt onDone={handleDone} onCancel={handleCancel} />\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <ReceiptContainer />\n * </IsOfflineContextProvider>\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 React.memo(PaymentReceipt)\n"]}
1
+ {"version":3,"file":"PaymentReceipt.js","sourceRoot":"","sources":["../src/PaymentReceipt.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport {\n paymentService,\n submissionService,\n OneBlinkAppsError,\n} from '@oneblink/apps'\nimport useIsMounted from './hooks/useIsMounted'\n\nimport useQuery from './hooks/useQuery'\nimport Modal from './components/renderer/Modal'\nimport OnLoading from './components/renderer/OnLoading'\nimport {\n Receipt,\n ReceiptList,\n ReceiptListItem,\n ReceiptButton,\n} from './components/receipts'\n\nconst { handlePaymentQuerystring, handlePaymentSubmissionEvent } =\n paymentService\n\nfunction PaymentReceipt({\n onDone,\n onCancel,\n}: {\n /**\n * The function to call when the user clicks 'Done'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onDone: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n /**\n * The function to call when the user clicks 'Cancel'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onCancel: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n const isMounted = useIsMounted()\n const query = useQuery()\n const history = useHistory()\n\n const [\n { isLoading, loadError, transaction, submissionResult, receiptItems },\n setLoadState,\n ] = React.useState<{\n isLoading: boolean\n loadError: Error | null\n transaction: paymentService.HandlePaymentResult['transaction'] | null\n submissionResult: submissionService.FormSubmissionResult | null\n receiptItems: paymentService.PaymentReceiptItem[] | null\n }>({\n isLoading: true,\n loadError: null,\n transaction: null,\n submissionResult: null,\n receiptItems: null,\n })\n const [\n { isRunningPostSubmissionAction, postSubmissionError },\n setPostSubmissionState,\n ] = React.useState<{\n isRunningPostSubmissionAction: boolean\n postSubmissionError: OneBlinkAppsError | null\n }>({\n isRunningPostSubmissionAction: false,\n postSubmissionError: null,\n })\n const clearPostSubmissionError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n postSubmissionError: null,\n }))\n }, [])\n const [{ isRetrying, retryError }, setRetryState] = React.useState<{\n isRetrying: boolean\n retryError: OneBlinkAppsError | null\n }>({\n isRetrying: false,\n retryError: null,\n })\n const clearRetryError = React.useCallback(() => {\n setRetryState((currentState) => ({\n ...currentState,\n retryError: null,\n }))\n }, [])\n\n React.useEffect(() => {\n let ignore = false\n\n const getTransaction = async () => {\n let newError = null\n let newTransaction = null\n let newSubmissionResult = null\n let newReceiptItems = null\n try {\n const result = await handlePaymentQuerystring(query)\n newTransaction = result.transaction\n newSubmissionResult = result.submissionResult\n newReceiptItems = result.receiptItems\n } catch (error) {\n console.warn('Error while attempting to load transaction', error)\n newError = error as Error\n }\n\n if (!ignore) {\n setLoadState({\n isLoading: false,\n loadError: newError,\n transaction: newTransaction,\n submissionResult: newSubmissionResult,\n receiptItems: newReceiptItems,\n })\n }\n }\n getTransaction()\n\n return () => {\n ignore = true\n }\n }, [query])\n\n const executePostSubmissionAction = React.useCallback(\n async (\n action: (\n submissionRresult: submissionService.FormSubmissionResult,\n ) => Promise<void>,\n ) => {\n if (!submissionResult || !isMounted.current) {\n return\n }\n\n setPostSubmissionState({\n isRunningPostSubmissionAction: true,\n postSubmissionError: null,\n })\n\n let newError = null\n try {\n await action({ ...submissionResult, payment: null })\n } catch (error) {\n console.warn('Error while running post submission action', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setPostSubmissionState({\n isRunningPostSubmissionAction: false,\n postSubmissionError: newError,\n })\n }\n },\n [isMounted, submissionResult],\n )\n\n const handleDone = React.useCallback(async () => {\n executePostSubmissionAction(onDone)\n }, [executePostSubmissionAction, onDone])\n\n const handleCancel = React.useCallback(() => {\n executePostSubmissionAction(onCancel)\n }, [executePostSubmissionAction, onCancel])\n\n const handleTryAgain = React.useCallback(async () => {\n if (!submissionResult || !submissionResult.payment) {\n return\n }\n const paymentSubmissionEvent = submissionResult.payment.submissionEvent\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: true,\n retryError: null,\n })\n }\n\n let newError = null\n try {\n submissionResult.payment = await handlePaymentSubmissionEvent({\n amount: submissionResult.payment.amount,\n formSubmissionResult: submissionResult,\n paymentSubmissionEvent,\n paymentReceiptUrl: `${window.location.origin}${window.location.pathname}`,\n })\n await submissionService.executePostSubmissionAction(\n submissionResult,\n history.push,\n )\n } catch (error) {\n console.warn('Error while attempting to retry transaction', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: false,\n retryError: newError,\n })\n }\n }, [history.push, isMounted, submissionResult])\n\n return (\n <div>\n {isLoading && (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Retrieving transaction details...</span>\n </div>\n </section>\n )}\n\n {transaction && (\n <Receipt\n className=\"ob-payment-receipt\"\n containerClassName=\"ob-payment-receipt__container\"\n >\n <ReceiptList\n successIconClassName=\"ob-payment-receipt__success-icon\"\n warningIconClassName=\"ob-payment-receipt__warning-icon\"\n warningMessageClassName=\"ob-payment-receipt__warning-message cypress-payment-receipt-warning-message\"\n warningMessage={\n transaction.isSuccess\n ? undefined\n : transaction.errorMessage || undefined\n }\n >\n {receiptItems &&\n receiptItems.length &&\n receiptItems.map((receiptItem, i) => {\n return (\n <ReceiptListItem\n key={i}\n className={receiptItem.className ?? ''}\n valueClassName={receiptItem.valueClassName ?? ''}\n icon={receiptItem.icon}\n label={receiptItem.label}\n value={receiptItem.value}\n allowCopyToClipboard={receiptItem.allowCopyToClipboard}\n />\n )\n })}\n <ReceiptListItem\n className=\"ob-payment-receipt__warning\"\n valueClassName=\"cypress-payment-receipt-warning\"\n label=\"Warning\"\n value=\"Please do not click back in your browser, doing so will cause issues with your payment.\"\n />\n </ReceiptList>\n\n <div className=\"buttons\">\n {transaction.isSuccess ? (\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__okay-button cypress-payment-receipt-okay-button\"\n label=\"Done\"\n isLoading={isRunningPostSubmissionAction}\n onClick={handleDone}\n />\n ) : (\n <>\n <ReceiptButton\n className=\"ob-payment-receipt__button ob-payment-receipt__cancel-button cypress-payment-receipt-cancel-button\"\n label=\"Cancel\"\n isDisabled={isRetrying}\n isLoading={isRunningPostSubmissionAction}\n onClick={handleCancel}\n />\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button\"\n label=\"Try Again\"\n isDisabled={isRunningPostSubmissionAction}\n isLoading={isRetrying}\n onClick={handleTryAgain}\n />\n </>\n )}\n </div>\n </Receipt>\n )}\n\n {loadError && (\n <section className=\"cypress-payment-receipt-loading-error-message\">\n <div className=\"ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8\">\n <i className=\"ob-payment-receipt__error-icon material-icons has-text-danger icon-x-large\">\n error\n </i>\n </div>\n <p className=\"ob-payment-receipt__error-message has-text-centered has-margin-bottom-4\">\n {loadError.message}\n </p>\n </section>\n )}\n\n {retryError && (\n <Modal\n isOpen\n title={retryError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearRetryError}\n >\n Okay\n </button>\n }\n >\n {retryError.message}\n </Modal>\n )}\n\n {postSubmissionError && (\n <Modal\n isOpen\n title={postSubmissionError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearPostSubmissionError}\n >\n Okay\n </button>\n }\n >\n {postSubmissionError.message}\n </Modal>\n )}\n </div>\n )\n}\n\n/**\n * Component for rendering a OneBlink Form Payment Receipt. This component will\n * payment receipt but it is up to the developer to implement what happens when\n * the user clicks 'Done'.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function ReceiptContainer() {\n * const handleDone = React.useCallback(async () => {\n * console.log('All done!')\n * }, [])\n * const handleCancel = React.useCallback(async () => {\n * console.log('Cancelled!')\n * }, [])\n *\n * return <PaymentReceipt onDone={handleDone} onCancel={handleCancel} />\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <ReceiptContainer />\n * </IsOfflineContextProvider>\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 React.memo(PaymentReceipt)\n"]}
@@ -5,7 +5,7 @@ import { generateHeaders } from '@oneblink/apps/dist/services/fetch';
5
5
  import useIsOffline from '../../hooks/useIsOffline';
6
6
  import OnLoading from './OnLoading';
7
7
  import generateDefaultData from '../../services/generate-default-data';
8
- import { LookupNotificationContext } from '../../hooks/useLookupNotification';
8
+ import { LookupNotificationContext, } from '../../hooks/useLookupNotification';
9
9
  import useFormDefinition from '../../hooks/useFormDefinition';
10
10
  import useInjectPages from '../../hooks/useInjectPages';
11
11
  import useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext';
@@ -64,7 +64,7 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
64
64
  };
65
65
  });
66
66
  }, [element, injectPagesAfter, onLookup]);
67
- const triggerLookup = React.useCallback(async (newValue, abortSignal) => {
67
+ const triggerLookup = React.useCallback(async ({ newValue, abortController, continueLookupOnAbort }) => {
68
68
  // No lookups for read only forms
69
69
  if (formIsReadOnly)
70
70
  return;
@@ -83,11 +83,15 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
83
83
  setHasLookupFailed(false);
84
84
  setHasLookupSucceeded(false);
85
85
  setLookupErrorHTML(null);
86
- const cancelAbortController = new AbortController();
87
- setOnCancelLookup(() => () => cancelAbortController.abort());
86
+ setOnCancelLookup(() => () => {
87
+ if (isMounted.current) {
88
+ setIsLookingUp(false);
89
+ }
90
+ abortController.abort();
91
+ });
88
92
  // After certain amount of time, show the cancel button
89
93
  const isCancellableTimeout = setTimeout(() => {
90
- setIsCancellable(!cancelAbortController.signal.aborted);
94
+ setIsCancellable(!abortController.signal.aborted);
91
95
  }, 5000);
92
96
  const payload = {
93
97
  element,
@@ -99,21 +103,16 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
99
103
  };
100
104
  try {
101
105
  const [dataLookupResult, elementLookupResult] = await Promise.all([
102
- fetchLookup(element.dataLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortSignal),
103
- fetchLookup(element.elementLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortSignal),
106
+ fetchLookup(element.dataLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortController.signal),
107
+ fetchLookup(element.elementLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortController.signal),
104
108
  ]);
105
- // If the user clicked cancel, we stop showing lookup.
106
- if (cancelAbortController.signal.aborted) {
107
- setIsLookingUp(false);
108
- return;
109
- }
110
109
  mergeLookupData(newValue, dataLookupResult, elementLookupResult);
111
110
  if (isMounted.current) {
112
111
  setHasLookupSucceeded(true);
113
112
  }
114
113
  // After certain amount of time, hide the lookup succeeded message
115
114
  setTimeout(() => {
116
- if (isMounted.current && !abortSignal.aborted) {
115
+ if (isMounted.current) {
117
116
  setIsLookingUp(false);
118
117
  }
119
118
  }, 750);
@@ -122,8 +121,11 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
122
121
  if (!isMounted.current) {
123
122
  return;
124
123
  }
125
- if (abortSignal.aborted) {
124
+ if (abortController.signal.aborted) {
126
125
  console.log('Fetch aborted');
126
+ if (!continueLookupOnAbort) {
127
+ setIsLookingUp(false);
128
+ }
127
129
  return;
128
130
  }
129
131
  executeLookupFailed(element);
@@ -159,8 +161,16 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
159
161
  ? stringifyAutoLookupValue(autoLookupValue)
160
162
  : autoLookupValue;
161
163
  React.useEffect(() => {
164
+ if (!autoLookupValue) {
165
+ setIsLookingUp(false);
166
+ return;
167
+ }
162
168
  const abortController = new AbortController();
163
- triggerLookup(autoLookupValue, abortController.signal);
169
+ triggerLookup({
170
+ newValue: autoLookupValue,
171
+ abortController,
172
+ continueLookupOnAbort: true,
173
+ });
164
174
  return () => {
165
175
  abortController.abort();
166
176
  };
@@ -226,11 +236,6 @@ async function fetchLookup(formElementLookupId, organisationId, formsAppEnvironm
226
236
  console.log(`Returning... static data lookup not found for environment ${formsAppEnvironmentId}`);
227
237
  return {};
228
238
  }
229
- // currently only supporting TEXT input type
230
- if (formElementLookupEnvironment.inputType !== 'TEXT') {
231
- console.log('Returning... currently only supporting TEXT input type for static data lookups');
232
- return {};
233
- }
234
239
  const matchingRecord = (_a = formElementLookupEnvironment.records) === null || _a === void 0 ? void 0 : _a.find((r) => r.inputValue === inputValue);
235
240
  // insert prefill values
236
241
  return matchingRecord === null || matchingRecord === void 0 ? void 0 : matchingRecord.preFills.reduce((lookupResult, prefill) => {
@@ -1 +1 @@
1
- {"version":3,"file":"LookupNotification.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { formService } from '@oneblink/apps'\nimport { generateHeaders } from '@oneblink/apps/dist/services/fetch'\n\nimport useIsOffline from '../../hooks/useIsOffline'\nimport OnLoading from './OnLoading'\nimport generateDefaultData from '../../services/generate-default-data'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport useInjectPages from '../../hooks/useInjectPages'\nimport useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'\nimport useExecutedLookupCallback from '../../hooks/useExecutedLookupCallback'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useIsMounted from '../../hooks/useIsMounted'\nimport { FormElementLookupHandler } from '../../types/form'\n\ntype FetchLookupPayload = {\n element: FormTypes.LookupFormElement\n definition: FormTypes.Form\n submission: SubmissionTypes.S3SubmissionData['submission']\n}\ntype Props = {\n autoLookupValue?: unknown\n stringifyAutoLookupValue?: (autoLookupValue: unknown) => string\n element: FormTypes.LookupFormElement\n onLookup: FormElementLookupHandler\n children: React.ReactNode\n}\n\nfunction LookupNotificationComponent({\n autoLookupValue,\n stringifyAutoLookupValue,\n element,\n onLookup,\n children,\n}: Props) {\n const isMounted = useIsMounted()\n const isOffline = useIsOffline()\n const definition = useFormDefinition()\n const injectPagesAfter = useInjectPages()\n const { executedLookup, executeLookupFailed } = useExecutedLookupCallback()\n\n const [onCancelLookup, setOnCancelLookup] = React.useState<\n (() => void) | undefined\n >(undefined)\n const [isLookingUp, setIsLookingUp] = React.useState(false)\n const [hasLookupFailed, setHasLookupFailed] = React.useState(false)\n const [hasLookupSucceeded, setHasLookupSucceeded] = React.useState(false)\n const [isCancellable, setIsCancellable] = React.useState(false)\n const [isDisabled, setIsDisabled] = React.useState(false)\n const [lookupErrorHTML, setLookupErrorHTML] = React.useState<string | null>(\n null,\n )\n const formIsReadOnly = useFormIsReadOnly()\n const { formSubmissionModel: model } = useFormSubmissionModel()\n\n const mergeLookupData = React.useCallback(\n (\n newValue: unknown,\n dataLookupResult: SubmissionTypes.S3SubmissionData['submission'],\n elementLookupResult: FormTypes.FormElement[],\n ) => {\n if (elementLookupResult) {\n if (elementLookupResult[0] && elementLookupResult[0].type === 'page') {\n injectPagesAfter(\n element,\n elementLookupResult as FormTypes.PageElement[],\n dataLookupResult,\n )\n return\n }\n }\n\n onLookup(({ submission, elements }) => {\n let allElements = elements\n if (Array.isArray(elementLookupResult)) {\n const indexOfElement = elements.findIndex(\n ({ id }) => id === element.id,\n )\n if (indexOfElement === -1) {\n console.log('Could not find element', element)\n } else {\n // Filter out already injected elements\n allElements = elements.filter(\n // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n (e) => e.injectedByElementId !== element.id,\n )\n allElements.splice(\n indexOfElement + 1,\n 0,\n ...elementLookupResult.map((e) => {\n // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n e.injectedByElementId = element.id\n return e\n }),\n )\n }\n }\n\n return {\n elements: allElements,\n submission: generateDefaultData(allElements, {\n ...submission,\n [element.name]: newValue,\n ...dataLookupResult,\n }),\n }\n })\n },\n [element, injectPagesAfter, onLookup],\n )\n\n const triggerLookup = React.useCallback(\n async (newValue: unknown, abortSignal: AbortSignal) => {\n // No lookups for read only forms\n if (formIsReadOnly) return\n // if the element triggering the lookup has no value..\n // ..return and do nothing\n if (newValue === undefined || newValue === null) return\n\n setIsLookingUp(true)\n\n if (isOffline) {\n setHasLookupFailed(true)\n return\n }\n\n executedLookup(element)\n setIsDisabled(true)\n setIsCancellable(false)\n setHasLookupFailed(false)\n setHasLookupSucceeded(false)\n setLookupErrorHTML(null)\n\n const cancelAbortController = new AbortController()\n setOnCancelLookup(() => () => cancelAbortController.abort())\n\n // After certain amount of time, show the cancel button\n const isCancellableTimeout = setTimeout(() => {\n setIsCancellable(!cancelAbortController.signal.aborted)\n }, 5000)\n\n const payload: FetchLookupPayload = {\n element,\n definition,\n submission: {\n ...model,\n [element.name]: newValue,\n },\n }\n\n try {\n const [dataLookupResult, elementLookupResult] = await Promise.all([\n fetchLookup(\n element.dataLookupId,\n definition?.organisationId,\n definition?.formsAppEnvironmentId,\n payload,\n abortSignal,\n ),\n fetchLookup(\n element.elementLookupId,\n definition?.organisationId,\n definition?.formsAppEnvironmentId,\n payload,\n abortSignal,\n ),\n ])\n\n // If the user clicked cancel, we stop showing lookup.\n if (cancelAbortController.signal.aborted) {\n setIsLookingUp(false)\n return\n }\n\n mergeLookupData(newValue, dataLookupResult, elementLookupResult)\n\n if (isMounted.current) {\n setHasLookupSucceeded(true)\n }\n\n // After certain amount of time, hide the lookup succeeded message\n setTimeout(() => {\n if (isMounted.current && !abortSignal.aborted) {\n setIsLookingUp(false)\n }\n }, 750)\n } catch (error) {\n if (!isMounted.current) {\n return\n }\n\n if (abortSignal.aborted) {\n console.log('Fetch aborted')\n return\n }\n\n executeLookupFailed(element)\n\n setHasLookupFailed(true)\n setLookupErrorHTML(\n typeof error === 'string'\n ? error\n : 'It looks like something went wrong.<br/>Please try again.<br />If the issue continues, please contact support.',\n )\n } finally {\n clearTimeout(isCancellableTimeout)\n if (isMounted.current) {\n setIsDisabled(false)\n setOnCancelLookup(undefined)\n }\n }\n },\n [\n definition,\n element,\n executeLookupFailed,\n executedLookup,\n formIsReadOnly,\n isMounted,\n isOffline,\n mergeLookupData,\n model,\n ],\n )\n\n // For certain elements, do not add click event\n // instead, watch model for changes and trigger lookup function.\n // We add this stringify function here to allow the value to be\n // an object which may have a reference change, but the values\n // have not changed. e.g. the 'location' element's value\n const autoLookupValueString = stringifyAutoLookupValue\n ? stringifyAutoLookupValue(autoLookupValue)\n : autoLookupValue\n React.useEffect(() => {\n const abortController = new AbortController()\n triggerLookup(autoLookupValue, abortController.signal)\n return () => {\n abortController.abort()\n }\n // Wants to use \"triggerLookup\" as a dependency,\n // however, this will change on any change made on any\n // element. Checking if \"value\" has changed is enough\n // to trigger a lookup when the correct dependencies change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoLookupValueString])\n\n const contextValue = React.useMemo(\n () => ({\n isLookup: true,\n isDisabled,\n onLookup: triggerLookup,\n }),\n [isDisabled, triggerLookup],\n )\n\n return (\n <LookupNotificationContext.Provider value={contextValue}>\n {children}\n <div\n className={clsx('ob-lookup__notification', {\n 'is-looking-up': isLookingUp,\n 'is-extended':\n hasLookupFailed || (isCancellable && !hasLookupSucceeded),\n })}\n >\n <div className=\"notification has-margin-top-7 has-text-centered\">\n {hasLookupFailed && (\n <>\n <button\n type=\"button\"\n className=\"delete fade-in\"\n onClick={() => setIsLookingUp(false)}\n />\n\n <div>\n {isOffline ? (\n <div>\n <i className=\"material-icons fade-in has-text-warning\">\n wifi_off\n </i>\n <p className=\"fade-in\">\n It looks like you&apos;re offline. Please try again when\n connectivity is restored.\n </p>\n </div>\n ) : (\n <div>\n <i className=\"material-icons fade-in has-text-danger\">\n error_outline\n </i>\n <p\n className=\"fade-in\"\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html: lookupErrorHTML || '',\n }}\n />\n </div>\n )}\n </div>\n </>\n )}\n\n {hasLookupSucceeded && (\n <i className=\"material-icons has-text-success fade-in\">\n check_circle_outline\n </i>\n )}\n\n {!hasLookupSucceeded && !hasLookupFailed && <OnLoading small />}\n\n {isCancellable && !hasLookupSucceeded && !hasLookupFailed && (\n <div className=\"has-margin-top-5 fade-in\">\n <p>Taking longer than expected?</p>\n <button\n type=\"button\"\n className=\"button has-margin-top-8\"\n onClick={onCancelLookup}\n >\n Cancel\n </button>\n </div>\n )}\n </div>\n </div>\n </LookupNotificationContext.Provider>\n )\n}\n\nexport default function LookupNotification(props: Props) {\n if (props.element.isDataLookup || props.element.isElementLookup) {\n return <LookupNotificationComponent {...props} />\n }\n\n return <>{props.children}</>\n}\n\nasync function fetchLookup(\n formElementLookupId: number | undefined,\n organisationId: string | undefined,\n formsAppEnvironmentId: number | undefined,\n payload: FetchLookupPayload,\n abortSignal: AbortSignal,\n) {\n if (\n typeof formElementLookupId !== 'number' ||\n !organisationId ||\n typeof formsAppEnvironmentId !== 'number'\n ) {\n return\n }\n\n console.log(\n 'Attempting to retrieve form element lookup for id:',\n formElementLookupId,\n )\n const formElementLookup = await formService.getFormElementLookupById(\n organisationId,\n formsAppEnvironmentId,\n formElementLookupId,\n )\n\n if (!formElementLookup) {\n console.log(\n 'Could not find form element lookup configuration for id:',\n formElementLookupId,\n formElementLookup,\n )\n throw new Error('Could not find element lookup configuration')\n }\n\n if (formElementLookup.type === 'STATIC_DATA') {\n const elementName = payload.element.name\n const inputValue = payload.submission[elementName]\n const formElementLookupEnvironment = formElementLookup.environments.find(\n (e) => e.formsAppEnvironmentId === formsAppEnvironmentId,\n )\n\n if (!formElementLookupEnvironment) {\n console.log(\n `Returning... static data lookup not found for environment ${formsAppEnvironmentId}`,\n )\n return {}\n }\n\n // currently only supporting TEXT input type\n if (formElementLookupEnvironment.inputType !== 'TEXT') {\n console.log(\n 'Returning... currently only supporting TEXT input type for static data lookups',\n )\n return {}\n }\n\n const matchingRecord = formElementLookupEnvironment.records?.find(\n (r) => r.inputValue === inputValue,\n )\n\n // insert prefill values\n return matchingRecord?.preFills.reduce<\n SubmissionTypes.S3SubmissionData['submission']\n >((lookupResult, prefill) => {\n switch (prefill.type) {\n case 'TEXT':\n lookupResult[prefill.formElementName] = prefill.text\n break\n case 'NUMBER':\n lookupResult[prefill.formElementName] = prefill.number\n break\n case 'CLEAR':\n lookupResult[prefill.formElementName] = undefined\n break\n }\n return lookupResult\n }, {})\n }\n\n if (!formElementLookup.url) {\n console.log(\n 'Could not find URL for form element lookup for id:',\n formElementLookupId,\n formElementLookup,\n )\n throw new Error('Could not find element lookup configuration')\n }\n\n const headers = await generateHeaders()\n console.log(\n `Attempting a ${formElementLookup.type} lookup request to:`,\n formElementLookup.url,\n )\n const response = await fetch(formElementLookup.url, {\n method: 'POST',\n headers,\n body: JSON.stringify(payload),\n signal: abortSignal,\n })\n\n const data = await response.json()\n console.log(\n 'Response from lookup to: POST',\n formElementLookup.url,\n response.status,\n data,\n )\n\n if (!response.ok) {\n Sentry.captureException(\n new Error(`Received ${response.status} status code from lookup`),\n )\n if (response.status === 400 && data && data.message) {\n throw data.message\n }\n throw new Error('Invalid response from lookup')\n }\n\n return data\n}\n"]}
1
+ {"version":3,"file":"LookupNotification.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AAEpE,OAAO,YAAY,MAAM,0BAA0B,CAAA;AACnD,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,EACL,yBAAyB,GAE1B,MAAM,mCAAmC,CAAA;AAC1C,OAAO,iBAAiB,MAAM,+BAA+B,CAAA;AAC7D,OAAO,cAAc,MAAM,4BAA4B,CAAA;AACvD,OAAO,sBAAsB,MAAM,2CAA2C,CAAA;AAC9E,OAAO,yBAAyB,MAAM,uCAAuC,CAAA;AAC7E,OAAO,iBAAiB,MAAM,+BAA+B,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,YAAY,MAAM,0BAA0B,CAAA;AAgBnD,SAAS,2BAA2B,CAAC,EACnC,eAAe,EACf,wBAAwB,EACxB,OAAO,EACP,QAAQ,EACR,QAAQ,GACF;IACN,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,UAAU,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,gBAAgB,GAAG,cAAc,EAAE,CAAA;IACzC,MAAM,EAAE,cAAc,EAAE,mBAAmB,EAAE,GAAG,yBAAyB,EAAE,CAAA;IAE3E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAExD,SAAS,CAAC,CAAA;IACZ,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC1D,IAAI,CACL,CAAA;IACD,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAE/D,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,CACE,QAAiB,EACjB,gBAAgE,EAChE,mBAA4C,EAC5C,EAAE;QACF,IAAI,mBAAmB,EAAE;YACvB,IAAI,mBAAmB,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE;gBACpE,gBAAgB,CACd,OAAO,EACP,mBAA8C,EAC9C,gBAAgB,CACjB,CAAA;gBACD,OAAM;aACP;SACF;QAED,QAAQ,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;YACpC,IAAI,WAAW,GAAG,QAAQ,CAAA;YAC1B,IAAI,KAAK,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE;gBACtC,MAAM,cAAc,GAAG,QAAQ,CAAC,SAAS,CACvC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAC9B,CAAA;gBACD,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE;oBACzB,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAA;iBAC/C;qBAAM;oBACL,uCAAuC;oBACvC,WAAW,GAAG,QAAQ,CAAC,MAAM;oBAC3B,yFAAyF;oBACzF,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,KAAK,OAAO,CAAC,EAAE,CAC5C,CAAA;oBACD,WAAW,CAAC,MAAM,CAChB,cAAc,GAAG,CAAC,EAClB,CAAC,EACD,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;wBAC/B,yFAAyF;wBACzF,CAAC,CAAC,mBAAmB,GAAG,OAAO,CAAC,EAAE,CAAA;wBAClC,OAAO,CAAC,CAAA;oBACV,CAAC,CAAC,CACH,CAAA;iBACF;aACF;YAED,OAAO;gBACL,QAAQ,EAAE,WAAW;gBACrB,UAAU,EAAE,mBAAmB,CAAC,WAAW,EAAE;oBAC3C,GAAG,UAAU;oBACb,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,QAAQ;oBACxB,GAAG,gBAAgB;iBACpB,CAAC;aACH,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CACtC,CAAA;IAED,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAGrC,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,qBAAqB,EAAE,EAAE,EAAE;QAC7D,iCAAiC;QACjC,IAAI,cAAc;YAAE,OAAM;QAC1B,sDAAsD;QACtD,0BAA0B;QAC1B,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI;YAAE,OAAM;QAEvD,cAAc,CAAC,IAAI,CAAC,CAAA;QAEpB,IAAI,SAAS,EAAE;YACb,kBAAkB,CAAC,IAAI,CAAC,CAAA;YACxB,OAAM;SACP;QAED,cAAc,CAAC,OAAO,CAAC,CAAA;QACvB,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,gBAAgB,CAAC,KAAK,CAAC,CAAA;QACvB,kBAAkB,CAAC,KAAK,CAAC,CAAA;QACzB,qBAAqB,CAAC,KAAK,CAAC,CAAA;QAC5B,kBAAkB,CAAC,IAAI,CAAC,CAAA;QACxB,iBAAiB,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;YAC3B,IAAI,SAAS,CAAC,OAAO,EAAE;gBACrB,cAAc,CAAC,KAAK,CAAC,CAAA;aACtB;YACD,eAAe,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,CAAC,CAAA;QAEF,uDAAuD;QACvD,MAAM,oBAAoB,GAAG,UAAU,CAAC,GAAG,EAAE;YAC3C,gBAAgB,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACnD,CAAC,EAAE,IAAI,CAAC,CAAA;QAER,MAAM,OAAO,GAAuB;YAClC,OAAO;YACP,UAAU;YACV,UAAU,EAAE;gBACV,GAAG,KAAK;gBACR,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,QAAQ;aACzB;SACF,CAAA;QAED,IAAI;YACF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChE,WAAW,CACT,OAAO,CAAC,YAAY,EACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,cAAc,EAC1B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,qBAAqB,EACjC,OAAO,EACP,eAAe,CAAC,MAAM,CACvB;gBACD,WAAW,CACT,OAAO,CAAC,eAAe,EACvB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,cAAc,EAC1B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,qBAAqB,EACjC,OAAO,EACP,eAAe,CAAC,MAAM,CACvB;aACF,CAAC,CAAA;YAEF,eAAe,CAAC,QAAQ,EAAE,gBAAgB,EAAE,mBAAmB,CAAC,CAAA;YAEhE,IAAI,SAAS,CAAC,OAAO,EAAE;gBACrB,qBAAqB,CAAC,IAAI,CAAC,CAAA;aAC5B;YAED,kEAAkE;YAClE,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,SAAS,CAAC,OAAO,EAAE;oBACrB,cAAc,CAAC,KAAK,CAAC,CAAA;iBACtB;YACH,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;gBACtB,OAAM;aACP;YAED,IAAI,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE;gBAClC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAA;gBAC5B,IAAI,CAAC,qBAAqB,EAAE;oBAC1B,cAAc,CAAC,KAAK,CAAC,CAAA;iBACtB;gBACD,OAAM;aACP;YAED,mBAAmB,CAAC,OAAO,CAAC,CAAA;YAE5B,kBAAkB,CAAC,IAAI,CAAC,CAAA;YACxB,kBAAkB,CAChB,OAAO,KAAK,KAAK,QAAQ;gBACvB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,gHAAgH,CACrH,CAAA;SACF;gBAAS;YACR,YAAY,CAAC,oBAAoB,CAAC,CAAA;YAClC,IAAI,SAAS,CAAC,OAAO,EAAE;gBACrB,aAAa,CAAC,KAAK,CAAC,CAAA;gBACpB,iBAAiB,CAAC,SAAS,CAAC,CAAA;aAC7B;SACF;IACH,CAAC,EACD;QACE,UAAU;QACV,OAAO;QACP,mBAAmB;QACnB,cAAc;QACd,cAAc;QACd,SAAS;QACT,SAAS;QACT,eAAe;QACf,KAAK;KACN,CACF,CAAA;IAED,+CAA+C;IAC/C,gEAAgE;IAChE,+DAA+D;IAC/D,8DAA8D;IAC9D,wDAAwD;IACxD,MAAM,qBAAqB,GAAG,wBAAwB;QACpD,CAAC,CAAC,wBAAwB,CAAC,eAAe,CAAC;QAC3C,CAAC,CAAC,eAAe,CAAA;IACnB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,eAAe,EAAE;YACpB,cAAc,CAAC,KAAK,CAAC,CAAA;YACrB,OAAM;SACP;QACD,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAA;QAC7C,aAAa,CAAC;YACZ,QAAQ,EAAE,eAAe;YACzB,eAAe;YACf,qBAAqB,EAAE,IAAI;SAC5B,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,CAAA;QACD,gDAAgD;QAChD,sDAAsD;QACtD,qDAAqD;QACrD,2DAA2D;QAC3D,uDAAuD;IACzD,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAA;IAE3B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,IAAI;QACd,UAAU;QACV,QAAQ,EAAE,aAAa;KACxB,CAAC,EACF,CAAC,UAAU,EAAE,aAAa,CAAC,CAC5B,CAAA;IAED,OAAO,CACL,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QACpD,QAAQ;QACT,6BACE,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE;gBACzC,eAAe,EAAE,WAAW;gBAC5B,aAAa,EACX,eAAe,IAAI,CAAC,aAAa,IAAI,CAAC,kBAAkB,CAAC;aAC5D,CAAC;YAEF,6BAAK,SAAS,EAAC,iDAAiD;gBAC7D,eAAe,IAAI,CAClB;oBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GACpC;oBAEF,iCACG,SAAS,CAAC,CAAC,CAAC,CACX;wBACE,2BAAG,SAAS,EAAC,yCAAyC,eAElD;wBACJ,2BAAG,SAAS,EAAC,SAAS,oFAGlB,CACA,CACP,CAAC,CAAC,CAAC,CACF;wBACE,2BAAG,SAAS,EAAC,wCAAwC,oBAEjD;wBACJ,2BACE,SAAS,EAAC,SAAS;4BACnB,2CAA2C;4BAC3C,uBAAuB,EAAE;gCACvB,MAAM,EAAE,eAAe,IAAI,EAAE;6BAC9B,GACD,CACE,CACP,CACG,CACL,CACJ;gBAEA,kBAAkB,IAAI,CACrB,2BAAG,SAAS,EAAC,yCAAyC,2BAElD,CACL;gBAEA,CAAC,kBAAkB,IAAI,CAAC,eAAe,IAAI,oBAAC,SAAS,IAAC,KAAK,SAAG;gBAE9D,aAAa,IAAI,CAAC,kBAAkB,IAAI,CAAC,eAAe,IAAI,CAC3D,6BAAK,SAAS,EAAC,0BAA0B;oBACvC,8DAAmC;oBACnC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,cAAc,aAGhB,CACL,CACP,CACG,CACF,CAC6B,CACtC,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAY;IACrD,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE;QAC/D,OAAO,oBAAC,2BAA2B,OAAK,KAAK,GAAI,CAAA;KAClD;IAED,OAAO,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAAA;AAC9B,CAAC;AAED,KAAK,UAAU,WAAW,CACxB,mBAAuC,EACvC,cAAkC,EAClC,qBAAyC,EACzC,OAA2B,EAC3B,WAAwB;;IAExB,IACE,OAAO,mBAAmB,KAAK,QAAQ;QACvC,CAAC,cAAc;QACf,OAAO,qBAAqB,KAAK,QAAQ,EACzC;QACA,OAAM;KACP;IAED,OAAO,CAAC,GAAG,CACT,oDAAoD,EACpD,mBAAmB,CACpB,CAAA;IACD,MAAM,iBAAiB,GAAG,MAAM,WAAW,CAAC,wBAAwB,CAClE,cAAc,EACd,qBAAqB,EACrB,mBAAmB,CACpB,CAAA;IAED,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,CAAC,GAAG,CACT,0DAA0D,EAC1D,mBAAmB,EACnB,iBAAiB,CAClB,CAAA;QACD,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;KAC/D;IAED,IAAI,iBAAiB,CAAC,IAAI,KAAK,aAAa,EAAE;QAC5C,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAA;QACxC,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;QAClD,MAAM,4BAA4B,GAAG,iBAAiB,CAAC,YAAY,CAAC,IAAI,CACtE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,qBAAqB,KAAK,qBAAqB,CACzD,CAAA;QAED,IAAI,CAAC,4BAA4B,EAAE;YACjC,OAAO,CAAC,GAAG,CACT,6DAA6D,qBAAqB,EAAE,CACrF,CAAA;YACD,OAAO,EAAE,CAAA;SACV;QAED,MAAM,cAAc,GAAG,MAAA,4BAA4B,CAAC,OAAO,0CAAE,IAAI,CAC/D,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,UAAU,CACnC,CAAA;QAED,wBAAwB;QACxB,OAAO,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,QAAQ,CAAC,MAAM,CAEpC,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE;YAC1B,QAAQ,OAAO,CAAC,IAAI,EAAE;gBACpB,KAAK,MAAM;oBACT,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,IAAI,CAAA;oBACpD,MAAK;gBACP,KAAK,QAAQ;oBACX,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,OAAO,CAAC,MAAM,CAAA;oBACtD,MAAK;gBACP,KAAK,OAAO;oBACV,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,GAAG,SAAS,CAAA;oBACjD,MAAK;aACR;YACD,OAAO,YAAY,CAAA;QACrB,CAAC,EAAE,EAAE,CAAC,CAAA;KACP;IAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE;QAC1B,OAAO,CAAC,GAAG,CACT,oDAAoD,EACpD,mBAAmB,EACnB,iBAAiB,CAClB,CAAA;QACD,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;KAC/D;IAED,MAAM,OAAO,GAAG,MAAM,eAAe,EAAE,CAAA;IACvC,OAAO,CAAC,GAAG,CACT,gBAAgB,iBAAiB,CAAC,IAAI,qBAAqB,EAC3D,iBAAiB,CAAC,GAAG,CACtB,CAAA;IACD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,iBAAiB,CAAC,GAAG,EAAE;QAClD,MAAM,EAAE,MAAM;QACd,OAAO;QACP,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;QAC7B,MAAM,EAAE,WAAW;KACpB,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;IAClC,OAAO,CAAC,GAAG,CACT,+BAA+B,EAC/B,iBAAiB,CAAC,GAAG,EACrB,QAAQ,CAAC,MAAM,EACf,IAAI,CACL,CAAA;IAED,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;QAChB,MAAM,CAAC,gBAAgB,CACrB,IAAI,KAAK,CAAC,YAAY,QAAQ,CAAC,MAAM,0BAA0B,CAAC,CACjE,CAAA;QACD,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;YACnD,MAAM,IAAI,CAAC,OAAO,CAAA;SACnB;QACD,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAA;KAChD;IAED,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { formService } from '@oneblink/apps'\nimport { generateHeaders } from '@oneblink/apps/dist/services/fetch'\n\nimport useIsOffline from '../../hooks/useIsOffline'\nimport OnLoading from './OnLoading'\nimport generateDefaultData from '../../services/generate-default-data'\nimport {\n LookupNotificationContext,\n LookupNotificationContextValue,\n} from '../../hooks/useLookupNotification'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport useInjectPages from '../../hooks/useInjectPages'\nimport useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'\nimport useExecutedLookupCallback from '../../hooks/useExecutedLookupCallback'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useIsMounted from '../../hooks/useIsMounted'\nimport { FormElementLookupHandler } from '../../types/form'\n\ntype FetchLookupPayload = {\n element: FormTypes.LookupFormElement\n definition: FormTypes.Form\n submission: SubmissionTypes.S3SubmissionData['submission']\n}\ntype Props = {\n autoLookupValue?: unknown\n stringifyAutoLookupValue?: (autoLookupValue: unknown) => string\n element: FormTypes.LookupFormElement\n onLookup: FormElementLookupHandler\n children: React.ReactNode\n}\n\nfunction LookupNotificationComponent({\n autoLookupValue,\n stringifyAutoLookupValue,\n element,\n onLookup,\n children,\n}: Props) {\n const isMounted = useIsMounted()\n const isOffline = useIsOffline()\n const definition = useFormDefinition()\n const injectPagesAfter = useInjectPages()\n const { executedLookup, executeLookupFailed } = useExecutedLookupCallback()\n\n const [onCancelLookup, setOnCancelLookup] = React.useState<\n (() => void) | undefined\n >(undefined)\n const [isLookingUp, setIsLookingUp] = React.useState(false)\n const [hasLookupFailed, setHasLookupFailed] = React.useState(false)\n const [hasLookupSucceeded, setHasLookupSucceeded] = React.useState(false)\n const [isCancellable, setIsCancellable] = React.useState(false)\n const [isDisabled, setIsDisabled] = React.useState(false)\n const [lookupErrorHTML, setLookupErrorHTML] = React.useState<string | null>(\n null,\n )\n const formIsReadOnly = useFormIsReadOnly()\n const { formSubmissionModel: model } = useFormSubmissionModel()\n\n const mergeLookupData = React.useCallback(\n (\n newValue: unknown,\n dataLookupResult: SubmissionTypes.S3SubmissionData['submission'],\n elementLookupResult: FormTypes.FormElement[],\n ) => {\n if (elementLookupResult) {\n if (elementLookupResult[0] && elementLookupResult[0].type === 'page') {\n injectPagesAfter(\n element,\n elementLookupResult as FormTypes.PageElement[],\n dataLookupResult,\n )\n return\n }\n }\n\n onLookup(({ submission, elements }) => {\n let allElements = elements\n if (Array.isArray(elementLookupResult)) {\n const indexOfElement = elements.findIndex(\n ({ id }) => id === element.id,\n )\n if (indexOfElement === -1) {\n console.log('Could not find element', element)\n } else {\n // Filter out already injected elements\n allElements = elements.filter(\n // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n (e) => e.injectedByElementId !== element.id,\n )\n allElements.splice(\n indexOfElement + 1,\n 0,\n ...elementLookupResult.map((e) => {\n // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n e.injectedByElementId = element.id\n return e\n }),\n )\n }\n }\n\n return {\n elements: allElements,\n submission: generateDefaultData(allElements, {\n ...submission,\n [element.name]: newValue,\n ...dataLookupResult,\n }),\n }\n })\n },\n [element, injectPagesAfter, onLookup],\n )\n\n const triggerLookup = React.useCallback<\n LookupNotificationContextValue['onLookup']\n >(\n async ({ newValue, abortController, continueLookupOnAbort }) => {\n // No lookups for read only forms\n if (formIsReadOnly) return\n // if the element triggering the lookup has no value..\n // ..return and do nothing\n if (newValue === undefined || newValue === null) return\n\n setIsLookingUp(true)\n\n if (isOffline) {\n setHasLookupFailed(true)\n return\n }\n\n executedLookup(element)\n setIsDisabled(true)\n setIsCancellable(false)\n setHasLookupFailed(false)\n setHasLookupSucceeded(false)\n setLookupErrorHTML(null)\n setOnCancelLookup(() => () => {\n if (isMounted.current) {\n setIsLookingUp(false)\n }\n abortController.abort()\n })\n\n // After certain amount of time, show the cancel button\n const isCancellableTimeout = setTimeout(() => {\n setIsCancellable(!abortController.signal.aborted)\n }, 5000)\n\n const payload: FetchLookupPayload = {\n element,\n definition,\n submission: {\n ...model,\n [element.name]: newValue,\n },\n }\n\n try {\n const [dataLookupResult, elementLookupResult] = await Promise.all([\n fetchLookup(\n element.dataLookupId,\n definition?.organisationId,\n definition?.formsAppEnvironmentId,\n payload,\n abortController.signal,\n ),\n fetchLookup(\n element.elementLookupId,\n definition?.organisationId,\n definition?.formsAppEnvironmentId,\n payload,\n abortController.signal,\n ),\n ])\n\n mergeLookupData(newValue, dataLookupResult, elementLookupResult)\n\n if (isMounted.current) {\n setHasLookupSucceeded(true)\n }\n\n // After certain amount of time, hide the lookup succeeded message\n setTimeout(() => {\n if (isMounted.current) {\n setIsLookingUp(false)\n }\n }, 750)\n } catch (error) {\n if (!isMounted.current) {\n return\n }\n\n if (abortController.signal.aborted) {\n console.log('Fetch aborted')\n if (!continueLookupOnAbort) {\n setIsLookingUp(false)\n }\n return\n }\n\n executeLookupFailed(element)\n\n setHasLookupFailed(true)\n setLookupErrorHTML(\n typeof error === 'string'\n ? error\n : 'It looks like something went wrong.<br/>Please try again.<br />If the issue continues, please contact support.',\n )\n } finally {\n clearTimeout(isCancellableTimeout)\n if (isMounted.current) {\n setIsDisabled(false)\n setOnCancelLookup(undefined)\n }\n }\n },\n [\n definition,\n element,\n executeLookupFailed,\n executedLookup,\n formIsReadOnly,\n isMounted,\n isOffline,\n mergeLookupData,\n model,\n ],\n )\n\n // For certain elements, do not add click event\n // instead, watch model for changes and trigger lookup function.\n // We add this stringify function here to allow the value to be\n // an object which may have a reference change, but the values\n // have not changed. e.g. the 'location' element's value\n const autoLookupValueString = stringifyAutoLookupValue\n ? stringifyAutoLookupValue(autoLookupValue)\n : autoLookupValue\n React.useEffect(() => {\n if (!autoLookupValue) {\n setIsLookingUp(false)\n return\n }\n const abortController = new AbortController()\n triggerLookup({\n newValue: autoLookupValue,\n abortController,\n continueLookupOnAbort: true,\n })\n return () => {\n abortController.abort()\n }\n // Wants to use \"triggerLookup\" as a dependency,\n // however, this will change on any change made on any\n // element. Checking if \"value\" has changed is enough\n // to trigger a lookup when the correct dependencies change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoLookupValueString])\n\n const contextValue = React.useMemo(\n () => ({\n isLookup: true,\n isDisabled,\n onLookup: triggerLookup,\n }),\n [isDisabled, triggerLookup],\n )\n\n return (\n <LookupNotificationContext.Provider value={contextValue}>\n {children}\n <div\n className={clsx('ob-lookup__notification', {\n 'is-looking-up': isLookingUp,\n 'is-extended':\n hasLookupFailed || (isCancellable && !hasLookupSucceeded),\n })}\n >\n <div className=\"notification has-margin-top-7 has-text-centered\">\n {hasLookupFailed && (\n <>\n <button\n type=\"button\"\n className=\"delete fade-in\"\n onClick={() => setIsLookingUp(false)}\n />\n\n <div>\n {isOffline ? (\n <div>\n <i className=\"material-icons fade-in has-text-warning\">\n wifi_off\n </i>\n <p className=\"fade-in\">\n It looks like you&apos;re offline. Please try again when\n connectivity is restored.\n </p>\n </div>\n ) : (\n <div>\n <i className=\"material-icons fade-in has-text-danger\">\n error_outline\n </i>\n <p\n className=\"fade-in\"\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html: lookupErrorHTML || '',\n }}\n />\n </div>\n )}\n </div>\n </>\n )}\n\n {hasLookupSucceeded && (\n <i className=\"material-icons has-text-success fade-in\">\n check_circle_outline\n </i>\n )}\n\n {!hasLookupSucceeded && !hasLookupFailed && <OnLoading small />}\n\n {isCancellable && !hasLookupSucceeded && !hasLookupFailed && (\n <div className=\"has-margin-top-5 fade-in\">\n <p>Taking longer than expected?</p>\n <button\n type=\"button\"\n className=\"button has-margin-top-8\"\n onClick={onCancelLookup}\n >\n Cancel\n </button>\n </div>\n )}\n </div>\n </div>\n </LookupNotificationContext.Provider>\n )\n}\n\nexport default function LookupNotification(props: Props) {\n if (props.element.isDataLookup || props.element.isElementLookup) {\n return <LookupNotificationComponent {...props} />\n }\n\n return <>{props.children}</>\n}\n\nasync function fetchLookup(\n formElementLookupId: number | undefined,\n organisationId: string | undefined,\n formsAppEnvironmentId: number | undefined,\n payload: FetchLookupPayload,\n abortSignal: AbortSignal,\n) {\n if (\n typeof formElementLookupId !== 'number' ||\n !organisationId ||\n typeof formsAppEnvironmentId !== 'number'\n ) {\n return\n }\n\n console.log(\n 'Attempting to retrieve form element lookup for id:',\n formElementLookupId,\n )\n const formElementLookup = await formService.getFormElementLookupById(\n organisationId,\n formsAppEnvironmentId,\n formElementLookupId,\n )\n\n if (!formElementLookup) {\n console.log(\n 'Could not find form element lookup configuration for id:',\n formElementLookupId,\n formElementLookup,\n )\n throw new Error('Could not find element lookup configuration')\n }\n\n if (formElementLookup.type === 'STATIC_DATA') {\n const elementName = payload.element.name\n const inputValue = payload.submission[elementName]\n const formElementLookupEnvironment = formElementLookup.environments.find(\n (e) => e.formsAppEnvironmentId === formsAppEnvironmentId,\n )\n\n if (!formElementLookupEnvironment) {\n console.log(\n `Returning... static data lookup not found for environment ${formsAppEnvironmentId}`,\n )\n return {}\n }\n\n const matchingRecord = formElementLookupEnvironment.records?.find(\n (r) => r.inputValue === inputValue,\n )\n\n // insert prefill values\n return matchingRecord?.preFills.reduce<\n SubmissionTypes.S3SubmissionData['submission']\n >((lookupResult, prefill) => {\n switch (prefill.type) {\n case 'TEXT':\n lookupResult[prefill.formElementName] = prefill.text\n break\n case 'NUMBER':\n lookupResult[prefill.formElementName] = prefill.number\n break\n case 'CLEAR':\n lookupResult[prefill.formElementName] = undefined\n break\n }\n return lookupResult\n }, {})\n }\n\n if (!formElementLookup.url) {\n console.log(\n 'Could not find URL for form element lookup for id:',\n formElementLookupId,\n formElementLookup,\n )\n throw new Error('Could not find element lookup configuration')\n }\n\n const headers = await generateHeaders()\n console.log(\n `Attempting a ${formElementLookup.type} lookup request to:`,\n formElementLookup.url,\n )\n const response = await fetch(formElementLookup.url, {\n method: 'POST',\n headers,\n body: JSON.stringify(payload),\n signal: abortSignal,\n })\n\n const data = await response.json()\n console.log(\n 'Response from lookup to: POST',\n formElementLookup.url,\n response.status,\n data,\n )\n\n if (!response.ok) {\n Sentry.captureException(\n new Error(`Received ${response.status} status code from lookup`),\n )\n if (response.status === 400 && data && data.message) {\n throw data.message\n }\n throw new Error('Invalid response from lookup')\n }\n\n return data\n}\n"]}
@@ -1,8 +1,12 @@
1
1
  import * as React from 'react';
2
- type LookupNotificationContextValue = {
2
+ export type LookupNotificationContextValue = {
3
3
  isLookup: boolean;
4
4
  isDisabled: boolean;
5
- onLookup: (value: unknown, abortSignal: AbortSignal) => Promise<void>;
5
+ onLookup: (options: {
6
+ newValue: unknown;
7
+ abortController: AbortController;
8
+ continueLookupOnAbort: boolean;
9
+ }) => Promise<void>;
6
10
  };
7
11
  export declare const LookupNotificationContext: React.Context<LookupNotificationContextValue>;
8
12
  export default function useLookupNotification(value: unknown): {
@@ -10,4 +14,3 @@ export default function useLookupNotification(value: unknown): {
10
14
  isLookup: boolean;
11
15
  isDisabled: boolean;
12
16
  };
13
- export {};
@@ -12,21 +12,34 @@ export default function useLookupNotification(value) {
12
12
  // We need it in an useEffect so that we can pass an abort controller
13
13
  // and have it aborted if the user clicks the lookup button again.
14
14
  const [lookupCount, setLookupCount] = React.useState(0);
15
+ // We use a ref here to keep the abort controller outside of the useEffect
16
+ // below. This way we can abort the lookup if the value changes while the
17
+ // lookup is running.
18
+ const abortControllerRef = React.useRef(null);
15
19
  React.useEffect(() => {
16
20
  if (lookupCount === 0) {
17
21
  return;
18
22
  }
19
- const abortController = new AbortController();
20
- onLookup(value, abortController.signal);
21
- return () => {
22
- abortController.abort();
23
- };
23
+ abortControllerRef.current = new AbortController();
24
+ onLookup({
25
+ newValue: value,
26
+ abortController: abortControllerRef.current,
27
+ continueLookupOnAbort: false,
28
+ });
24
29
  // Wants to use "onLookup" and "value" as dependencies,
25
30
  // however, these will change on any change made on any
26
31
  // element. Checking if "lookupCount" has changed is enough
27
32
  // to trigger a lookup when the correct dependencies change
28
33
  // eslint-disable-next-line react-hooks/exhaustive-deps
29
34
  }, [lookupCount]);
35
+ React.useEffect(() => {
36
+ const abortController = abortControllerRef.current;
37
+ if (abortController) {
38
+ return () => {
39
+ abortController.abort();
40
+ };
41
+ }
42
+ }, [value, lookupCount]);
30
43
  return {
31
44
  ...state,
32
45
  onLookup: React.useCallback(() => {
@@ -1 +1 @@
1
- {"version":3,"file":"useLookupNotification.js","sourceRoot":"","sources":["../../src/hooks/useLookupNotification.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,SAAS;CAChC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GACpC,KAAK,CAAC,aAAa,CAAiC,cAAc,CAAC,CAAA;AAErE,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAc;IAC1D,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IAE1E,qEAAqE;IACrE,mEAAmE;IACnE,qEAAqE;IACrE,kEAAkE;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,WAAW,KAAK,CAAC,EAAE;YACrB,OAAM;SACP;QACD,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAA;QAC7C,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QACvC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,CAAA;QACD,uDAAuD;QACvD,uDAAuD;QACvD,2DAA2D;QAC3D,2DAA2D;QAC3D,uDAAuD;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,OAAO;QACL,GAAG,KAAK;QACR,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;YAC/B,cAAc,CAAC,CAAC,kBAAkB,EAAE,EAAE,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAA;QAChE,CAAC,EAAE,EAAE,CAAC;KACP,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\n\ntype LookupNotificationContextValue = {\n isLookup: boolean\n isDisabled: boolean\n onLookup: (value: unknown, abortSignal: AbortSignal) => Promise<void>\n}\n\nconst defaultContext = {\n isLookup: false,\n isDisabled: false,\n onLookup: async () => undefined,\n}\n\nexport const LookupNotificationContext =\n React.createContext<LookupNotificationContextValue>(defaultContext)\n\nexport default function useLookupNotification(value: unknown) {\n const { onLookup, ...state } = React.useContext(LookupNotificationContext)\n\n // We use a number to trigger the lookup function so that we can have\n // the effect below run every time the onLookup function is called.\n // We need it in an useEffect so that we can pass an abort controller\n // and have it aborted if the user clicks the lookup button again.\n const [lookupCount, setLookupCount] = React.useState(0)\n\n React.useEffect(() => {\n if (lookupCount === 0) {\n return\n }\n const abortController = new AbortController()\n onLookup(value, abortController.signal)\n return () => {\n abortController.abort()\n }\n // Wants to use \"onLookup\" and \"value\" as dependencies,\n // however, these will change on any change made on any\n // element. Checking if \"lookupCount\" has changed is enough\n // to trigger a lookup when the correct dependencies change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [lookupCount])\n\n return {\n ...state,\n onLookup: React.useCallback(() => {\n setLookupCount((currentLookupCount) => currentLookupCount + 1)\n }, []),\n }\n}\n"]}
1
+ {"version":3,"file":"useLookupNotification.js","sourceRoot":"","sources":["../../src/hooks/useLookupNotification.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,SAAS;CAChC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GACpC,KAAK,CAAC,aAAa,CAAiC,cAAc,CAAC,CAAA;AAErE,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAc;IAC1D,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IAE1E,qEAAqE;IACrE,mEAAmE;IACnE,qEAAqE;IACrE,kEAAkE;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvD,0EAA0E;IAC1E,yEAAyE;IACzE,qBAAqB;IACrB,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAyB,IAAI,CAAC,CAAA;IAErE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,WAAW,KAAK,CAAC,EAAE;YACrB,OAAM;SACP;QACD,kBAAkB,CAAC,OAAO,GAAG,IAAI,eAAe,EAAE,CAAA;QAClD,QAAQ,CAAC;YACP,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,kBAAkB,CAAC,OAAO;YAC3C,qBAAqB,EAAE,KAAK;SAC7B,CAAC,CAAA;QACF,uDAAuD;QACvD,uDAAuD;QACvD,2DAA2D;QAC3D,2DAA2D;QAC3D,uDAAuD;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAA;QAClD,IAAI,eAAe,EAAE;YACnB,OAAO,GAAG,EAAE;gBACV,eAAe,CAAC,KAAK,EAAE,CAAA;YACzB,CAAC,CAAA;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;IAExB,OAAO;QACL,GAAG,KAAK;QACR,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;YAC/B,cAAc,CAAC,CAAC,kBAAkB,EAAE,EAAE,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAA;QAChE,CAAC,EAAE,EAAE,CAAC;KACP,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\n\nexport type LookupNotificationContextValue = {\n isLookup: boolean\n isDisabled: boolean\n onLookup: (options: {\n newValue: unknown\n abortController: AbortController\n continueLookupOnAbort: boolean\n }) => Promise<void>\n}\n\nconst defaultContext = {\n isLookup: false,\n isDisabled: false,\n onLookup: async () => undefined,\n}\n\nexport const LookupNotificationContext =\n React.createContext<LookupNotificationContextValue>(defaultContext)\n\nexport default function useLookupNotification(value: unknown) {\n const { onLookup, ...state } = React.useContext(LookupNotificationContext)\n\n // We use a number to trigger the lookup function so that we can have\n // the effect below run every time the onLookup function is called.\n // We need it in an useEffect so that we can pass an abort controller\n // and have it aborted if the user clicks the lookup button again.\n const [lookupCount, setLookupCount] = React.useState(0)\n\n // We use a ref here to keep the abort controller outside of the useEffect\n // below. This way we can abort the lookup if the value changes while the\n // lookup is running.\n const abortControllerRef = React.useRef<AbortController | null>(null)\n\n React.useEffect(() => {\n if (lookupCount === 0) {\n return\n }\n abortControllerRef.current = new AbortController()\n onLookup({\n newValue: value,\n abortController: abortControllerRef.current,\n continueLookupOnAbort: false,\n })\n // Wants to use \"onLookup\" and \"value\" as dependencies,\n // however, these will change on any change made on any\n // element. Checking if \"lookupCount\" has changed is enough\n // to trigger a lookup when the correct dependencies change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [lookupCount])\n\n React.useEffect(() => {\n const abortController = abortControllerRef.current\n if (abortController) {\n return () => {\n abortController.abort()\n }\n }\n }, [value, lookupCount])\n\n return {\n ...state,\n onLookup: React.useCallback(() => {\n setLookupCount((currentLookupCount) => currentLookupCount + 1)\n }, []),\n }\n}\n"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oneblink/apps-react",
3
3
  "description": "Helper functions for OneBlink apps in ReactJS.",
4
- "version": "4.0.0-beta.9",
4
+ "version": "4.0.0",
5
5
  "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
6
6
  "bugs": {
7
7
  "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
11
11
  "@emotion/react": "^11.10.6",
12
12
  "@emotion/styled": "^11.10.6",
13
13
  "@mui/icons-material": "^5.11.11",
14
- "@oneblink/sdk-core": "^3.1.0-beta.1",
14
+ "@oneblink/sdk-core": "^3.1.0-beta.4",
15
15
  "@react-google-maps/api": "2.18.1",
16
16
  "blueimp-load-image": "^5.16.0",
17
17
  "bulma": "^0.9.3",
@@ -47,7 +47,7 @@
47
47
  "@mui/lab": "^5.0.0-alpha.95",
48
48
  "@mui/material": "^5.10.1",
49
49
  "@mui/x-date-pickers": "^5.0.0-beta.6",
50
- "@oneblink/apps": "^5.0.0-beta.7",
50
+ "@oneblink/apps": "^5.0.0-beta.15",
51
51
  "@oneblink/release-cli": "^2.0.2",
52
52
  "@oneblink/types": "github:oneblink/types",
53
53
  "@types/blueimp-load-image": "^5.16.0",