@oneblink/apps-react 6.6.0-beta.7 → 6.7.0-beta.1

package/dist/components/CustomAccordion.d.ts

@@ -14,7 +14,7 @@ export declare const CustomAccordion: import("@emotion/styled").StyledComponent<
     TransitionProps?: import("@mui/material/transitions").TransitionProps | undefined;
 } & import("@mui/material").AccordionSlotsAndSlotProps & Omit<import("@mui/material").PaperOwnProps, "classes" | "onChange"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "onChange" | "elevation" | "disabled" | "variant" | "disableGutters" | "expanded" | "square" | "defaultExpanded" | "TransitionComponent" | "TransitionProps" | keyof import("@mui/material").AccordionSlotsAndSlotProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "onChange" | "elevation" | "disabled" | "variant" | "disableGutters" | "square" | "defaultExpanded" | "expanded" | "TransitionComponent" | "TransitionProps" | keyof import("@mui/material").AccordionSlotsAndSlotProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CustomAccordionSummary: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionSummaryOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "className" | "style" | "children" | "classes" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,6 +1,7 @@
 import { submissionService } from '@oneblink/apps';
 import { SubmissionTypes, SubmissionEventTypes } from '@oneblink/types';
 import React from 'react';
+import { CaptchaType } from '../../typedoc';
 interface TrustedFrame {
     submitForm(callback: (errors: Array<{
         fieldName: string;
@@ -28,7 +29,7 @@ declare global {
         };
     }
 }
-declare function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmissionEvent, formSubmissionPaymentId, supplierBusinessCode, publishableApiKey, isTestMode, captchaSiteKey, onCompleted, onCancelled, appImageUrl, title, }: {
+declare function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmissionEvent, formSubmissionPaymentId, supplierBusinessCode, publishableApiKey, isTestMode, captchaSiteKey, captchaType, onCompleted, onCancelled, appImageUrl, title, }: {
     formSubmissionResult: submissionService.FormSubmissionResult;
     paymentSubmissionEvent: SubmissionEventTypes.WestpacQuickStreamSubmissionEvent;
     formSubmissionPaymentId: string;
@@ -36,6 +37,7 @@ declare function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSu
     publishableApiKey: string;
     isTestMode: boolean;
     captchaSiteKey: string;
+    captchaType?: CaptchaType;
     onCompleted: (result: {
         formSubmissionPayment: SubmissionTypes.FormSubmissionPayment;
         paymentReceiptUrl: string;

package/dist/components/payments/WestpacQuickStreamPaymentForm.js

@@ -2,11 +2,13 @@ import { OneBlinkAppsError, paymentService, localisationService, } from '@onebli
 import clsx from 'clsx';
 import React from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
+import * as bulmaToast from 'bulma-toast';
 import OnLoading from '../renderer/OnLoading';
 import OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage';
 import Modal from '../renderer/Modal';
 import MaterialIcon from '../MaterialIcon';
-function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmissionEvent, formSubmissionPaymentId, supplierBusinessCode, publishableApiKey, isTestMode, captchaSiteKey, onCompleted, onCancelled, appImageUrl, title, }) {
+import useReCAPTCHAProps from '../../hooks/useReCAPTCHAProps';
+function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmissionEvent, formSubmissionPaymentId, supplierBusinessCode, publishableApiKey, isTestMode, captchaSiteKey, captchaType, onCompleted, onCancelled, appImageUrl, title, }) {
     var _a, _b;
     const [{ isCompletingTransaction, completeTransactionError, captchaToken, displayCaptchaRequired, }, setCompleteTransactionState,] = React.useState({
         isCompletingTransaction: false,
@@ -14,6 +16,7 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
         captchaToken: null,
         displayCaptchaRequired: false,
     });
+    const captchaRef = React.useRef(null);
     const clearCompleteTransactionError = React.useCallback(() => {
         setCompleteTransactionState((currentState) => ({
             ...currentState,
@@ -102,14 +105,55 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
             document.body.removeChild(scriptEle);
         };
     }, [isTestMode, publishableApiKey, supplierBusinessCode]);
+    const recaptchaType = React.useMemo(() => captchaType !== null && captchaType !== void 0 ? captchaType : 'CHECKBOX', [captchaType]);
+    const hanedleCaptchaChange = React.useCallback((newValue) => {
+        setCompleteTransactionState((currentState) => ({
+            ...currentState,
+            captchaToken: newValue,
+            displayCaptchaRequired: newValue === null,
+        }));
+    }, []);
+    const recaptchaProps = useReCAPTCHAProps({
+        captchaSiteKey,
+        captchaRef,
+        onCaptchaChange: hanedleCaptchaChange,
+        captchaType: recaptchaType,
+    });
+    const getRecaptchaToken = React.useCallback(async () => {
+        var _a;
+        switch (captchaType) {
+            case 'INVISIBLE': {
+                const token = await ((_a = captchaRef.current) === null || _a === void 0 ? void 0 : _a.executeAsync());
+                if (!token) {
+                    console.log('Captcha token failure');
+                    bulmaToast.toast({
+                        message: 'Failed to get a captcha token',
+                        type: 'is-danger',
+                        extraClasses: 'ob-toast cypress-failed-captcha-token-creation',
+                        duration: 4000,
+                        pauseOnHover: true,
+                        closeOnClick: true,
+                    });
+                }
+                return {
+                    recaptchaToken: token !== null && token !== void 0 ? token : null,
+                    displayCaptchaRequired: false,
+                };
+            }
+            case 'CHECKBOX':
+            default:
+                return { recaptchaToken: captchaToken, displayCaptchaRequired: true };
+        }
+    }, [captchaToken, captchaType]);
     const handleSubmit = React.useCallback(async () => {
         if (!trustedFrame) {
             return;
         }
-        if (!captchaToken) {
+        const { recaptchaToken, displayCaptchaRequired } = await getRecaptchaToken();
+        if (!recaptchaToken) {
             setCompleteTransactionState({
                 captchaToken: null,
-                displayCaptchaRequired: true,
+                displayCaptchaRequired,
                 isCompletingTransaction: false,
                 completeTransactionError: null,
             });
@@ -136,7 +180,7 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
                 formSubmissionResult,
                 formSubmissionPaymentId,
                 paymentSubmissionEvent,
-                captchaToken,
+                captchaToken: recaptchaToken,
             })
                 .then(onCompleted)
                 .catch((error) => {
@@ -148,12 +192,12 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
             });
         });
     }, [
-        captchaToken,
         formSubmissionPaymentId,
         formSubmissionResult,
         onCompleted,
         paymentSubmissionEvent,
         trustedFrame,
+        getRecaptchaToken,
     ]);
     const [{ isCancellingTransaction, cancelError }, setCancelState] = React.useState({
         isCancellingTransaction: false,
@@ -209,13 +253,7 @@ function WestpacQuickStreamPaymentForm({ formSubmissionResult, paymentSubmission
                         React.createElement("div", { className: "ob-payment-form__westpac-quickstream-amount-value" }, localisationService.formatCurrency((_b = (_a = formSubmissionResult.payment) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : 0))),
                     React.createElement("div", { "data-quickstream-api": "creditCardContainer", className: "quickstream-credit-card-container" }),
                     !isLoading && !loadError && (React.createElement(React.Fragment, null,
-                        React.createElement(ReCAPTCHA, { sitekey: captchaSiteKey, onChange: (newValue) => {
-                                setCompleteTransactionState((currentState) => ({
-                                    ...currentState,
-                                    captchaToken: newValue,
-                                    displayCaptchaRequired: newValue === null,
-                                }));
-                            }, className: "ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha" }),
+                        React.createElement(ReCAPTCHA, { ...recaptchaProps, className: "ob-input cypress-captcha-control ob-payment-form__westpac-quickstream-captcha" }),
                         displayCaptchaRequired && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                             React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, "Please complete the CAPTCHA successfully")))))),
                 !isLoading && !loadError && (React.createElement("div", { className: "ob-payment-form__westpac-quickstream-form-actions" },

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

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

package/dist/form-elements/FormElementCaptcha.d.ts

@@ -8,6 +8,6 @@ type Props = {
     validationMessage: string | undefined;
     value: string | undefined;
 };
-declare function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, value, }: Props): React.JSX.Element;
+declare function FormElementCaptcha({ element, onChange: onCaptchChange, validationMessage, displayValidationMessage, }: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementCaptcha>;
 export default _default;

package/dist/form-elements/FormElementCaptcha.js

@@ -1,24 +1,30 @@
 import * as React from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
-import useCaptchaSiteKey from '../hooks/useCaptchaSiteKey';
-function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, value, }) {
-    const captchaSiteKey = useCaptchaSiteKey();
-    const ref = React.useRef(null);
+import useCaptcha from '../hooks/useCaptcha';
+import useReCAPTCHAProps from '../hooks/useReCAPTCHAProps';
+function FormElementCaptcha({ element, onChange: onCaptchChange, validationMessage, displayValidationMessage, }) {
+    const { captchaSiteKey, captchaType, addCaptchaRef } = useCaptcha();
+    const captchaRef = React.useRef(null);
     React.useEffect(() => {
-        if (ref.current) {
-            const refValue = ref.current.getValue();
-            if (refValue && !value) {
-                ref.current.reset();
-            }
+        if (captchaRef.current) {
+            // addCaptchaRef returns a function to remove the captcha which will fire when the component unmounts
+            return addCaptchaRef(captchaRef.current);
         }
-    }, [value]);
+    }, [captchaRef, addCaptchaRef]);
+    const handleChange = React.useCallback((val) => {
+        onCaptchChange(element, {
+            value: val || undefined,
+        });
+    }, [element, onCaptchChange]);
+    const recaptchaProps = useReCAPTCHAProps({
+        captchaSiteKey,
+        captchaRef,
+        captchaType,
+        onCaptchaChange: handleChange,
+    });
     return (React.createElement("div", { className: "cypress-captcha-element" },
         React.createElement("div", { className: "ob-form__element ob-captcha" },
-            React.createElement(ReCAPTCHA, { sitekey: captchaSiteKey || '', onChange: (val) => {
-                    onChange(element, {
-                        value: val || undefined,
-                    });
-                }, className: "ob-input cypress-captcha-control", ref: ref }),
+            React.createElement(ReCAPTCHA, { ...recaptchaProps, className: "ob-input cypress-captcha-control" }),
             displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, validationMessage))))));
 }

package/dist/form-elements/FormElementCaptcha.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementCaptcha.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCaptcha.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAE9C,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAY1D,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,KAAK,GACC;IACN,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAEhD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA;YACvC,IAAI,QAAQ,IAAI,CAAC,KAAK,EAAE;gBACtB,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;aACpB;SACF;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,oBAAC,SAAS,IACR,OAAO,EAAE,cAAc,IAAI,EAAE,EAC7B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE;oBAChB,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,GAAG,IAAI,SAAS;qBACxB,CAAC,CAAA;gBACJ,CAAC,EACD,SAAS,EAAC,kCAAkC,EAC5C,GAAG,EAAE,GAAG,GACR;YAED,wBAAwB,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAClD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,4EAA4E,IACxF,iBAAiB,CACd,CACF,CACP,CACG,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\n\nimport useCaptchaSiteKey from '../hooks/useCaptchaSiteKey'\nimport { FormTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  element: FormTypes.CaptchaElement\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  value: string | undefined\n}\n\nfunction FormElementCaptcha({\n  element,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  value,\n}: Props) {\n  const captchaSiteKey = useCaptchaSiteKey()\n  const ref = React.useRef<ReCAPTCHA | null>(null)\n\n  React.useEffect(() => {\n    if (ref.current) {\n      const refValue = ref.current.getValue()\n      if (refValue && !value) {\n        ref.current.reset()\n      }\n    }\n  }, [value])\n\n  return (\n    <div className=\"cypress-captcha-element\">\n      <div className=\"ob-form__element ob-captcha\">\n        <ReCAPTCHA\n          sitekey={captchaSiteKey || ''}\n          onChange={(val) => {\n            onChange(element, {\n              value: val || undefined,\n            })\n          }}\n          className=\"ob-input cypress-captcha-control\"\n          ref={ref}\n        />\n\n        {displayValidationMessage && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-required cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCaptcha)\n"]}
+{"version":3,"file":"FormElementCaptcha.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCaptcha.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAG9C,OAAO,UAAU,MAAM,qBAAqB,CAAA;AAC5C,OAAO,iBAAiB,MAAM,4BAA4B,CAAA;AAW1D,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,QAAQ,EAAE,cAAc,EACxB,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE,CAAA;IAEnE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAY,IAAI,CAAC,CAAA;IAEhD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,qGAAqG;YACrG,OAAO,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;SACzC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;IAE/B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,GAAkB,EAAE,EAAE;QACrB,cAAc,CAAC,OAAO,EAAE;YACtB,KAAK,EAAE,GAAG,IAAI,SAAS;SACxB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,cAAc,CAAC,CAC1B,CAAA;IAED,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,cAAc;QACd,UAAU;QACV,WAAW;QACX,eAAe,EAAE,YAAY;KAC9B,CAAC,CAAA;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,oBAAC,SAAS,OACJ,cAAc,EAClB,SAAS,EAAC,kCAAkC,GAC5C;YACD,wBAAwB,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAClD,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,4EAA4E,IACxF,iBAAiB,CACd,CACF,CACP,CACG,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ReCAPTCHA from 'react-google-recaptcha'\nimport { FormTypes } from '@oneblink/types'\n\nimport useCaptcha from '../hooks/useCaptcha'\nimport useReCAPTCHAProps from '../hooks/useReCAPTCHAProps'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  element: FormTypes.CaptchaElement\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  value: string | undefined\n}\n\nfunction FormElementCaptcha({\n  element,\n  onChange: onCaptchChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const { captchaSiteKey, captchaType, addCaptchaRef } = useCaptcha()\n\n  const captchaRef = React.useRef<ReCAPTCHA>(null)\n\n  React.useEffect(() => {\n    if (captchaRef.current) {\n      // addCaptchaRef returns a function to remove the captcha which will fire when the component unmounts\n      return addCaptchaRef(captchaRef.current)\n    }\n  }, [captchaRef, addCaptchaRef])\n\n  const handleChange = React.useCallback(\n    (val: string | null) => {\n      onCaptchChange(element, {\n        value: val || undefined,\n      })\n    },\n    [element, onCaptchChange],\n  )\n\n  const recaptchaProps = useReCAPTCHAProps({\n    captchaSiteKey,\n    captchaRef,\n    captchaType,\n    onCaptchaChange: handleChange,\n  })\n\n  return (\n    <div className=\"cypress-captcha-element\">\n      <div className=\"ob-form__element ob-captcha\">\n        <ReCAPTCHA\n          {...recaptchaProps}\n          className=\"ob-input cypress-captcha-control\"\n        />\n        {displayValidationMessage && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-required cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCaptcha)\n"]}

package/dist/form-elements/FormElementDate.js

@@ -16,7 +16,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
     const flatpickrOptions = React.useMemo(() => {
         const opts = {
             dateFormat: localisationService.getFlatpickrFormats().shortDate,
-            allowInput: true,
+            allowInput: false,
             minDate: parseDateValue({
                 dateOnly: false,
                 daysOffset: fromDaysOffset,

package/dist/form-elements/FormElementDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAElE,OAAO,wBAAwB,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AAYrD,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5D,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,GACtD,wBAAwB,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAqB;YAC7B,UAAU,EAAE,mBAAmB,CAAC,mBAAmB,EAAE,CAAC,SAAS;YAC/D,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,cAAc;gBAC1B,KAAK,EAAE,QAAQ;aAChB,CAAC;YACF,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,YAAY;gBACxB,KAAK,EAAE,MAAM;aACd,CAAC;YACF,WAAW,EAAE,SAAS;YACtB,mBAAmB,EAAE,IAAI;YACzB,OAAO,EAAE,UAAU;SACpB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAEhE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAA4B,EAAE,EAAE,CAC/B,QAAQ,CAAC,OAAO,EAAE;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,EACJ,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,CAC7B;QACE,EAAE;QACF,KAAK;QACL,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,IAAI;KACf,EACD,gBAAgB,EAChB,iBAAiB,CAClB,CAAA;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,IAAI,GAAG,mBAAmB,CAAC,YAAY,CAAC;gBAC5C,UAAU,EAAE,SAAS;gBACrB,KAAK;gBACL,QAAQ,EAAE,IAAI;aACf,CAAC,CAAA;YACF,IAAI,IAAI,EAAE;gBACR,OAAO,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;aAC5C;SACF;QACD,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,wBAAwB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB,EAAC,GAAG,EAAE,iBAAiB;QAC1D,oBAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,SAAS,EAAC,qCAAqC,EAC/C,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,sBAAsB,sBAClB,eAAe,GACjC;oBAEF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,oBAAC,YAAY,IAAC,SAAS,EAAC,WAAW,YAAqB,CACnD,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,CAC/B,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE;YAEL,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      dateFormat: localisationService.getFlatpickrFormats().shortDate,\n      allowInput: true,\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: fromDaysOffset,\n        value: fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: toDaysOffset,\n        value: toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) =>\n      onChange(element, {\n        value: newValue,\n      }),\n    [element, onChange],\n  )\n\n  const { onBlur } = useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = localisationService.generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input cypress-date-control\"\n              onBlur={onBlur}\n              autoComplete={autocompleteAttributes}\n              aria-describedby={ariaDescribedby}\n            />\n\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">event</MaterialIcon>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}
+{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useFormElementDateFromTo from '../hooks/useFormElementDateFromTo'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const { fromDate, fromDaysOffset, toDate, toDaysOffset } =\n    useFormElementDateFromTo(element)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      dateFormat: localisationService.getFlatpickrFormats().shortDate,\n      allowInput: false,\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: fromDaysOffset,\n        value: fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: toDaysOffset,\n        value: toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [fromDate, fromDaysOffset, setIsDirty, toDate, toDaysOffset])\n\n  const handleChange = React.useCallback(\n    (newValue: string | undefined) =>\n      onChange(element, {\n        value: newValue,\n      }),\n    [element, onChange],\n  )\n\n  const { onBlur } = useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = localisationService.generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input cypress-date-control\"\n              onBlur={onBlur}\n              autoComplete={autocompleteAttributes}\n              aria-describedby={ariaDescribedby}\n            />\n\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <MaterialIcon className=\"is-size-5\">event</MaterialIcon>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}

package/dist/hooks/useCaptcha.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ReCAPTCHA } from 'react-google-recaptcha';
+import { CaptchaType } from '../types/form';
+export declare const CaptchaContext: import("react").Context<{
+    captchaSiteKey: string | undefined;
+    captchaType: CaptchaType;
+    addCaptchaRef: (captcha: ReCAPTCHA) => () => void;
+}>;
+export default function useCaptcha(): {
+    captchaSiteKey: string | undefined;
+    captchaType: CaptchaType;
+    addCaptchaRef: (captcha: ReCAPTCHA) => () => void;
+};

package/dist/hooks/useCaptcha.js

@@ -0,0 +1,10 @@
+import { useContext, createContext } from 'react';
+export const CaptchaContext = createContext({
+    captchaSiteKey: undefined,
+    captchaType: 'CHECKBOX',
+    addCaptchaRef: () => () => { },
+});
+export default function useCaptcha() {
+    return useContext(CaptchaContext);
+}
+//# sourceMappingURL=useCaptcha.js.map

package/dist/hooks/useCaptcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCaptcha.js","sourceRoot":"","sources":["../../src/hooks/useCaptcha.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAIjD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAIxC;IACD,cAAc,EAAE,SAAS;IACzB,WAAW,EAAE,UAAU;IACvB,aAAa,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC;CAC9B,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,OAAO,UAAU,CAAC,cAAc,CAAC,CAAA;AACnC,CAAC","sourcesContent":["import { useContext, createContext } from 'react'\nimport { ReCAPTCHA } from 'react-google-recaptcha'\nimport { CaptchaType } from '../types/form'\n\nexport const CaptchaContext = createContext<{\n  captchaSiteKey: string | undefined\n  captchaType: CaptchaType\n  addCaptchaRef: (captcha: ReCAPTCHA) => () => void\n}>({\n  captchaSiteKey: undefined,\n  captchaType: 'CHECKBOX',\n  addCaptchaRef: () => () => {},\n})\n\nexport default function useCaptcha() {\n  return useContext(CaptchaContext)\n}\n"]}

package/dist/hooks/useFormValidation.d.ts

@@ -1,5 +1,5 @@
 import { FormTypes, SubmissionTypes } from '@oneblink/types';
-import { ExecutedLookups, FormElementsConditionallyShown } from '../types/form';
+import { CaptchaType, ExecutedLookups, FormElementsConditionallyShown } from '../types/form';
 export default function useFormValidation(pages: FormTypes.PageElement[]): {
-    validate: (submission: SubmissionTypes.S3SubmissionData['submission'], formElementsConditionallyShown: FormElementsConditionallyShown, executedLookups: ExecutedLookups) => import("../types/form").FormElementsValidation | undefined;
+    validate: (submission: SubmissionTypes.S3SubmissionData['submission'], formElementsConditionallyShown: FormElementsConditionallyShown, executedLookups: ExecutedLookups, captchaType: CaptchaType) => import("../types/form").FormElementsValidation | undefined;
 };

package/dist/hooks/useFormValidation.js

@@ -34,8 +34,8 @@ export default function useFormValidation(pages) {
     const validationSchema = React.useMemo(() => {
         return generateValidationSchema(formElementsWithoutName);
     }, [formElementsWithoutName]);
-    const handleValidate = React.useCallback((submission, formElementsConditionallyShown, executedLookups) => {
-        return validateSubmission(validationSchema, submission, formElementsConditionallyShown, executedLookups);
+    const handleValidate = React.useCallback((submission, formElementsConditionallyShown, executedLookups, captchaType) => {
+        return validateSubmission(validationSchema, submission, formElementsConditionallyShown, executedLookups, captchaType);
     }, [validationSchema]);
     return {
         validate: handleValidate,

package/dist/hooks/useFormValidation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,6BAA6B,CAAA;AAGpC,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE;YACxB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;aACF;YACD,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,eAAe,CAAC,CAAC;gBACpB,OAAO;oBACL,GAAG,IAAI;oBACP;wBACE,GAAG,WAAW;wBACd,QAAQ,EAAE,4BAA4B,CACpC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAC3B;qBACF;iBACF,CAAA;aACF;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;aAC9B;SACF;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,wBAAwB,CAAC,uBAAuB,CAAC,CAAA;IAC1D,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAA;IAE7B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA0D,EAC1D,8BAA8D,EAC9D,eAAgC,EAChC,EAAE;QACF,OAAO,kBAAkB,CACvB,gBAAgB,EAChB,UAAU,EACV,8BAA8B,EAC9B,eAAe,CAChB,CAAA;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;IAED,OAAO;QACL,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport {\n  validateSubmission,\n  generateValidationSchema,\n} from '../services/form-validation'\nimport { ExecutedLookups, FormElementsConditionallyShown } from '../types/form'\n\nfunction stripFormElementsWithoutName(\n  formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n  return formElements.reduce<FormTypes.FormElementWithName[]>(\n    (memo, formElement) => {\n      switch (formElement.type) {\n        case 'page':\n        case 'section': {\n          return [\n            ...memo,\n            ...stripFormElementsWithoutName(formElement.elements),\n          ]\n        }\n        case 'infoPage':\n        case 'form':\n        case 'repeatableSet': {\n          return [\n            ...memo,\n            {\n              ...formElement,\n              elements: stripFormElementsWithoutName(\n                formElement.elements || [],\n              ),\n            },\n          ]\n        }\n        default: {\n          return [...memo, formElement]\n        }\n      }\n    },\n    [],\n  )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n  const formElementsWithoutName = React.useMemo(() => {\n    return stripFormElementsWithoutName(pages)\n  }, [pages])\n\n  const validationSchema = React.useMemo(() => {\n    return generateValidationSchema(formElementsWithoutName)\n  }, [formElementsWithoutName])\n\n  const handleValidate = React.useCallback(\n    (\n      submission: SubmissionTypes.S3SubmissionData['submission'],\n      formElementsConditionallyShown: FormElementsConditionallyShown,\n      executedLookups: ExecutedLookups,\n    ) => {\n      return validateSubmission(\n        validationSchema,\n        submission,\n        formElementsConditionallyShown,\n        executedLookups,\n      )\n    },\n    [validationSchema],\n  )\n\n  return {\n    validate: handleValidate,\n  }\n}\n"]}
+{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,6BAA6B,CAAA;AAOpC,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE;YACxB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;aACF;YACD,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,eAAe,CAAC,CAAC;gBACpB,OAAO;oBACL,GAAG,IAAI;oBACP;wBACE,GAAG,WAAW;wBACd,QAAQ,EAAE,4BAA4B,CACpC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAC3B;qBACF;iBACF,CAAA;aACF;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;aAC9B;SACF;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,wBAAwB,CAAC,uBAAuB,CAAC,CAAA;IAC1D,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAA;IAE7B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA0D,EAC1D,8BAA8D,EAC9D,eAAgC,EAChC,WAAwB,EACxB,EAAE;QACF,OAAO,kBAAkB,CACvB,gBAAgB,EAChB,UAAU,EACV,8BAA8B,EAC9B,eAAe,EACf,WAAW,CACZ,CAAA;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;IAED,OAAO;QACL,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport {\n  validateSubmission,\n  generateValidationSchema,\n} from '../services/form-validation'\nimport {\n  CaptchaType,\n  ExecutedLookups,\n  FormElementsConditionallyShown,\n} from '../types/form'\n\nfunction stripFormElementsWithoutName(\n  formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n  return formElements.reduce<FormTypes.FormElementWithName[]>(\n    (memo, formElement) => {\n      switch (formElement.type) {\n        case 'page':\n        case 'section': {\n          return [\n            ...memo,\n            ...stripFormElementsWithoutName(formElement.elements),\n          ]\n        }\n        case 'infoPage':\n        case 'form':\n        case 'repeatableSet': {\n          return [\n            ...memo,\n            {\n              ...formElement,\n              elements: stripFormElementsWithoutName(\n                formElement.elements || [],\n              ),\n            },\n          ]\n        }\n        default: {\n          return [...memo, formElement]\n        }\n      }\n    },\n    [],\n  )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n  const formElementsWithoutName = React.useMemo(() => {\n    return stripFormElementsWithoutName(pages)\n  }, [pages])\n\n  const validationSchema = React.useMemo(() => {\n    return generateValidationSchema(formElementsWithoutName)\n  }, [formElementsWithoutName])\n\n  const handleValidate = React.useCallback(\n    (\n      submission: SubmissionTypes.S3SubmissionData['submission'],\n      formElementsConditionallyShown: FormElementsConditionallyShown,\n      executedLookups: ExecutedLookups,\n      captchaType: CaptchaType,\n    ) => {\n      return validateSubmission(\n        validationSchema,\n        submission,\n        formElementsConditionallyShown,\n        executedLookups,\n        captchaType,\n      )\n    },\n    [validationSchema],\n  )\n\n  return {\n    validate: handleValidate,\n  }\n}\n"]}

package/dist/hooks/useReCAPTCHAProps.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+import ReCAPTCHA, { ReCAPTCHAProps } from 'react-google-recaptcha';
+import { CaptchaType } from '../typedoc';
+export default function useReCAPTCHAProps({ captchaSiteKey, captchaRef, captchaType, onCaptchaChange, }: {
+    captchaSiteKey: string | undefined;
+    captchaRef: RefObject<ReCAPTCHA>;
+    captchaType: CaptchaType | undefined;
+    onCaptchaChange: (token: string | null) => void;
+}): ReCAPTCHAProps;

package/dist/hooks/useReCAPTCHAProps.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+export default function useReCAPTCHAProps({ captchaSiteKey, captchaRef, captchaType, onCaptchaChange, }) {
+    const recaptchaProps = useMemo(() => {
+        const baseProps = {
+            sitekey: captchaSiteKey || '',
+            className: 'ob-input cypress-captcha-control',
+            ref: captchaRef,
+        };
+        switch (captchaType) {
+            case 'INVISIBLE':
+                return {
+                    ...baseProps,
+                    size: 'invisible',
+                    badge: 'inline',
+                };
+            case 'CHECKBOX':
+            default: {
+                return {
+                    ...baseProps,
+                    onChange: onCaptchaChange,
+                };
+            }
+        }
+    }, [captchaSiteKey, captchaType, captchaRef, onCaptchaChange]);
+    return recaptchaProps;
+}
+//# sourceMappingURL=useReCAPTCHAProps.js.map

package/dist/hooks/useReCAPTCHAProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReCAPTCHAProps.js","sourceRoot":"","sources":["../../src/hooks/useReCAPTCHAProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAa,MAAM,OAAO,CAAA;AAI1C,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,cAAc,EACd,UAAU,EACV,WAAW,EACX,eAAe,GAMhB;IACC,MAAM,cAAc,GAAmB,OAAO,CAAC,GAAG,EAAE;QAClD,MAAM,SAAS,GAAG;YAChB,OAAO,EAAE,cAAc,IAAI,EAAE;YAC7B,SAAS,EAAE,kCAAkC;YAC7C,GAAG,EAAE,UAAU;SAChB,CAAA;QACD,QAAQ,WAAW,EAAE;YACnB,KAAK,WAAW;gBACd,OAAO;oBACL,GAAG,SAAS;oBACZ,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,QAAQ;iBAChB,CAAA;YACH,KAAK,UAAU,CAAC;YAChB,OAAO,CAAC,CAAC;gBACP,OAAO;oBACL,GAAG,SAAS;oBACZ,QAAQ,EAAE,eAAe;iBAC1B,CAAA;aACF;SACF;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC,CAAA;IAE9D,OAAO,cAAc,CAAA;AACvB,CAAC","sourcesContent":["import { useMemo, RefObject } from 'react'\nimport ReCAPTCHA, { ReCAPTCHAProps } from 'react-google-recaptcha'\nimport { CaptchaType } from '../typedoc'\n\nexport default function useReCAPTCHAProps({\n  captchaSiteKey,\n  captchaRef,\n  captchaType,\n  onCaptchaChange,\n}: {\n  captchaSiteKey: string | undefined\n  captchaRef: RefObject<ReCAPTCHA>\n  captchaType: CaptchaType | undefined\n  onCaptchaChange: (token: string | null) => void\n}) {\n  const recaptchaProps: ReCAPTCHAProps = useMemo(() => {\n    const baseProps = {\n      sitekey: captchaSiteKey || '',\n      className: 'ob-input cypress-captcha-control',\n      ref: captchaRef,\n    }\n    switch (captchaType) {\n      case 'INVISIBLE':\n        return {\n          ...baseProps,\n          size: 'invisible',\n          badge: 'inline',\n        }\n      case 'CHECKBOX':\n      default: {\n        return {\n          ...baseProps,\n          onChange: onCaptchaChange,\n        }\n      }\n    }\n  }, [captchaSiteKey, captchaType, captchaRef, onCaptchaChange])\n\n  return recaptchaProps\n}\n"]}

package/dist/services/form-validation.d.ts

@@ -1,9 +1,9 @@
 import { FormTypes, FormsAppsTypes, SubmissionTypes } from '@oneblink/types';
-import { ExecutedLookupValue, FormElementsConditionallyShown, FormElementsValidation } from '../types/form';
+import { CaptchaType, ExecutedLookupValue, FormElementsConditionallyShown, FormElementsValidation } from '../types/form';
 export declare const generateLookupValidationMessage: (lookupButtonConfig?: FormsAppsTypes.ButtonConfiguration) => string;
 type ValidateJSSchema = Record<string, unknown>;
 export declare function generateValidationSchema(elements: FormTypes.FormElementWithName[]): ValidateJSSchema;
-export declare function validateSubmission(schema: ValidateJSSchema, submission: SubmissionTypes.S3SubmissionData['submission'] | undefined, formElementsConditionallyShown: FormElementsConditionallyShown | undefined, executedLookups: ExecutedLookupValue): FormElementsValidation | undefined;
+export declare function validateSubmission(schema: ValidateJSSchema, submission: SubmissionTypes.S3SubmissionData['submission'] | undefined, formElementsConditionallyShown: FormElementsConditionallyShown | undefined, executedLookups: ExecutedLookupValue, captchaType: CaptchaType): FormElementsValidation | undefined;
 export declare function checkFileNameIsValid(formElement: FormTypes.FilesElement, fileName: string): boolean;
 export declare function checkFileNameExtensionIsValid(formElement: FormTypes.FilesElement, fileName: string): boolean;
 export declare function checkSectionValidity(element: FormTypes.PageElement | FormTypes.SectionElement, formElementsValidation: FormElementsValidation | undefined): boolean;