@oneblink/apps-react 2.5.3-beta.5 → 2.6.0-beta.1

package/dist/PaymentReceipt.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function PaymentReceipt({ onDone }: {
+    onDone: () => void | Promise<void>;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof PaymentReceipt>;
+export default _default;

package/dist/PaymentReceipt.js

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+import { paymentService, submissionService, localisationService, } from '@oneblink/apps';
+import useIsMounted from './hooks/useIsMounted';
+import useQuery from './hooks/useQuery';
+import Modal from './components/renderer/Modal';
+import OnLoading from './components/renderer/OnLoading';
+import { Receipt, ReceiptList, ReceiptListItem, ReceiptButton, } from './components/receipts';
+const { handlePaymentQuerystring, handlePaymentSubmissionEvent } = paymentService;
+function PaymentReceipt({ onDone }) {
+    const isMounted = useIsMounted();
+    const query = useQuery();
+    const history = useHistory();
+    const [{ isLoading, loadError, transaction, submissionResult }, setLoadState,] = React.useState({
+        isLoading: true,
+        loadError: null,
+        transaction: null,
+        submissionResult: null,
+    });
+    const [{ isRunningPostSubmissionAction, postSubmissionError }, setPostSubmissionState,] = React.useState({
+        isRunningPostSubmissionAction: false,
+        postSubmissionError: null,
+    });
+    const clearPostSubmissionError = React.useCallback(() => {
+        setPostSubmissionState((currentState) => ({
+            ...currentState,
+            postSubmissionError: null,
+        }));
+    }, []);
+    const [{ isRetrying, retryError }, setRetryState] = React.useState({
+        isRetrying: false,
+        retryError: null,
+    });
+    const clearRetryError = React.useCallback(() => {
+        setRetryState((currentState) => ({
+            ...currentState,
+            retryError: null,
+        }));
+    }, []);
+    React.useEffect(() => {
+        let ignore = false;
+        const getTransaction = async () => {
+            let newError = null;
+            let newTransaction = null;
+            let newSubmissionResult = null;
+            try {
+                const result = await handlePaymentQuerystring(query);
+                newTransaction = result.transaction;
+                newSubmissionResult = result.submissionResult;
+            }
+            catch (error) {
+                console.warn('Error while attempting to load transaction', error);
+                newError = error;
+            }
+            if (!ignore) {
+                setLoadState({
+                    isLoading: false,
+                    loadError: newError,
+                    transaction: newTransaction,
+                    submissionResult: newSubmissionResult,
+                });
+            }
+        };
+        getTransaction();
+        return () => {
+            ignore = true;
+        };
+    }, [query]);
+    const executePostSubmissionAction = React.useCallback(async () => {
+        if (!submissionResult || !isMounted.current) {
+            return;
+        }
+        setPostSubmissionState({
+            isRunningPostSubmissionAction: true,
+            postSubmissionError: null,
+        });
+        let newError = null;
+        try {
+            await onDone();
+        }
+        catch (error) {
+            console.warn('Error while running post submission action', error);
+            newError = error;
+        }
+        if (isMounted.current) {
+            setPostSubmissionState({
+                isRunningPostSubmissionAction: false,
+                postSubmissionError: newError,
+            });
+        }
+    }, [isMounted, submissionResult, onDone]);
+    const tryAgain = React.useCallback(async () => {
+        if (!submissionResult || !submissionResult.payment) {
+            return;
+        }
+        const paymentSubmissionEvent = submissionResult.payment.submissionEvent;
+        if (isMounted.current) {
+            setRetryState({
+                isRetrying: true,
+                retryError: null,
+            });
+        }
+        let newError = null;
+        try {
+            submissionResult.payment = await handlePaymentSubmissionEvent({
+                amount: submissionResult.payment.amount,
+                formSubmissionResult: submissionResult,
+                paymentSubmissionEvent,
+                paymentReceiptUrl: `${window.location.origin}${window.location.pathname}`,
+            });
+            await submissionService.executePostSubmissionAction(submissionResult, history.push);
+        }
+        catch (error) {
+            console.warn('Error while attempting to retry transaction', error);
+            newError = error;
+        }
+        if (isMounted.current) {
+            setRetryState({
+                isRetrying: false,
+                retryError: newError,
+            });
+        }
+    }, [history.push, isMounted, submissionResult]);
+    return (React.createElement("div", null,
+        isLoading && (React.createElement("section", null,
+            React.createElement("div", { className: "cypress-loading has-text-centered" },
+                React.createElement(OnLoading, { className: "has-text-centered" }),
+                React.createElement("span", null, "Retrieving transaction details...")))),
+        transaction && (React.createElement(Receipt, { className: "ob-payment-receipt", containerClassName: "ob-payment-receipt__container" },
+            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
+                    ? undefined
+                    : transaction.errorMessage || undefined },
+                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 })),
+                !!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 })),
+                !!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 })),
+                !!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) })),
+                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." })),
+            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: executePostSubmissionAction })) : (React.createElement(React.Fragment, null,
+                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: executePostSubmissionAction }),
+                React.createElement(ReceiptButton, { className: "is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button", label: "Try Again", isDisabled: isRunningPostSubmissionAction, isLoading: isRetrying, onClick: tryAgain })))))),
+        loadError && (React.createElement("section", { className: "cypress-payment-receipt-loading-error-message" },
+            React.createElement("div", { className: "ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8" },
+                React.createElement("i", { className: "ob-payment-receipt__error-icon material-icons has-text-danger icon-x-large" }, "error")),
+            React.createElement("p", { className: "ob-payment-receipt__error-message has-text-centered has-margin-bottom-4" }, loadError.message))),
+        retryError && (React.createElement(Modal, { isOpen: true, title: retryError.title || 'Whoops...', bodyClassName: "cypress-payment-receipt-retry-error-message", actions: React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-payment-receipt-retry-error-okay-button", onClick: clearRetryError }, "Okay") }, retryError.message)),
+        postSubmissionError && (React.createElement(Modal, { isOpen: true, title: postSubmissionError.title || 'Whoops...', bodyClassName: "cypress-payment-receipt-retry-error-message", actions: React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-payment-receipt-retry-error-okay-button", onClick: clearPostSubmissionError }, "Okay") }, postSubmissionError.message))));
+}
+export default React.memo(PaymentReceipt);
+//# sourceMappingURL=PaymentReceipt.js.map

package/dist/PaymentReceipt.js.map

@@ -0,0 +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({ onDone }: { onDone: () => void | Promise<void> }) {\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(async () => {\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 onDone()\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  }, [isMounted, submissionResult, onDone])\n\n  const tryAgain = 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={executePostSubmissionAction}\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={executePostSubmissionAction}\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={tryAgain}\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\nexport default React.memo(PaymentReceipt)\n"]}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare type Props = {
+    className: string;
+    containerClassName: string;
+    children: React.ReactNode;
+};
+declare function Receipt({ className, containerClassName, children }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Receipt>;
+export default _default;

package/dist/components/receipts/Receipt.js

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

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

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare type Props = {
+    className: string;
+    label: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    onClick: () => unknown;
+};
+declare function ReceiptButton({ className, label, isDisabled, isLoading, onClick, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ReceiptButton>;
+export default _default;

package/dist/components/receipts/ReceiptButton.js

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

package/dist/components/receipts/ReceiptButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReceiptButton.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAUvB,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,KAAK,EACL,UAAU,EACV,SAAS,EACT,OAAO,GACD;IACN,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,qCAAqC,EAAE,SAAS,EAAE;YAChE,YAAY,EAAE,SAAS;SACxB,CAAC,EACF,QAAQ,EAAE,SAAS,IAAI,UAAU,EACjC,OAAO,EAAE,OAAO,IAEf,KAAK,CACC,CACV,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n  className: string\n  label: string\n  isDisabled?: boolean\n  isLoading?: boolean\n  onClick: () => unknown\n}\n\nfunction ReceiptButton({\n  className,\n  label,\n  isDisabled,\n  isLoading,\n  onClick,\n}: Props) {\n  return (\n    <button\n      type=\"button\"\n      className={clsx('button ob-button ob-receipt__button', className, {\n        'is-loading': isLoading,\n      })}\n      disabled={isLoading || isDisabled}\n      onClick={onClick}\n    >\n      {label}\n    </button>\n  )\n}\n\nexport default React.memo(ReceiptButton)\n"]}

package/dist/components/receipts/ReceiptList.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare type Props = {
+    successIconClassName: string;
+    warningIconClassName?: string;
+    warningMessageClassName?: string;
+    warningMessage?: string;
+    children: React.ReactNode;
+};
+declare function ReceiptList({ successIconClassName, warningIconClassName, warningMessageClassName, warningMessage, children, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ReceiptList>;
+export default _default;

package/dist/components/receipts/ReceiptList.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import clsx from 'clsx';
+function ReceiptList({ successIconClassName, warningIconClassName, warningMessageClassName, warningMessage, children, }) {
+    return (React.createElement("div", { className: "ob-list has-dividers has-shadow has-margin-bottom-4" },
+        React.createElement("div", { className: "ob-list__item" },
+            React.createElement("div", { className: "ob-list__content-wrapper" },
+                React.createElement("div", { className: "ob-list__content" }, !warningMessage ? (React.createElement("i", { className: clsx('material-icons has-text-centered has-text-success icon-x-large', successIconClassName) }, "check_circle_outline")) : (React.createElement(React.Fragment, null,
+                    React.createElement("i", { className: clsx('material-icons has-text-centered has-text-danger icon-x-large', warningIconClassName) }, "warning"),
+                    React.createElement("p", { className: clsx('has-text-centered', warningMessageClassName) }, warningMessage)))))),
+        children));
+}
+export default React.memo(ReceiptList);
+//# sourceMappingURL=ReceiptList.js.map

package/dist/components/receipts/ReceiptList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAUvB,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,6BAAK,SAAS,EAAC,qDAAqD;QAClE,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,2BACE,SAAS,EAAE,IAAI,CACb,gEAAgE,EAChE,oBAAoB,CACrB,2BAGC,CACL,CAAC,CAAC,CAAC,CACF;oBACE,2BACE,SAAS,EAAE,IAAI,CACb,+DAA+D,EAC/D,oBAAoB,CACrB,cAGC;oBAEJ,2BACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,IAE5D,cAAc,CACb,CACH,CACJ,CACG,CACF,CACF;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n  successIconClassName: string\n  warningIconClassName?: string\n  warningMessageClassName?: string\n  warningMessage?: string\n  children: React.ReactNode\n}\n\nfunction ReceiptList({\n  successIconClassName,\n  warningIconClassName,\n  warningMessageClassName,\n  warningMessage,\n  children,\n}: Props) {\n  return (\n    <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n      <div className=\"ob-list__item\">\n        <div className=\"ob-list__content-wrapper\">\n          <div className=\"ob-list__content\">\n            {!warningMessage ? (\n              <i\n                className={clsx(\n                  'material-icons has-text-centered has-text-success icon-x-large',\n                  successIconClassName,\n                )}\n              >\n                check_circle_outline\n              </i>\n            ) : (\n              <>\n                <i\n                  className={clsx(\n                    'material-icons has-text-centered has-text-danger icon-x-large',\n                    warningIconClassName,\n                  )}\n                >\n                  warning\n                </i>\n\n                <p\n                  className={clsx('has-text-centered', warningMessageClassName)}\n                >\n                  {warningMessage}\n                </p>\n              </>\n            )}\n          </div>\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport default React.memo(ReceiptList)\n"]}

package/dist/components/receipts/ReceiptListItem.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare type Props = {
+    className: string;
+    valueClassName: string;
+    icon?: string;
+    label: string;
+    value: string;
+    allowCopyToClipboard?: boolean;
+};
+declare function ReceiptListItem({ className, valueClassName, icon, label, value, allowCopyToClipboard, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ReceiptListItem>;
+export default _default;

package/dist/components/receipts/ReceiptListItem.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import utilsService from '../../services/utils-service';
+function ReceiptListItem({ className, valueClassName, icon, label, value, allowCopyToClipboard, }) {
+    return (React.createElement("div", { className: clsx('ob-list__item', className) },
+        !!icon && (React.createElement("div", { className: "ob-list__avatar" },
+            React.createElement("i", { className: "material-icons icon-medium" }, icon))),
+        React.createElement("div", { className: "ob-list__content-wrapper" },
+            React.createElement("div", { className: "ob-list__content" },
+                React.createElement("div", { className: "ob-list__text-secondary" }, label),
+                React.createElement("div", { className: clsx('ob-list__text-primary', valueClassName) }, value))),
+        allowCopyToClipboard && (React.createElement("div", { className: "ob-list__actions" },
+            React.createElement("button", { type: "button", className: "button ob-button ob-list__button is-small is-white tooltip has-tooltip-left", onClick: () => utilsService.copyToClipboard(value), "data-tooltip": "Copy to clipboard" },
+                React.createElement("span", { className: "icon has-text-grey" },
+                    React.createElement("i", { className: "material-icons icon-small ob-icon__copy has-text" }, "file_copy")))))));
+}
+export default React.memo(ReceiptListItem);
+//# sourceMappingURL=ReceiptListItem.js.map

package/dist/components/receipts/ReceiptListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReceiptListItem.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAWvD,SAAS,eAAe,CAAC,EACvB,SAAS,EACT,cAAc,EACd,IAAI,EACJ,KAAK,EACL,KAAK,EACL,oBAAoB,GACd;IACN,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;QAC7C,CAAC,CAAC,IAAI,IAAI,CACT,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,2BAAG,SAAS,EAAC,4BAA4B,IAAE,IAAI,CAAK,CAChD,CACP;QACD,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAO;gBACtD,6BAAK,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,cAAc,CAAC,IAC1D,KAAK,CACF,CACF,CACF;QACL,oBAAoB,IAAI,CACvB,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6EAA6E,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,kBACrC,mBAAmB;gBAEhC,8BAAM,SAAS,EAAC,oBAAoB;oBAClC,2BAAG,SAAS,EAAC,kDAAkD,gBAE3D,CACC,CACA,CACL,CACP,CACG,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport utilsService from '../../services/utils-service'\n\ntype Props = {\n  className: string\n  valueClassName: string\n  icon?: string\n  label: string\n  value: string\n  allowCopyToClipboard?: boolean\n}\n\nfunction ReceiptListItem({\n  className,\n  valueClassName,\n  icon,\n  label,\n  value,\n  allowCopyToClipboard,\n}: Props) {\n  return (\n    <div className={clsx('ob-list__item', className)}>\n      {!!icon && (\n        <div className=\"ob-list__avatar\">\n          <i className=\"material-icons icon-medium\">{icon}</i>\n        </div>\n      )}\n      <div className=\"ob-list__content-wrapper\">\n        <div className=\"ob-list__content\">\n          <div className=\"ob-list__text-secondary\">{label}</div>\n          <div className={clsx('ob-list__text-primary', valueClassName)}>\n            {value}\n          </div>\n        </div>\n      </div>\n      {allowCopyToClipboard && (\n        <div className=\"ob-list__actions\">\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-list__button is-small is-white tooltip has-tooltip-left\"\n            onClick={() => utilsService.copyToClipboard(value)}\n            data-tooltip=\"Copy to clipboard\"\n          >\n            <span className=\"icon has-text-grey\">\n              <i className=\"material-icons icon-small ob-icon__copy has-text\">\n                file_copy\n              </i>\n            </span>\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(ReceiptListItem)\n"]}

package/dist/components/receipts/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Receipt } from './Receipt';
+export { default as ReceiptList } from './ReceiptList';
+export { default as ReceiptListItem } from './ReceiptListItem';
+export { default as ReceiptButton } from './ReceiptButton';

package/dist/components/receipts/index.js

@@ -0,0 +1,5 @@
+export { default as Receipt } from './Receipt';
+export { default as ReceiptList } from './ReceiptList';
+export { default as ReceiptListItem } from './ReceiptListItem';
+export { default as ReceiptButton } from './ReceiptButton';
+//# sourceMappingURL=index.js.map

package/dist/components/receipts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/receipts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA","sourcesContent":["export { default as Receipt } from './Receipt'\nexport { default as ReceiptList } from './ReceiptList'\nexport { default as ReceiptListItem } from './ReceiptListItem'\nexport { default as ReceiptButton } from './ReceiptButton'\n"]}

package/dist/components/renderer/FormElementOptions.d.ts

@@ -1,9 +1,11 @@
 import { FormTypes } from '@oneblink/types';
 import * as React from 'react';
+import { FormElementConditionallyShownElement } from '../../types/form';
 declare type Props = {
     options: FormTypes.ChoiceElementOption[] | undefined;
+    conditionallyShownOptionsElement: FormElementConditionallyShownElement | undefined;
     children: React.ReactNode;
 };
-declare function FormElementOptions({ options, children }: Props): JSX.Element;
+declare function FormElementOptions({ options, children, conditionallyShownOptionsElement, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementOptions>;
 export default _default;

package/dist/components/renderer/FormElementOptions.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import OnLoading from './OnLoading';
-function FormElementOptions({ options, children }) {
-    if (!options) {
+function FormElementOptions({ options, children, conditionallyShownOptionsElement, }) {
+    if (!options || (conditionallyShownOptionsElement === null || conditionallyShownOptionsElement === void 0 ? void 0 : conditionallyShownOptionsElement.dependencyIsLoading)) {
         return (React.createElement("div", null,
             React.createElement(OnLoading, { className: "has-text-centered", small: true })));
     }

package/dist/components/renderer/FormElementOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementOptions.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementOptions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,SAAS,MAAM,aAAa,CAAA;AAOnC,SAAS,kBAAkB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAS;IACtD,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,EAAC,KAAK,SAAa,CACvD,CACP,CAAA;KACF;IAED,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACnB,OAAO,CACL;YACE,6BAAK,SAAS,EAAC,yBAAyB,8EAGlC,CACF,CACP,CAAA;KACF;IAED,OAAO,iCAAM,QAAQ,CAAO,CAAA;AAC9B,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport OnLoading from './OnLoading'\n\ntype Props = {\n  options: FormTypes.ChoiceElementOption[] | undefined\n  children: React.ReactNode\n}\n\nfunction FormElementOptions({ options, children }: Props) {\n  if (!options) {\n    return (\n      <div>\n        <OnLoading className=\"has-text-centered\" small></OnLoading>\n      </div>\n    )\n  }\n\n  if (!options.length) {\n    return (\n      <div>\n        <div className=\"has-text-grey is-size-7\">\n          We were unable to load your options. Please contact your\n          administrator.\n        </div>\n      </div>\n    )\n  }\n\n  return <div>{children}</div>\n}\n\nexport default React.memo(FormElementOptions)\n"]}
+{"version":3,"file":"FormElementOptions.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementOptions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,SAAS,MAAM,aAAa,CAAA;AAWnC,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,gCAAgC,GAC1B;IACN,IAAI,CAAC,OAAO,KAAI,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,mBAAmB,CAAA,EAAE;QACrE,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,EAAC,KAAK,SAAa,CACvD,CACP,CAAA;KACF;IAED,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACnB,OAAO,CACL;YACE,6BAAK,SAAS,EAAC,yBAAyB,8EAGlC,CACF,CACP,CAAA;KACF;IAED,OAAO,iCAAM,QAAQ,CAAO,CAAA;AAC9B,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport OnLoading from './OnLoading'\nimport { FormElementConditionallyShownElement } from '../../types/form'\n\ntype Props = {\n  options: FormTypes.ChoiceElementOption[] | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  children: React.ReactNode\n}\n\nfunction FormElementOptions({\n  options,\n  children,\n  conditionallyShownOptionsElement,\n}: Props) {\n  if (!options || conditionallyShownOptionsElement?.dependencyIsLoading) {\n    return (\n      <div>\n        <OnLoading className=\"has-text-centered\" small></OnLoading>\n      </div>\n    )\n  }\n\n  if (!options.length) {\n    return (\n      <div>\n        <div className=\"has-text-grey is-size-7\">\n          We were unable to load your options. Please contact your\n          administrator.\n        </div>\n      </div>\n    )\n  }\n\n  return <div>{children}</div>\n}\n\nexport default React.memo(FormElementOptions)\n"]}

package/dist/components/renderer/OneBlinkFormElements.js

@@ -59,8 +59,8 @@ function OneBlinkFormElements({ formId, elements, isEven, idPrefix, displayValid
 }
 export default React.memo(OneBlinkFormElements);
 const FormElementSwitch = React.memo(function OneBlinkFormElement({ formId, element, value, displayValidationMessage, formElementValidation, formElementConditionallyShown, isEven, id, onChange, onLookup, }) {
-    const conditionallyShownOptions = (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.type) === 'formElement'
-        ? formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.options
+    const conditionallyShownOptionsElement = (formElementConditionallyShown === null || formElementConditionallyShown === void 0 ? void 0 : formElementConditionallyShown.type) === 'formElement'
+        ? formElementConditionallyShown
         : undefined;
     const validationMessage = typeof formElementValidation === 'string'
         ? formElementValidation
@@ -110,15 +110,15 @@ const FormElementSwitch = React.memo(function OneBlinkFormElement({ formId, elem
         }
         case 'autocomplete': {
             return (React.createElement(LookupNotification, { autoLookupValue: value, element: element, onLookup: onLookup },
-                React.createElement(FormElementAutocomplete, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptions: conditionallyShownOptions })));
+                React.createElement(FormElementAutocomplete, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptionsElement: conditionallyShownOptionsElement })));
         }
         case 'select': {
             return (React.createElement(LookupNotification, { autoLookupValue: !element.multi ? value : undefined, element: element, onLookup: onLookup },
-                React.createElement(FormElementSelect, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptions: conditionallyShownOptions })));
+                React.createElement(FormElementSelect, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptionsElement: conditionallyShownOptionsElement })));
         }
         case 'radio': {
             return (React.createElement(LookupNotification, { autoLookupValue: value, element: element, onLookup: onLookup },
-                React.createElement(FormElementRadio, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptions: conditionallyShownOptions })));
+                React.createElement(FormElementRadio, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptionsElement: conditionallyShownOptionsElement })));
         }
         case 'draw': {
             return (React.createElement(FormElementSignature, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage }));
@@ -142,7 +142,7 @@ const FormElementSwitch = React.memo(function OneBlinkFormElement({ formId, elem
         }
         case 'checkboxes': {
             return (React.createElement(LookupNotification, { element: element, onLookup: onLookup },
-                React.createElement(FormElementCheckBoxes, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptions: conditionallyShownOptions })));
+                React.createElement(FormElementCheckBoxes, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptionsElement: conditionallyShownOptionsElement })));
         }
         case 'files': {
             return (React.createElement(LookupNotification, { element: element, onLookup: onLookup, autoLookupValue: value, stringifyAutoLookupValue: stringifyAttachments },
@@ -172,7 +172,7 @@ const FormElementSwitch = React.memo(function OneBlinkFormElement({ formId, elem
         }
         case 'compliance': {
             return (React.createElement(LookupNotification, { autoLookupValue: value ? value.value : undefined, element: element, onLookup: onLookup },
-                React.createElement(FormElementCompliance, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptions: conditionallyShownOptions, isEven: isEven })));
+                React.createElement(FormElementCompliance, { id: id, element: element, value: value, onChange: onChange, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, conditionallyShownOptionsElement: conditionallyShownOptionsElement, isEven: isEven })));
         }
         case 'freshdeskDependentField': {
             return (React.createElement(FormElementFreshdeskDependentField, { formId: formId, id: id, element: element, value: value, onChange: onChange, onLookup: onLookup, displayValidationMessages: displayValidationMessage, formElementValidation: formElementValidation, formElementConditionallyShown: formElementConditionallyShown }));