@oneblink/apps-react 6.10.0-beta.9 → 6.11.0-beta.1

package/dist/PaymentReceipt.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import { paymentService, submissionService, } from '@oneblink/apps';
+import { paymentService, submissionService, localisationService, } from '@oneblink/apps';
 import useIsMounted from './hooks/useIsMounted';
 import useQuery from './hooks/useQuery';
 import Modal from './components/renderer/Modal';
@@ -12,12 +12,13 @@ function PaymentReceipt({ onDone, onCancel, }) {
     const isMounted = useIsMounted();
     const query = useQuery();
     const history = useHistory();
-    const [{ isLoading, loadError, transaction, submissionResult, receiptItems }, setLoadState,] = React.useState({
+    const [{ isLoading, loadError, transaction, submissionResult, receiptItems, schedulingBooking, }, setLoadState,] = React.useState({
         isLoading: true,
         loadError: null,
         transaction: null,
         submissionResult: null,
         receiptItems: null,
+        schedulingBooking: null,
     });
     const [{ isRunningPostSubmissionAction, postSubmissionError }, setPostSubmissionState,] = React.useState({
         isRunningPostSubmissionAction: false,
@@ -46,11 +47,13 @@ function PaymentReceipt({ onDone, onCancel, }) {
             let newTransaction = null;
             let newSubmissionResult = null;
             let newReceiptItems = null;
+            let newSchedulingBooking = null;
             try {
                 const result = await handlePaymentQuerystring(query);
                 newTransaction = result.transaction;
                 newSubmissionResult = result.submissionResult;
                 newReceiptItems = result.receiptItems;
+                newSchedulingBooking = result.schedulingBooking;
             }
             catch (error) {
                 console.warn('Error while attempting to load transaction', error);
@@ -63,6 +66,7 @@ function PaymentReceipt({ onDone, onCancel, }) {
                     transaction: newTransaction,
                     submissionResult: newSubmissionResult,
                     receiptItems: newReceiptItems,
+                    schedulingBooking: newSchedulingBooking,
                 });
             }
         };
@@ -148,6 +152,10 @@ function PaymentReceipt({ onDone, onCancel, }) {
                         var _a, _b;
                         return (React.createElement(ReceiptListItem, { key: i, className: (_a = receiptItem.className) !== null && _a !== void 0 ? _a : '', valueClassName: (_b = receiptItem.valueClassName) !== null && _b !== void 0 ? _b : '', icon: receiptItem.icon, label: receiptItem.label, value: receiptItem.value, allowCopyToClipboard: receiptItem.allowCopyToClipboard }));
                     }),
+                schedulingBooking && transaction.isSuccess && (React.createElement(React.Fragment, null,
+                    schedulingBooking.location && (React.createElement(ReceiptListItem, { className: "ob-scheduling-receipt__location", valueClassName: "cypress-scheduling-receipt-location", icon: "location_on", label: "Location", value: schedulingBooking.location })),
+                    React.createElement(ReceiptListItem, { className: "ob-scheduling-receipt__start-time", valueClassName: "cypress-scheduling-receipt-start-time", icon: "schedule", label: "Start Time", value: localisationService.formatDatetimeLong(schedulingBooking.startTime) }),
+                    React.createElement(ReceiptListItem, { className: "ob-scheduling-receipt__end-time", valueClassName: "cypress-scheduling-receipt-end-time", icon: "schedule", label: "End Time", value: localisationService.formatDatetimeLong(schedulingBooking.endTime) }))),
                 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: handleDone })) : (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: handleCancel }),

package/dist/PaymentReceipt.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentReceipt.js","sourceRoot":"","sources":["../src/PaymentReceipt.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport {\n  paymentService,\n  submissionService,\n  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'\nimport MaterialIcon from './components/MaterialIcon'\n\nconst { handlePaymentQuerystring, handlePaymentSubmissionEvent } =\n  paymentService\n\nfunction PaymentReceipt({\n  onDone,\n  onCancel,\n}: {\n  /**\n   * The function to call when the user clicks 'Done'. See\n   * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n   * for the structure of the argument.\n   */\n  onDone: (\n    submissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n  /**\n   * The function to call when the user clicks 'Cancel'. See\n   * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n   * for the structure of the argument.\n   */\n  onCancel: (\n    submissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  const isMounted = useIsMounted()\n  const query = useQuery()\n  const history = useHistory()\n\n  const [\n    { isLoading, loadError, transaction, submissionResult, receiptItems },\n    setLoadState,\n  ] = React.useState<{\n    isLoading: boolean\n    loadError: Error | null\n    transaction: paymentService.HandlePaymentResult['transaction'] | null\n    submissionResult: submissionService.FormSubmissionResult | null\n    receiptItems: paymentService.PaymentReceiptItem[] | null\n  }>({\n    isLoading: true,\n    loadError: null,\n    transaction: null,\n    submissionResult: null,\n    receiptItems: null,\n  })\n  const [\n    { isRunningPostSubmissionAction, postSubmissionError },\n    setPostSubmissionState,\n  ] = React.useState<{\n    isRunningPostSubmissionAction: boolean\n    postSubmissionError: OneBlinkAppsError | null\n  }>({\n    isRunningPostSubmissionAction: false,\n    postSubmissionError: null,\n  })\n  const clearPostSubmissionError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      postSubmissionError: null,\n    }))\n  }, [])\n  const [{ isRetrying, retryError }, setRetryState] = React.useState<{\n    isRetrying: boolean\n    retryError: OneBlinkAppsError | null\n  }>({\n    isRetrying: false,\n    retryError: null,\n  })\n  const clearRetryError = React.useCallback(() => {\n    setRetryState((currentState) => ({\n      ...currentState,\n      retryError: null,\n    }))\n  }, [])\n\n  React.useEffect(() => {\n    let ignore = false\n\n    const getTransaction = async () => {\n      let newError = null\n      let newTransaction = null\n      let newSubmissionResult = null\n      let newReceiptItems = null\n      try {\n        const result = await handlePaymentQuerystring(query)\n        newTransaction = result.transaction\n        newSubmissionResult = result.submissionResult\n        newReceiptItems = result.receiptItems\n      } catch (error) {\n        console.warn('Error while attempting to load transaction', error)\n        newError = error as Error\n      }\n\n      if (!ignore) {\n        setLoadState({\n          isLoading: false,\n          loadError: newError,\n          transaction: newTransaction,\n          submissionResult: newSubmissionResult,\n          receiptItems: newReceiptItems,\n        })\n      }\n    }\n    getTransaction()\n\n    return () => {\n      ignore = true\n    }\n  }, [query])\n\n  const executePostSubmissionAction = React.useCallback(\n    async (\n      action: (\n        submissionRresult: submissionService.FormSubmissionResult,\n      ) => Promise<void>,\n    ) => {\n      if (!submissionResult || !isMounted.current) {\n        return\n      }\n\n      setPostSubmissionState({\n        isRunningPostSubmissionAction: true,\n        postSubmissionError: null,\n      })\n\n      let newError = null\n      try {\n        await action({ ...submissionResult, payment: null })\n      } catch (error) {\n        console.warn('Error while running post submission action', error)\n        newError = error as OneBlinkAppsError\n      }\n\n      if (isMounted.current) {\n        setPostSubmissionState({\n          isRunningPostSubmissionAction: false,\n          postSubmissionError: newError,\n        })\n      }\n    },\n    [isMounted, submissionResult],\n  )\n\n  const handleDone = React.useCallback(async () => {\n    executePostSubmissionAction(onDone)\n  }, [executePostSubmissionAction, onDone])\n\n  const handleCancel = React.useCallback(() => {\n    executePostSubmissionAction(onCancel)\n  }, [executePostSubmissionAction, onCancel])\n\n  const handleTryAgain = React.useCallback(async () => {\n    if (!submissionResult || !submissionResult.payment) {\n      return\n    }\n    const paymentSubmissionEvent = submissionResult.payment.submissionEvent\n\n    if (isMounted.current) {\n      setRetryState({\n        isRetrying: true,\n        retryError: null,\n      })\n    }\n\n    let newError = null\n    try {\n      submissionResult.payment = await handlePaymentSubmissionEvent({\n        amount: submissionResult.payment.amount,\n        formSubmissionResult: submissionResult,\n        paymentSubmissionEvent,\n        paymentReceiptUrl: submissionResult.payment.paymentReceiptUrl,\n        paymentFormUrl: submissionResult.payment.paymentFormUrl,\n      })\n      await submissionService.executePostSubmissionAction(\n        submissionResult,\n        history.push,\n      )\n    } catch (error) {\n      console.warn('Error while attempting to retry transaction', error)\n      newError = error as OneBlinkAppsError\n    }\n\n    if (isMounted.current) {\n      setRetryState({\n        isRetrying: false,\n        retryError: newError,\n      })\n    }\n  }, [history.push, isMounted, submissionResult])\n\n  return (\n    <div>\n      {isLoading && (\n        <section>\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\"></OnLoading>\n            <span>Retrieving transaction details...</span>\n          </div>\n        </section>\n      )}\n\n      {transaction && (\n        <Receipt\n          className=\"ob-payment-receipt\"\n          containerClassName=\"ob-payment-receipt__container\"\n        >\n          <ReceiptList\n            successIconClassName=\"ob-payment-receipt__success-icon\"\n            warningIconClassName=\"ob-payment-receipt__warning-icon\"\n            warningMessageClassName=\"ob-payment-receipt__warning-message cypress-payment-receipt-warning-message\"\n            warningMessage={\n              transaction.isSuccess\n                ? undefined\n                : transaction.errorMessage || undefined\n            }\n          >\n            {receiptItems &&\n              receiptItems.length &&\n              receiptItems.map((receiptItem, i) => {\n                return (\n                  <ReceiptListItem\n                    key={i}\n                    className={receiptItem.className ?? ''}\n                    valueClassName={receiptItem.valueClassName ?? ''}\n                    icon={receiptItem.icon}\n                    label={receiptItem.label}\n                    value={receiptItem.value}\n                    allowCopyToClipboard={receiptItem.allowCopyToClipboard}\n                  />\n                )\n              })}\n            <ReceiptListItem\n              className=\"ob-payment-receipt__warning\"\n              valueClassName=\"cypress-payment-receipt-warning\"\n              label=\"Warning\"\n              value=\"Please do not click back in your browser, doing so will cause issues with your payment.\"\n            />\n          </ReceiptList>\n\n          <div className=\"buttons\">\n            {transaction.isSuccess ? (\n              <ReceiptButton\n                className=\"is-primary ob-payment-receipt__button ob-payment-receipt__okay-button cypress-payment-receipt-okay-button\"\n                label=\"Done\"\n                isLoading={isRunningPostSubmissionAction}\n                onClick={handleDone}\n              />\n            ) : (\n              <>\n                <ReceiptButton\n                  className=\"ob-payment-receipt__button ob-payment-receipt__cancel-button cypress-payment-receipt-cancel-button\"\n                  label=\"Cancel\"\n                  isDisabled={isRetrying}\n                  isLoading={isRunningPostSubmissionAction}\n                  onClick={handleCancel}\n                />\n                <ReceiptButton\n                  className=\"is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button\"\n                  label=\"Try Again\"\n                  isDisabled={isRunningPostSubmissionAction}\n                  isLoading={isRetrying}\n                  onClick={handleTryAgain}\n                />\n              </>\n            )}\n          </div>\n        </Receipt>\n      )}\n\n      {loadError && (\n        <section className=\"cypress-payment-receipt-loading-error-message\">\n          <div className=\"ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8\">\n            <MaterialIcon className=\"ob-payment-receipt__error-icon has-text-danger icon-x-large\">\n              error\n            </MaterialIcon>\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              autoFocus\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              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          {postSubmissionError.message}\n        </Modal>\n      )}\n    </div>\n  )\n}\n\n/**\n * Component for rendering a OneBlink Form Payment Receipt. This component will\n * payment receipt but it is up to the developer to implement what happens when\n * the user clicks 'Done'.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function ReceiptContainer() {\n *   const handleDone = React.useCallback(async () => {\n *     console.log('All done!')\n *   }, [])\n *   const handleCancel = React.useCallback(async () => {\n *     console.log('Cancelled!')\n *   }, [])\n *\n *   return <PaymentReceipt onDone={handleDone} onCancel={handleCancel} />\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <ReceiptContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(PaymentReceipt)\n"]}
+{"version":3,"file":"PaymentReceipt.js","sourceRoot":"","sources":["../src/PaymentReceipt.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport {\n  paymentService,\n  submissionService,\n  OneBlinkAppsError,\n  schedulingService,\n  localisationService,\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'\nimport MaterialIcon from './components/MaterialIcon'\n\nconst { handlePaymentQuerystring, handlePaymentSubmissionEvent } =\n  paymentService\n\nfunction PaymentReceipt({\n  onDone,\n  onCancel,\n}: {\n  /**\n   * The function to call when the user clicks 'Done'. See\n   * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n   * for the structure of the argument.\n   */\n  onDone: (\n    submissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n  /**\n   * The function to call when the user clicks 'Cancel'. See\n   * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n   * for the structure of the argument.\n   */\n  onCancel: (\n    submissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  const isMounted = useIsMounted()\n  const query = useQuery()\n  const history = useHistory()\n\n  const [\n    {\n      isLoading,\n      loadError,\n      transaction,\n      submissionResult,\n      receiptItems,\n      schedulingBooking,\n    },\n    setLoadState,\n  ] = React.useState<{\n    isLoading: boolean\n    loadError: Error | null\n    transaction: paymentService.HandlePaymentResult['transaction'] | null\n    submissionResult: submissionService.FormSubmissionResult | null\n    receiptItems: paymentService.PaymentReceiptItem[] | null\n    schedulingBooking: schedulingService.SchedulingBooking | null\n  }>({\n    isLoading: true,\n    loadError: null,\n    transaction: null,\n    submissionResult: null,\n    receiptItems: null,\n    schedulingBooking: null,\n  })\n  const [\n    { isRunningPostSubmissionAction, postSubmissionError },\n    setPostSubmissionState,\n  ] = React.useState<{\n    isRunningPostSubmissionAction: boolean\n    postSubmissionError: OneBlinkAppsError | null\n  }>({\n    isRunningPostSubmissionAction: false,\n    postSubmissionError: null,\n  })\n  const clearPostSubmissionError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      postSubmissionError: null,\n    }))\n  }, [])\n  const [{ isRetrying, retryError }, setRetryState] = React.useState<{\n    isRetrying: boolean\n    retryError: OneBlinkAppsError | null\n  }>({\n    isRetrying: false,\n    retryError: null,\n  })\n  const clearRetryError = React.useCallback(() => {\n    setRetryState((currentState) => ({\n      ...currentState,\n      retryError: null,\n    }))\n  }, [])\n\n  React.useEffect(() => {\n    let ignore = false\n\n    const getTransaction = async () => {\n      let newError = null\n      let newTransaction = null\n      let newSubmissionResult = null\n      let newReceiptItems = null\n      let newSchedulingBooking = null\n      try {\n        const result = await handlePaymentQuerystring(query)\n        newTransaction = result.transaction\n        newSubmissionResult = result.submissionResult\n        newReceiptItems = result.receiptItems\n        newSchedulingBooking = result.schedulingBooking\n      } catch (error) {\n        console.warn('Error while attempting to load transaction', error)\n        newError = error as Error\n      }\n\n      if (!ignore) {\n        setLoadState({\n          isLoading: false,\n          loadError: newError,\n          transaction: newTransaction,\n          submissionResult: newSubmissionResult,\n          receiptItems: newReceiptItems,\n          schedulingBooking: newSchedulingBooking,\n        })\n      }\n    }\n    getTransaction()\n\n    return () => {\n      ignore = true\n    }\n  }, [query])\n\n  const executePostSubmissionAction = React.useCallback(\n    async (\n      action: (\n        submissionRresult: submissionService.FormSubmissionResult,\n      ) => Promise<void>,\n    ) => {\n      if (!submissionResult || !isMounted.current) {\n        return\n      }\n\n      setPostSubmissionState({\n        isRunningPostSubmissionAction: true,\n        postSubmissionError: null,\n      })\n\n      let newError = null\n      try {\n        await action({ ...submissionResult, payment: null })\n      } catch (error) {\n        console.warn('Error while running post submission action', error)\n        newError = error as OneBlinkAppsError\n      }\n\n      if (isMounted.current) {\n        setPostSubmissionState({\n          isRunningPostSubmissionAction: false,\n          postSubmissionError: newError,\n        })\n      }\n    },\n    [isMounted, submissionResult],\n  )\n\n  const handleDone = React.useCallback(async () => {\n    executePostSubmissionAction(onDone)\n  }, [executePostSubmissionAction, onDone])\n\n  const handleCancel = React.useCallback(() => {\n    executePostSubmissionAction(onCancel)\n  }, [executePostSubmissionAction, onCancel])\n\n  const handleTryAgain = React.useCallback(async () => {\n    if (!submissionResult || !submissionResult.payment) {\n      return\n    }\n    const paymentSubmissionEvent = submissionResult.payment.submissionEvent\n\n    if (isMounted.current) {\n      setRetryState({\n        isRetrying: true,\n        retryError: null,\n      })\n    }\n\n    let newError = null\n    try {\n      submissionResult.payment = await handlePaymentSubmissionEvent({\n        amount: submissionResult.payment.amount,\n        formSubmissionResult: submissionResult,\n        paymentSubmissionEvent,\n        paymentReceiptUrl: submissionResult.payment.paymentReceiptUrl,\n        paymentFormUrl: submissionResult.payment.paymentFormUrl,\n      })\n      await submissionService.executePostSubmissionAction(\n        submissionResult,\n        history.push,\n      )\n    } catch (error) {\n      console.warn('Error while attempting to retry transaction', error)\n      newError = error as OneBlinkAppsError\n    }\n\n    if (isMounted.current) {\n      setRetryState({\n        isRetrying: false,\n        retryError: newError,\n      })\n    }\n  }, [history.push, isMounted, submissionResult])\n\n  return (\n    <div>\n      {isLoading && (\n        <section>\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\"></OnLoading>\n            <span>Retrieving transaction details...</span>\n          </div>\n        </section>\n      )}\n\n      {transaction && (\n        <Receipt\n          className=\"ob-payment-receipt\"\n          containerClassName=\"ob-payment-receipt__container\"\n        >\n          <ReceiptList\n            successIconClassName=\"ob-payment-receipt__success-icon\"\n            warningIconClassName=\"ob-payment-receipt__warning-icon\"\n            warningMessageClassName=\"ob-payment-receipt__warning-message cypress-payment-receipt-warning-message\"\n            warningMessage={\n              transaction.isSuccess\n                ? undefined\n                : transaction.errorMessage || undefined\n            }\n          >\n            {receiptItems &&\n              receiptItems.length &&\n              receiptItems.map((receiptItem, i) => {\n                return (\n                  <ReceiptListItem\n                    key={i}\n                    className={receiptItem.className ?? ''}\n                    valueClassName={receiptItem.valueClassName ?? ''}\n                    icon={receiptItem.icon}\n                    label={receiptItem.label}\n                    value={receiptItem.value}\n                    allowCopyToClipboard={receiptItem.allowCopyToClipboard}\n                  />\n                )\n              })}\n            {schedulingBooking && transaction.isSuccess && (\n              <>\n                {schedulingBooking.location && (\n                  <ReceiptListItem\n                    className=\"ob-scheduling-receipt__location\"\n                    valueClassName=\"cypress-scheduling-receipt-location\"\n                    icon=\"location_on\"\n                    label=\"Location\"\n                    value={schedulingBooking.location}\n                  />\n                )}\n\n                <ReceiptListItem\n                  className=\"ob-scheduling-receipt__start-time\"\n                  valueClassName=\"cypress-scheduling-receipt-start-time\"\n                  icon=\"schedule\"\n                  label=\"Start Time\"\n                  value={localisationService.formatDatetimeLong(\n                    schedulingBooking.startTime,\n                  )}\n                />\n\n                <ReceiptListItem\n                  className=\"ob-scheduling-receipt__end-time\"\n                  valueClassName=\"cypress-scheduling-receipt-end-time\"\n                  icon=\"schedule\"\n                  label=\"End Time\"\n                  value={localisationService.formatDatetimeLong(\n                    schedulingBooking.endTime,\n                  )}\n                />\n              </>\n            )}\n            <ReceiptListItem\n              className=\"ob-payment-receipt__warning\"\n              valueClassName=\"cypress-payment-receipt-warning\"\n              label=\"Warning\"\n              value=\"Please do not click back in your browser, doing so will cause issues with your payment.\"\n            />\n          </ReceiptList>\n\n          <div className=\"buttons\">\n            {transaction.isSuccess ? (\n              <ReceiptButton\n                className=\"is-primary ob-payment-receipt__button ob-payment-receipt__okay-button cypress-payment-receipt-okay-button\"\n                label=\"Done\"\n                isLoading={isRunningPostSubmissionAction}\n                onClick={handleDone}\n              />\n            ) : (\n              <>\n                <ReceiptButton\n                  className=\"ob-payment-receipt__button ob-payment-receipt__cancel-button cypress-payment-receipt-cancel-button\"\n                  label=\"Cancel\"\n                  isDisabled={isRetrying}\n                  isLoading={isRunningPostSubmissionAction}\n                  onClick={handleCancel}\n                />\n                <ReceiptButton\n                  className=\"is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button\"\n                  label=\"Try Again\"\n                  isDisabled={isRunningPostSubmissionAction}\n                  isLoading={isRetrying}\n                  onClick={handleTryAgain}\n                />\n              </>\n            )}\n          </div>\n        </Receipt>\n      )}\n\n      {loadError && (\n        <section className=\"cypress-payment-receipt-loading-error-message\">\n          <div className=\"ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8\">\n            <MaterialIcon className=\"ob-payment-receipt__error-icon has-text-danger icon-x-large\">\n              error\n            </MaterialIcon>\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              autoFocus\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              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          {postSubmissionError.message}\n        </Modal>\n      )}\n    </div>\n  )\n}\n\n/**\n * Component for rendering a OneBlink Form Payment Receipt. This component will\n * payment receipt but it is up to the developer to implement what happens when\n * the user clicks 'Done'.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function ReceiptContainer() {\n *   const handleDone = React.useCallback(async () => {\n *     console.log('All done!')\n *   }, [])\n *   const handleCancel = React.useCallback(async () => {\n *     console.log('Cancelled!')\n *   }, [])\n *\n *   return <PaymentReceipt onDone={handleDone} onCancel={handleCancel} />\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <ReceiptContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(PaymentReceipt)\n"]}

package/dist/components/calendar-bookings/CalendarBookingsForm.js

@@ -52,14 +52,14 @@ function NylasBookingForm({ submissionId, name, email, configurationId, sessionI
             }));
         }
     }, [onDone]);
-    const handleConfirmedBooking = React.useCallback(async () => {
+    const handleConfirmedBooking = React.useCallback(async (schedulingBooking) => {
         setPostSubmissionState((currentState) => ({
             ...currentState,
             isConfirmingBooking: true,
             confirmingBookingError: null,
         }));
         try {
-            const formSubmissionResult = await onBookingConfirmed();
+            const formSubmissionResult = await onBookingConfirmed(schedulingBooking);
             setPostSubmissionState((currentState) => ({
                 ...currentState,
                 formSubmissionResult,
@@ -96,14 +96,21 @@ function NylasBookingForm({ submissionId, name, email, configurationId, sessionI
         React.createElement("div", { className: "ob-scheduling-booking-form" },
             !(formSubmissionResult === null || formSubmissionResult === void 0 ? void 0 : formSubmissionResult.payment) && (React.createElement(NylasScheduling, { eventOverrides: {
                     timeslotConfirmed: onTimeSlotConfirmed,
-                    bookedEventInfo: async (event) => {
-                        var _a;
+                    async bookedEventInfo(event) {
+                        var _a, _b;
+                        console.log('bookedEventInfo event', event);
                         event.preventDefault();
-                        if (event.detail.error) {
-                            setBookingError((_a = event.detail.error.message) !== null && _a !== void 0 ? _a : 'Calendar Booking Error');
+                        if ('error' in event.detail) {
+                            setBookingError((_b = (_a = event.detail.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : 'Calendar Booking Error');
                         }
-                        else {
-                            await handleConfirmedBooking();
+                        else if ('data' in event.detail) {
+                            await handleConfirmedBooking({
+                                submissionId,
+                                startTime: new Date(event.detail.data.start_time * 1000),
+                                endTime: new Date(event.detail.data.end_time * 1000),
+                                location: event.detail.data.location,
+                                isReschedule: false,
+                            });
                         }
                     },
                 }, bookingInfo: {

package/dist/components/calendar-bookings/CalendarBookingsForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarBookingsForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { Collapse, Fade } from '@mui/material'\nimport {\n  schedulingService,\n  submissionService,\n  OneBlinkAppsError,\n} from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { Receipt } from '../receipts'\nimport ErrorModal from './ErrorModal'\nimport OnLoading from '../renderer/OnLoading'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasBookingForm({\n  submissionId,\n  name,\n  email,\n  configurationId,\n  sessionId,\n  onBookingConfirmed,\n  onDone,\n}: Awaited<\n  ReturnType<typeof schedulingService.createNylasNewBookingSession>\n> & {\n  submissionId: string\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  const { setBookingError, onTimeSlotConfirmed } = useCalendarBookings()\n\n  const [\n    {\n      formSubmissionResult,\n      isRunningPostSubmissionAction,\n      postSubmissionError,\n      isConfirmingBooking,\n      confirmingBookingError,\n    },\n    setPostSubmissionState,\n  ] = React.useState<{\n    formSubmissionResult: submissionService.FormSubmissionResult | null\n    isRunningPostSubmissionAction: boolean\n    postSubmissionError: OneBlinkAppsError | null\n    isConfirmingBooking: boolean\n    confirmingBookingError: OneBlinkAppsError | null\n  }>({\n    formSubmissionResult: null,\n    isRunningPostSubmissionAction: false,\n    postSubmissionError: null,\n    isConfirmingBooking: false,\n    confirmingBookingError: null,\n  })\n  const clearPostSubmissionError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      postSubmissionError: null,\n    }))\n  }, [])\n  const clearConfirmingBookingError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      confirmingBookingError: null,\n    }))\n  }, [])\n\n  const executePostSubmissionAction = React.useCallback(\n    async (formSubmissionResult: submissionService.FormSubmissionResult) => {\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        formSubmissionResult,\n        isRunningPostSubmissionAction: true,\n        postSubmissionError: null,\n      }))\n\n      try {\n        await onDone({\n          ...formSubmissionResult,\n          scheduling: null,\n        })\n      } catch (error) {\n        console.warn('Error while running post submission action', error)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          formSubmissionResult,\n          isRunningPostSubmissionAction: false,\n          postSubmissionError: error as OneBlinkAppsError,\n        }))\n      }\n    },\n    [onDone],\n  )\n\n  const handleConfirmedBooking = React.useCallback(async () => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      isConfirmingBooking: true,\n      confirmingBookingError: null,\n    }))\n\n    try {\n      const formSubmissionResult = await onBookingConfirmed()\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        formSubmissionResult,\n      }))\n      if (formSubmissionResult.payment) {\n        setTimeout(async () => {\n          executePostSubmissionAction(formSubmissionResult)\n        }, 2000)\n      } else {\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          isConfirmingBooking: false,\n          formSubmissionResult,\n        }))\n      }\n    } catch (error) {\n      console.warn('Error while handling confirmed booking', error)\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        isConfirmingBooking: false,\n        confirmingBookingError: error as OneBlinkAppsError,\n      }))\n    }\n  }, [onBookingConfirmed, executePostSubmissionAction])\n\n  return (\n    <>\n      <Collapse in={isConfirmingBooking}>\n        <div className=\"has-margin-top-1\">\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\" />\n            <Fade in={!!formSubmissionResult?.payment}>\n              <span>Redirecting to payment</span>\n            </Fade>\n          </div>\n        </div>\n      </Collapse>\n\n      <div className=\"ob-scheduling-booking-form\">\n        {!formSubmissionResult?.payment && (\n          <NylasScheduling\n            eventOverrides={{\n              timeslotConfirmed: onTimeSlotConfirmed,\n              bookedEventInfo: async (event) => {\n                event.preventDefault()\n\n                if (event.detail.error) {\n                  setBookingError(\n                    event.detail.error.message ?? 'Calendar Booking Error',\n                  )\n                } else {\n                  await handleConfirmedBooking()\n                }\n              },\n            }}\n            bookingInfo={{\n              primaryParticipant: {\n                name: name ?? '',\n                email: email ?? '',\n              },\n              additionalFields: {\n                submissionId: {\n                  value: submissionId,\n                  type: 'text',\n                },\n              },\n            }}\n            enableUserFeedback={false}\n            configurationId={configurationId}\n            sessionId={sessionId}\n            nylasBranding={false}\n          />\n        )}\n\n        {formSubmissionResult && !formSubmissionResult.payment && (\n          <Receipt\n            className=\"ob-scheduling-receipt\"\n            containerClassName=\"ob-scheduling-receipt__container\"\n          >\n            <div className=\"buttons\">\n              <button\n                type=\"button\"\n                className={clsx(\n                  'is-primary button ob-button ob-scheduling-receipt__button ob-scheduling-receipt__okay-button cypress-scheduling-receipt-okay-button',\n                  { 'is-loading': isRunningPostSubmissionAction },\n                )}\n                disabled={isRunningPostSubmissionAction}\n                onClick={() =>\n                  executePostSubmissionAction(formSubmissionResult)\n                }\n              >\n                Done\n              </button>\n            </div>\n          </Receipt>\n        )}\n\n        <ErrorModal\n          error={postSubmissionError}\n          onClose={clearPostSubmissionError}\n        />\n\n        <ErrorModal\n          error={confirmingBookingError}\n          onClose={clearConfirmingBookingError}\n        />\n      </div>\n    </>\n  )\n}\n\nfunction CalendarBookingsForm({\n  onDone,\n}: {\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  return (\n    <CalendarBookingsContainer\n      fetchConfiguration={schedulingService.createNylasNewBookingSession}\n    >\n      {(props) => <NylasBookingForm {...props} onDone={onDone} />}\n    </CalendarBookingsContainer>\n  )\n}\n\nexport default React.memo(CalendarBookingsForm)\n"]}
+{"version":3,"file":"CalendarBookingsForm.js","sourceRoot":"","sources":["../../../src/components/calendar-bookings/CalendarBookingsForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { NylasScheduling } from '@nylas/react'\nimport { NylasSchedulerResponse, NylasEvent } from '@nylas/web-elements'\nimport { Collapse, Fade } from '@mui/material'\nimport {\n  schedulingService,\n  submissionService,\n  OneBlinkAppsError,\n} from '@oneblink/apps'\nimport clsx from 'clsx'\nimport { Receipt } from '../receipts'\nimport ErrorModal from './ErrorModal'\nimport OnLoading from '../renderer/OnLoading'\nimport CalendarBookingsContainer from './CalendarBookingsContainer'\nimport useCalendarBookings from './CalendarBookingsProvider'\n\nfunction NylasBookingForm({\n  submissionId,\n  name,\n  email,\n  configurationId,\n  sessionId,\n  onBookingConfirmed,\n  onDone,\n}: Awaited<\n  ReturnType<typeof schedulingService.createNylasNewBookingSession>\n> & {\n  submissionId: string\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  const { setBookingError, onTimeSlotConfirmed } = useCalendarBookings()\n\n  const [\n    {\n      formSubmissionResult,\n      isRunningPostSubmissionAction,\n      postSubmissionError,\n      isConfirmingBooking,\n      confirmingBookingError,\n    },\n    setPostSubmissionState,\n  ] = React.useState<{\n    formSubmissionResult: submissionService.FormSubmissionResult | null\n    isRunningPostSubmissionAction: boolean\n    postSubmissionError: OneBlinkAppsError | null\n    isConfirmingBooking: boolean\n    confirmingBookingError: OneBlinkAppsError | null\n  }>({\n    formSubmissionResult: null,\n    isRunningPostSubmissionAction: false,\n    postSubmissionError: null,\n    isConfirmingBooking: false,\n    confirmingBookingError: null,\n  })\n  const clearPostSubmissionError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      postSubmissionError: null,\n    }))\n  }, [])\n  const clearConfirmingBookingError = React.useCallback(() => {\n    setPostSubmissionState((currentState) => ({\n      ...currentState,\n      confirmingBookingError: null,\n    }))\n  }, [])\n\n  const executePostSubmissionAction = React.useCallback(\n    async (formSubmissionResult: submissionService.FormSubmissionResult) => {\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        formSubmissionResult,\n        isRunningPostSubmissionAction: true,\n        postSubmissionError: null,\n      }))\n\n      try {\n        await onDone({\n          ...formSubmissionResult,\n          scheduling: null,\n        })\n      } catch (error) {\n        console.warn('Error while running post submission action', error)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          formSubmissionResult,\n          isRunningPostSubmissionAction: false,\n          postSubmissionError: error as OneBlinkAppsError,\n        }))\n      }\n    },\n    [onDone],\n  )\n\n  const handleConfirmedBooking = React.useCallback(\n    async (schedulingBooking: schedulingService.SchedulingBooking) => {\n      setPostSubmissionState((currentState) => ({\n        ...currentState,\n        isConfirmingBooking: true,\n        confirmingBookingError: null,\n      }))\n\n      try {\n        const formSubmissionResult = await onBookingConfirmed(schedulingBooking)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          formSubmissionResult,\n        }))\n        if (formSubmissionResult.payment) {\n          setTimeout(async () => {\n            executePostSubmissionAction(formSubmissionResult)\n          }, 2000)\n        } else {\n          setPostSubmissionState((currentState) => ({\n            ...currentState,\n            isConfirmingBooking: false,\n            formSubmissionResult,\n          }))\n        }\n      } catch (error) {\n        console.warn('Error while handling confirmed booking', error)\n        setPostSubmissionState((currentState) => ({\n          ...currentState,\n          isConfirmingBooking: false,\n          confirmingBookingError: error as OneBlinkAppsError,\n        }))\n      }\n    },\n    [onBookingConfirmed, executePostSubmissionAction],\n  )\n\n  return (\n    <>\n      <Collapse in={isConfirmingBooking}>\n        <div className=\"has-margin-top-1\">\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\" />\n            <Fade in={!!formSubmissionResult?.payment}>\n              <span>Redirecting to payment</span>\n            </Fade>\n          </div>\n        </div>\n      </Collapse>\n\n      <div className=\"ob-scheduling-booking-form\">\n        {!formSubmissionResult?.payment && (\n          <NylasScheduling\n            eventOverrides={{\n              timeslotConfirmed: onTimeSlotConfirmed,\n              async bookedEventInfo(\n                event: CustomEvent<\n                  NylasSchedulerResponse<\n                    NylasEvent & {\n                      event_id: string\n                      additional_guests: Array<{\n                        name: string\n                        email: string\n                      }>\n                      guest: {\n                        name: string\n                        email: string\n                      }\n                      additional_fields: Record<string, unknown>\n                      start_time: number\n                      end_time: number\n                      email_language: string\n                      timezone: string\n                      location?: string\n                    }\n                  >\n                >,\n              ) {\n                console.log('bookedEventInfo event', event)\n\n                event.preventDefault()\n\n                if ('error' in event.detail) {\n                  setBookingError(\n                    event.detail.error?.message ?? 'Calendar Booking Error',\n                  )\n                } else if ('data' in event.detail) {\n                  await handleConfirmedBooking({\n                    submissionId,\n                    startTime: new Date(event.detail.data.start_time * 1000),\n                    endTime: new Date(event.detail.data.end_time * 1000),\n                    location: event.detail.data.location,\n                    isReschedule: false,\n                  })\n                }\n              },\n            }}\n            bookingInfo={{\n              primaryParticipant: {\n                name: name ?? '',\n                email: email ?? '',\n              },\n              additionalFields: {\n                submissionId: {\n                  value: submissionId,\n                  type: 'text',\n                },\n              },\n            }}\n            enableUserFeedback={false}\n            configurationId={configurationId}\n            sessionId={sessionId}\n            nylasBranding={false}\n          />\n        )}\n\n        {formSubmissionResult && !formSubmissionResult.payment && (\n          <Receipt\n            className=\"ob-scheduling-receipt\"\n            containerClassName=\"ob-scheduling-receipt__container\"\n          >\n            <div className=\"buttons\">\n              <button\n                type=\"button\"\n                className={clsx(\n                  'is-primary button ob-button ob-scheduling-receipt__button ob-scheduling-receipt__okay-button cypress-scheduling-receipt-okay-button',\n                  { 'is-loading': isRunningPostSubmissionAction },\n                )}\n                disabled={isRunningPostSubmissionAction}\n                onClick={() =>\n                  executePostSubmissionAction(formSubmissionResult)\n                }\n              >\n                Done\n              </button>\n            </div>\n          </Receipt>\n        )}\n\n        <ErrorModal\n          error={postSubmissionError}\n          onClose={clearPostSubmissionError}\n        />\n\n        <ErrorModal\n          error={confirmingBookingError}\n          onClose={clearConfirmingBookingError}\n        />\n      </div>\n    </>\n  )\n}\n\nfunction CalendarBookingsForm({\n  onDone,\n}: {\n  onDone: (\n    formSubmissionResult: submissionService.FormSubmissionResult,\n  ) => Promise<void>\n}) {\n  return (\n    <CalendarBookingsContainer\n      fetchConfiguration={schedulingService.createNylasNewBookingSession}\n    >\n      {(props) => <NylasBookingForm {...props} onDone={onDone} />}\n    </CalendarBookingsContainer>\n  )\n}\n\nexport default React.memo(CalendarBookingsForm)\n"]}

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

@@ -4,7 +4,6 @@ export declare const LargeIcon: import("@emotion/styled").StyledComponent<import
 }, "className" | "style" | "children" | "classes" | "sx" | "color" | "fontSize" | "baseClassName"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 type Props = {
     ssoSetupUrl?: string;
-    isExternalIdentityProviderUser?: boolean;
 };
 /**
  * React Component that provides a mechanism for app users to configure Multi
@@ -42,5 +41,5 @@ type Props = {
  * @returns
  * @group Components
  */
-export default function MultiFactorAuthentication({ ssoSetupUrl, isExternalIdentityProviderUser, }: Props): React.JSX.Element;
+export default function MultiFactorAuthentication({ ssoSetupUrl }: Props): React.JSX.Element;
 export {};

package/dist/components/mfa/MultiFactorAuthentication.js

@@ -27,8 +27,8 @@ function MfaStatus({ isExternalIdentityProviderUser, isLoading, loadingError, lo
     }
     return (React.createElement(Chip, { label: "Disabled", icon: React.createElement(MaterialIcon, { color: "warning" }, "remove_moderator") }));
 }
-function MfaSetup({ ssoSetupUrl, isExternalIdentityProviderUser, }) {
-    const { setupError, isMfaEnabled, isDisablingMfa, isSettingUpMfa, mfaSetup, beginMfaSetup, cancelMfaSetup, completeMfaSetup, clearMfaSetupError, beginDisablingMfa, completeDisablingMfa, cancelDisablingMfa, } = useMfa();
+function MfaSetup({ ssoSetupUrl }) {
+    const { setupError, isMfaEnabled, isDisablingMfa, isSettingUpMfa, mfaSetup, beginMfaSetup, cancelMfaSetup, completeMfaSetup, clearMfaSetupError, beginDisablingMfa, completeDisablingMfa, cancelDisablingMfa, isExternalIdentityProviderUser, } = useMfa();
     if (ssoSetupUrl) {
         return (React.createElement(Grid, { item: true },
             React.createElement(Button, { variant: "outlined", size: "small", component: "a", href: ssoSetupUrl, target: "_blank", rel: "noopener noreferrer", "data-cypress": "configure-mfa-button" }, "Configure MFA")));
@@ -91,8 +91,8 @@ function MfaSetup({ ssoSetupUrl, isExternalIdentityProviderUser, }) {
  * @returns
  * @group Components
  */
-export default function MultiFactorAuthentication({ ssoSetupUrl, isExternalIdentityProviderUser, }) {
-    const { loadingError, isLoading, isMfaEnabled, loadMfa } = useMfa();
+export default function MultiFactorAuthentication({ ssoSetupUrl }) {
+    const { loadingError, isLoading, isMfaEnabled, loadMfa, isExternalIdentityProviderUser, } = useMfa();
     return (React.createElement(Grid, { item: true, xs: true, lg: 8 },
         React.createElement(Box, { padding: 3 },
             React.createElement(Paper, null,
@@ -107,6 +107,6 @@ export default function MultiFactorAuthentication({ ssoSetupUrl, isExternalIdent
                                 React.createElement(Divider, null)),
                             React.createElement(Typography, { variant: "body2", paragraph: true }, "Multi factor authentication (MFA), also known as two factor authentication (2FA), is a best practice that requires a second authentication factor in addition to user name and password sign-in credentials. We strongly recommend enabling MFA to enhance your account security."),
                             React.createElement(Grid, { container: true, justifyContent: "flex-end", spacing: 1 },
-                                React.createElement(MfaSetup, { isExternalIdentityProviderUser: !!isExternalIdentityProviderUser, ssoSetupUrl: ssoSetupUrl || '' })))))))));
+                                React.createElement(MfaSetup, { ssoSetupUrl: ssoSetupUrl || '' })))))))));
 }
 //# sourceMappingURL=MultiFactorAuthentication.js.map

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

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

package/dist/components/receipts/ReceiptList.js

@@ -5,8 +5,10 @@ function ReceiptList({ successIconClassName, warningIconClassName, warningMessag
     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(MaterialIcon, { className: clsx('has-text-centered has-text-success icon-x-large', successIconClassName) }, "check_circle_outline")) : (React.createElement(React.Fragment, null,
-                    React.createElement(MaterialIcon, { className: clsx('has-text-centered has-text-danger icon-x-large', warningIconClassName) }, "warning"),
+                React.createElement("div", { className: "ob-list__content" }, !warningMessage ? (React.createElement("p", { className: "has-text-centered" },
+                    React.createElement(MaterialIcon, { className: clsx('has-text-success icon-x-large', successIconClassName) }, "check_circle_outline"))) : (React.createElement(React.Fragment, null,
+                    React.createElement("p", { className: "has-text-centered" },
+                        React.createElement(MaterialIcon, { className: clsx('has-text-danger icon-x-large', warningIconClassName) }, "warning")),
                     React.createElement("p", { className: clsx('has-text-centered', warningMessageClassName) }, warningMessage)))))),
         children));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,6BAAK,SAAS,EAAC,qDAAqD;QAClE,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,iDAAiD,EACjD,oBAAoB,CACrB,2BAGY,CAChB,CAAC,CAAC,CAAC,CACF;oBACE,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,gDAAgD,EAChD,oBAAoB,CACrB,cAGY;oBAEf,2BACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,IAE5D,cAAc,CACb,CACH,CACJ,CACG,CACF,CACF;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  successIconClassName: string\n  warningIconClassName?: string\n  warningMessageClassName?: string\n  warningMessage?: string\n  children: React.ReactNode\n}\n\nfunction ReceiptList({\n  successIconClassName,\n  warningIconClassName,\n  warningMessageClassName,\n  warningMessage,\n  children,\n}: Props) {\n  return (\n    <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n      <div className=\"ob-list__item\">\n        <div className=\"ob-list__content-wrapper\">\n          <div className=\"ob-list__content\">\n            {!warningMessage ? (\n              <MaterialIcon\n                className={clsx(\n                  'has-text-centered has-text-success icon-x-large',\n                  successIconClassName,\n                )}\n              >\n                check_circle_outline\n              </MaterialIcon>\n            ) : (\n              <>\n                <MaterialIcon\n                  className={clsx(\n                    'has-text-centered has-text-danger icon-x-large',\n                    warningIconClassName,\n                  )}\n                >\n                  warning\n                </MaterialIcon>\n\n                <p\n                  className={clsx('has-text-centered', warningMessageClassName)}\n                >\n                  {warningMessage}\n                </p>\n              </>\n            )}\n          </div>\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport default React.memo(ReceiptList)\n"]}
+{"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,6BAAK,SAAS,EAAC,qDAAqD;QAClE,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,2BAAG,SAAS,EAAC,mBAAmB;oBAC9B,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,+BAA+B,EAC/B,oBAAoB,CACrB,2BAGY,CACb,CACL,CAAC,CAAC,CAAC,CACF;oBACE,2BAAG,SAAS,EAAC,mBAAmB;wBAC9B,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,8BAA8B,EAC9B,oBAAoB,CACrB,cAGY,CACb;oBACJ,2BACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,IAE5D,cAAc,CACb,CACH,CACJ,CACG,CACF,CACF;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  successIconClassName: string\n  warningIconClassName?: string\n  warningMessageClassName?: string\n  warningMessage?: string\n  children: React.ReactNode\n}\n\nfunction ReceiptList({\n  successIconClassName,\n  warningIconClassName,\n  warningMessageClassName,\n  warningMessage,\n  children,\n}: Props) {\n  return (\n    <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n      <div className=\"ob-list__item\">\n        <div className=\"ob-list__content-wrapper\">\n          <div className=\"ob-list__content\">\n            {!warningMessage ? (\n              <p className=\"has-text-centered\">\n                <MaterialIcon\n                  className={clsx(\n                    'has-text-success icon-x-large',\n                    successIconClassName,\n                  )}\n                >\n                  check_circle_outline\n                </MaterialIcon>\n              </p>\n            ) : (\n              <>\n                <p className=\"has-text-centered\">\n                  <MaterialIcon\n                    className={clsx(\n                      'has-text-danger icon-x-large',\n                      warningIconClassName,\n                    )}\n                  >\n                    warning\n                  </MaterialIcon>\n                </p>\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/hooks/useMfa.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { authService } from '@oneblink/apps';
 type MfaState = {
+    isExternalIdentityProviderUser: boolean;
     isLoading: boolean;
     isMfaEnabled: boolean;
     loadingError?: Error;
@@ -74,8 +75,8 @@ export default function useMfa(): MfaState & {
     loadMfa: () => void;
 };
 /**
- * React hook to get the state associated to the logged in user's MFA status.
- * Will throw an Error if used outside of the `<MfaProvider />`
+ * React hook to check if the logged in user meets the MFA requirement of your
+ * application. Will throw an Error if used outside of the `<MfaProvider />`
  * component.
  *
  * Example
@@ -86,7 +87,7 @@ export default function useMfa(): MfaState & {
  * const isMfaRequired = true
  *
  * function Component() {
- *   const { isLoading, userMeetsMfaRequirement } =
+ *   const userMeetsMfaRequirement =
  *     useUserMeetsMfaRequirement(isMfaRequired)
  * }
  * ```
@@ -94,10 +95,5 @@ export default function useMfa(): MfaState & {
  * @returns
  * @group Hooks
  */
-export declare function useUserMeetsMfaRequirement(isMfaRequired: boolean): {
-    isLoading: boolean;
-    loadingError: Error | undefined;
-    loadMfa: () => void;
-    userMeetsMfaRequirement: boolean;
-};
+export declare function useUserMeetsMfaRequirement(isMfaRequired: boolean): boolean;
 export {};

package/dist/hooks/useMfa.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { authService } from '@oneblink/apps';
 export const MfaContext = React.createContext({
+    isExternalIdentityProviderUser: false,
     isLoading: true,
     isMfaEnabled: false,
     isSettingUpMfa: false,
@@ -56,6 +57,7 @@ export const MfaContext = React.createContext({
  */
 export function MfaProvider({ children, isExternalIdentityProviderUser, }) {
     const [state, setState] = React.useState({
+        isExternalIdentityProviderUser,
         isLoading: !isExternalIdentityProviderUser,
         isMfaEnabled: false,
         isSettingUpMfa: false,
@@ -178,14 +180,14 @@ export function MfaProvider({ children, isExternalIdentityProviderUser, }) {
         cancelDisablingMfa,
         completeDisablingMfa,
     ]);
-    return (React.createElement(MfaContext.Provider, { value: value }, children));
+    return React.createElement(MfaContext.Provider, { value: value }, children);
 }
 export default function useMfa() {
     return React.useContext(MfaContext);
 }
 /**
- * React hook to get the state associated to the logged in user's MFA status.
- * Will throw an Error if used outside of the `<MfaProvider />`
+ * React hook to check if the logged in user meets the MFA requirement of your
+ * application. Will throw an Error if used outside of the `<MfaProvider />`
  * component.
  *
  * Example
@@ -196,7 +198,7 @@ export default function useMfa() {
  * const isMfaRequired = true
  *
  * function Component() {
- *   const { isLoading, userMeetsMfaRequirement } =
+ *   const userMeetsMfaRequirement =
  *     useUserMeetsMfaRequirement(isMfaRequired)
  * }
  * ```
@@ -209,20 +211,10 @@ export function useUserMeetsMfaRequirement(isMfaRequired) {
     if (!context) {
         throw new Error(`"useUserMeetsMfaRequirement" hook was used outside of the "<MfaProvider />" component's children.`);
     }
-    const { isLoading, loadingError, loadMfa, isMfaEnabled } = context;
-    if (!isMfaRequired) {
-        return {
-            isLoading: false,
-            loadingError: undefined,
-            userMeetsMfaRequirement: true,
-            loadMfa,
-        };
+    const { isMfaEnabled, isExternalIdentityProviderUser } = context;
+    if (!isMfaRequired || isExternalIdentityProviderUser) {
+        return true;
     }
-    return {
-        isLoading,
-        loadingError,
-        loadMfa,
-        userMeetsMfaRequirement: isMfaEnabled,
-    };
+    return isMfaEnabled;
 }
 //# sourceMappingURL=useMfa.js.map

package/dist/hooks/useMfa.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMfa.js","sourceRoot":"","sources":["../../src/hooks/useMfa.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { authService } from '@oneblink/apps'\n\ntype MfaState = {\n  isLoading: boolean\n  isMfaEnabled: boolean\n  loadingError?: Error\n  isSettingUpMfa: boolean\n  isDisablingMfa: boolean\n  setupError?: Error\n  mfaSetup?: Awaited<ReturnType<typeof authService.setupMfa>>\n}\n\nexport const MfaContext = React.createContext<\n  MfaState & {\n    beginMfaSetup: () => void\n    cancelMfaSetup: () => void\n    completeMfaSetup: () => void\n    beginDisablingMfa: () => void\n    cancelDisablingMfa: () => void\n    completeDisablingMfa: () => void\n    clearMfaSetupError: () => void\n    loadMfa: () => void\n  }\n>({\n  isLoading: true,\n  isMfaEnabled: false,\n  isSettingUpMfa: false,\n  isDisablingMfa: false,\n  beginMfaSetup: () => {},\n  cancelMfaSetup: () => {},\n  completeMfaSetup: () => {},\n  beginDisablingMfa: () => {},\n  cancelDisablingMfa: () => {},\n  completeDisablingMfa: () => {},\n  clearMfaSetupError: () => {},\n  loadMfa: () => {},\n})\n\n/**\n * React Component that provides the context for the\n * `useUserMeetsMfaRequirement()` hook and `<MultiFactorAuthentication />`\n * component, to be used by components further down your component tree. **It\n * should only be included in your component tree once and ideally at the root\n * of the application.**\n *\n * #### Example\n *\n * ```js\n * import * as React from 'react'\n * import {\n *   MfaProvider,\n *   useUserMeetsMfaRequirement,\n * } from '@oneblink/apps-react'\n *\n * function Component() {\n *   const { isLoading, userMeetsMfaRequirement } =\n *     useUserMeetsMfaRequirement(true)\n *   // use MFA Requirement details here\n * }\n *\n * function App() {\n *   return (\n *     <MfaProvider isExternalIdentityProviderUser={false}>\n *       <Component />\n *     </MfaProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport function MfaProvider({\n  children,\n  isExternalIdentityProviderUser,\n}: {\n  children: React.ReactNode\n  isExternalIdentityProviderUser: boolean\n}) {\n  const [state, setState] = React.useState<MfaState>({\n    isLoading: !isExternalIdentityProviderUser,\n    isMfaEnabled: false,\n    isSettingUpMfa: false,\n    isDisablingMfa: false,\n  })\n\n  const loadMfa = React.useCallback(\n    async (abortSignal?: AbortSignal) => {\n      setState((currentState) => ({\n        ...currentState,\n        isLoading: true,\n        isMfaEnabled: false,\n        loadingError: undefined,\n      }))\n      try {\n        const newIsMfaEnabled = await authService.checkIsMfaEnabled()\n        if (!abortSignal?.aborted) {\n          setState((currentState) => ({\n            ...currentState,\n            isLoading: false,\n            isMfaEnabled: newIsMfaEnabled,\n          }))\n        }\n      } catch (error) {\n        setState((currentState) => ({\n          ...currentState,\n          isLoading: false,\n          loadingError: error as Error,\n        }))\n      }\n    },\n    [],\n  )\n\n  const clearMfaSetupError = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      setupError: undefined,\n    }))\n  }, [])\n\n  const cancelMfaSetup = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      mfaSetup: undefined,\n    }))\n  }, [])\n\n  const completeMfaSetup = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isMfaEnabled: true,\n      mfaSetup: undefined,\n    }))\n  }, [])\n\n  const beginMfaSetup = React.useCallback(async () => {\n    setState((currentState) => ({\n      ...currentState,\n      isSettingUpMfa: true,\n      mfaSetup: undefined,\n      setupError: undefined,\n    }))\n    try {\n      const newMfaSetup = await authService.setupMfa()\n      setState((currentState) => ({\n        ...currentState,\n        isSettingUpMfa: false,\n        mfaSetup: newMfaSetup,\n      }))\n    } catch (error) {\n      setState((currentState) => ({\n        ...currentState,\n        isSettingUpMfa: false,\n        setupError: error as Error,\n      }))\n    }\n  }, [])\n\n  const beginDisablingMfa = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isDisablingMfa: true,\n    }))\n  }, [])\n\n  const cancelDisablingMfa = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isDisablingMfa: false,\n    }))\n  }, [])\n\n  const completeDisablingMfa = React.useCallback(async () => {\n    await authService.disableMfa()\n    setState((currentState) => ({\n      ...currentState,\n      isDisablingMfa: false,\n      isMfaEnabled: false,\n    }))\n  }, [])\n\n  React.useEffect(() => {\n    if (isExternalIdentityProviderUser) {\n      return\n    }\n\n    loadMfa()\n\n    return () => {}\n  }, [isExternalIdentityProviderUser, loadMfa])\n\n  const value = React.useMemo(() => {\n    return {\n      ...state,\n      clearMfaSetupError,\n      loadMfa,\n      beginMfaSetup,\n      cancelMfaSetup,\n      completeMfaSetup,\n      beginDisablingMfa,\n      cancelDisablingMfa,\n      completeDisablingMfa,\n    }\n  }, [\n    state,\n    clearMfaSetupError,\n    loadMfa,\n    beginMfaSetup,\n    cancelMfaSetup,\n    completeMfaSetup,\n    beginDisablingMfa,\n    cancelDisablingMfa,\n    completeDisablingMfa,\n  ])\n\n  return (\n    <MfaContext.Provider value={value}>\n      {children}\n    </MfaContext.Provider>\n  )\n}\n\nexport default function useMfa() {\n  return React.useContext(MfaContext)\n}\n\n/**\n * React hook to get the state associated to the logged in user's MFA status.\n * Will throw an Error if used outside of the `<MfaProvider />`\n * component.\n *\n * Example\n *\n * ```js\n * import { useUserMeetsMfaRequirement } from '@oneblink/apps-react'\n *\n * const isMfaRequired = true\n *\n * function Component() {\n *   const { isLoading, userMeetsMfaRequirement } =\n *     useUserMeetsMfaRequirement(isMfaRequired)\n * }\n * ```\n *\n * @returns\n * @group Hooks\n */\nexport function useUserMeetsMfaRequirement(isMfaRequired: boolean) {\n  const context = React.useContext(MfaContext)\n\n  if (!context) {\n    throw new Error(\n      `\"useUserMeetsMfaRequirement\" hook was used outside of the \"<MfaProvider />\" component's children.`,\n    )\n  }\n\n  const { isLoading, loadingError, loadMfa, isMfaEnabled } = context\n\n  if (!isMfaRequired) {\n    return {\n      isLoading: false,\n      loadingError: undefined,\n      userMeetsMfaRequirement: true,\n      loadMfa,\n    }\n  }\n\n  return {\n    isLoading,\n    loadingError,\n    loadMfa,\n    userMeetsMfaRequirement: isMfaEnabled,\n  }\n}\n"]}
+{"version":3,"file":"useMfa.js","sourceRoot":"","sources":["../../src/hooks/useMfa.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { authService } from '@oneblink/apps'\n\ntype MfaState = {\n  isExternalIdentityProviderUser: boolean\n  isLoading: boolean\n  isMfaEnabled: boolean\n  loadingError?: Error\n  isSettingUpMfa: boolean\n  isDisablingMfa: boolean\n  setupError?: Error\n  mfaSetup?: Awaited<ReturnType<typeof authService.setupMfa>>\n}\n\nexport const MfaContext = React.createContext<\n  MfaState & {\n    beginMfaSetup: () => void\n    cancelMfaSetup: () => void\n    completeMfaSetup: () => void\n    beginDisablingMfa: () => void\n    cancelDisablingMfa: () => void\n    completeDisablingMfa: () => void\n    clearMfaSetupError: () => void\n    loadMfa: () => void\n  }\n>({\n  isExternalIdentityProviderUser: false,\n  isLoading: true,\n  isMfaEnabled: false,\n  isSettingUpMfa: false,\n  isDisablingMfa: false,\n  beginMfaSetup: () => {},\n  cancelMfaSetup: () => {},\n  completeMfaSetup: () => {},\n  beginDisablingMfa: () => {},\n  cancelDisablingMfa: () => {},\n  completeDisablingMfa: () => {},\n  clearMfaSetupError: () => {},\n  loadMfa: () => {},\n})\n\n/**\n * React Component that provides the context for the\n * `useUserMeetsMfaRequirement()` hook and `<MultiFactorAuthentication />`\n * component, to be used by components further down your component tree. **It\n * should only be included in your component tree once and ideally at the root\n * of the application.**\n *\n * #### Example\n *\n * ```js\n * import * as React from 'react'\n * import {\n *   MfaProvider,\n *   useUserMeetsMfaRequirement,\n * } from '@oneblink/apps-react'\n *\n * function Component() {\n *   const { isLoading, userMeetsMfaRequirement } =\n *     useUserMeetsMfaRequirement(true)\n *   // use MFA Requirement details here\n * }\n *\n * function App() {\n *   return (\n *     <MfaProvider isExternalIdentityProviderUser={false}>\n *       <Component />\n *     </MfaProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport function MfaProvider({\n  children,\n  isExternalIdentityProviderUser,\n}: {\n  children: React.ReactNode\n  isExternalIdentityProviderUser: boolean\n}) {\n  const [state, setState] = React.useState<MfaState>({\n    isExternalIdentityProviderUser,\n    isLoading: !isExternalIdentityProviderUser,\n    isMfaEnabled: false,\n    isSettingUpMfa: false,\n    isDisablingMfa: false,\n  })\n\n  const loadMfa = React.useCallback(async (abortSignal?: AbortSignal) => {\n    setState((currentState) => ({\n      ...currentState,\n      isLoading: true,\n      isMfaEnabled: false,\n      loadingError: undefined,\n    }))\n    try {\n      const newIsMfaEnabled = await authService.checkIsMfaEnabled()\n      if (!abortSignal?.aborted) {\n        setState((currentState) => ({\n          ...currentState,\n          isLoading: false,\n          isMfaEnabled: newIsMfaEnabled,\n        }))\n      }\n    } catch (error) {\n      setState((currentState) => ({\n        ...currentState,\n        isLoading: false,\n        loadingError: error as Error,\n      }))\n    }\n  }, [])\n\n  const clearMfaSetupError = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      setupError: undefined,\n    }))\n  }, [])\n\n  const cancelMfaSetup = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      mfaSetup: undefined,\n    }))\n  }, [])\n\n  const completeMfaSetup = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isMfaEnabled: true,\n      mfaSetup: undefined,\n    }))\n  }, [])\n\n  const beginMfaSetup = React.useCallback(async () => {\n    setState((currentState) => ({\n      ...currentState,\n      isSettingUpMfa: true,\n      mfaSetup: undefined,\n      setupError: undefined,\n    }))\n    try {\n      const newMfaSetup = await authService.setupMfa()\n      setState((currentState) => ({\n        ...currentState,\n        isSettingUpMfa: false,\n        mfaSetup: newMfaSetup,\n      }))\n    } catch (error) {\n      setState((currentState) => ({\n        ...currentState,\n        isSettingUpMfa: false,\n        setupError: error as Error,\n      }))\n    }\n  }, [])\n\n  const beginDisablingMfa = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isDisablingMfa: true,\n    }))\n  }, [])\n\n  const cancelDisablingMfa = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isDisablingMfa: false,\n    }))\n  }, [])\n\n  const completeDisablingMfa = React.useCallback(async () => {\n    await authService.disableMfa()\n    setState((currentState) => ({\n      ...currentState,\n      isDisablingMfa: false,\n      isMfaEnabled: false,\n    }))\n  }, [])\n\n  React.useEffect(() => {\n    if (isExternalIdentityProviderUser) {\n      return\n    }\n\n    loadMfa()\n\n    return () => {}\n  }, [isExternalIdentityProviderUser, loadMfa])\n\n  const value = React.useMemo(() => {\n    return {\n      ...state,\n      clearMfaSetupError,\n      loadMfa,\n      beginMfaSetup,\n      cancelMfaSetup,\n      completeMfaSetup,\n      beginDisablingMfa,\n      cancelDisablingMfa,\n      completeDisablingMfa,\n    }\n  }, [\n    state,\n    clearMfaSetupError,\n    loadMfa,\n    beginMfaSetup,\n    cancelMfaSetup,\n    completeMfaSetup,\n    beginDisablingMfa,\n    cancelDisablingMfa,\n    completeDisablingMfa,\n  ])\n\n  return <MfaContext.Provider value={value}>{children}</MfaContext.Provider>\n}\n\nexport default function useMfa() {\n  return React.useContext(MfaContext)\n}\n\n/**\n * React hook to check if the logged in user meets the MFA requirement of your\n * application. Will throw an Error if used outside of the `<MfaProvider />`\n * component.\n *\n * Example\n *\n * ```js\n * import { useUserMeetsMfaRequirement } from '@oneblink/apps-react'\n *\n * const isMfaRequired = true\n *\n * function Component() {\n *   const userMeetsMfaRequirement =\n *     useUserMeetsMfaRequirement(isMfaRequired)\n * }\n * ```\n *\n * @returns\n * @group Hooks\n */\nexport function useUserMeetsMfaRequirement(isMfaRequired: boolean) {\n  const context = React.useContext(MfaContext)\n\n  if (!context) {\n    throw new Error(\n      `\"useUserMeetsMfaRequirement\" hook was used outside of the \"<MfaProvider />\" component's children.`,\n    )\n  }\n\n  const { isMfaEnabled, isExternalIdentityProviderUser } = context\n  if (!isMfaRequired || isExternalIdentityProviderUser) {\n    return true\n  }\n  return isMfaEnabled\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "6.10.0-beta.9",
+  "version": "6.11.0-beta.1",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -48,8 +48,8 @@
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.15.6",
     "@mui/x-date-pickers": "^6.19.2",
-    "@oneblink/apps": "17.2.0-beta.3",
-    "@oneblink/release-cli": "^3.2.2",
+    "@oneblink/apps": "17.3.0-beta.1",
+    "@oneblink/release-cli": "^3.3.0",
     "@oneblink/types": "github:oneblink/types",
     "@types/blueimp-load-image": "^5.16.6",
     "@types/color": "^3.0.6",