@oneblink/apps-react 8.9.1-beta.2 → 8.9.2-beta.2

package/dist/PaymentReceipt.js

@@ -7,6 +7,7 @@ import Modal from './components/renderer/Modal';
 import OnLoading from './components/renderer/OnLoading';
 import { Receipt, ReceiptList, ReceiptListItem, ReceiptButton, } from './components/receipts';
 import MaterialIcon from './components/MaterialIcon';
+import DownloadableFiles from './components/downloadable-files';
 const { handlePaymentQuerystring, handlePaymentSubmissionEvent } = paymentService;
 function PaymentReceipt({ onDone, onCancel, }) {
     const isMounted = useIsMounted();
@@ -161,11 +162,10 @@ function PaymentReceipt({ onDone, onCancel, }) {
                     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" },
-                submissionResult && submissionResult.downloadSubmissionPdfUrl && (React.createElement("a", { className: "button ob-button ob-receipt__button ob-payment-receipt__button ob-button__download-pdf ob-payment-receipt__pdf-button cypress-receipt-download-pdf-button", href: submissionResult.downloadSubmissionPdfUrl, target: "_blank", rel: "noreferrer" }, "Download PDF")),
-                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 }),
-                    React.createElement(ReceiptButton, { className: "is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button", label: "Try Again", isDisabled: isRunningPostSubmissionAction, isLoading: isRetrying, onClick: handleTryAgain })))))),
+            submissionResult && (React.createElement(DownloadableFiles, { formSubmissionResult: submissionResult, layout: "LIST" })),
+            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 }),
+                React.createElement(ReceiptButton, { className: "is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button", label: "Try Again", isDisabled: isRunningPostSubmissionAction, isLoading: isRetrying, onClick: handleTryAgain })))))),
         loadError && (React.createElement("section", { className: "cypress-payment-receipt-loading-error-message" },
             React.createElement("div", { className: "ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8" },
                 React.createElement(MaterialIcon, { className: "ob-payment-receipt__error-icon has-text-danger icon-x-large" }, "error")),

package/dist/PaymentReceipt.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentReceipt.js","sourceRoot":"","sources":["../src/PaymentReceipt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EACL,cAAc,EACd,iBAAiB,EAGjB,mBAAmB,GACpB,MAAM,gBAAgB,CAAA;AACvB,OAAO,YAAY,MAAM,sBAAsB,CAAA;AAE/C,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AACvC,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,EACL,OAAO,EACP,WAAW,EACX,eAAe,EACf,aAAa,GACd,MAAM,uBAAuB,CAAA;AAC9B,OAAO,YAAY,MAAM,2BAA2B,CAAA;AAEpD,MAAM,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,GAC9D,cAAc,CAAA;AAEhB,SAAS,cAAc,CAAC,EACtB,MAAM,EACN,QAAQ,GAkBT;IACC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAE5B,MAAM,CACJ,EACE,SAAS,EACT,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,GAClB,EACD,YAAY,EACb,GAAG,KAAK,CAAC,QAAQ,CAOf;QACD,SAAS,EAAE,IAAI;QACf,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,IAAI;QACjB,gBAAgB,EAAE,IAAI;QACtB,YAAY,EAAE,IAAI;QAClB,iBAAiB,EAAE,IAAI;KACxB,CAAC,CAAA;IACF,MAAM,CACJ,EAAE,6BAA6B,EAAE,mBAAmB,EAAE,EACtD,sBAAsB,EACvB,GAAG,KAAK,CAAC,QAAQ,CAGf;QACD,6BAA6B,EAAE,KAAK;QACpC,mBAAmB,EAAE,IAAI;KAC1B,CAAC,CAAA;IACF,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtD,sBAAsB,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YACxC,GAAG,YAAY;YACf,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAG/D;QACD,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,IAAI;KACjB,CAAC,CAAA;IACF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,aAAa,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC/B,GAAG,YAAY;YACf,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,GAAG,KAAK,CAAA;QAElB,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;;YAChC,IAAI,QAAQ,GAAG,IAAI,CAAA;YACnB,IAAI,cAAc,GAAG,IAAI,CAAA;YACzB,IAAI,mBAAmB,GAAG,IAAI,CAAA;YAC9B,IAAI,eAAe,GAAG,IAAI,CAAA;YAC1B,IAAI,oBAAoB,GAAG,IAAI,CAAA;YAC/B,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,MAAM,wBAAwB,CAAC,KAAK,CAAC,CAAA;gBACpD,cAAc,GAAG,MAAM,CAAC,WAAW,CAAA;gBACnC,mBAAmB,GAAG,MAAM,CAAC,gBAAgB,CAAA;gBAC7C,eAAe,GAAG,MAAM,CAAC,YAAY,CAAA;gBACrC,oBAAoB,GAAG,MAAA,MAAM,CAAC,iBAAiB,mCAAI,IAAI,CAAA;YACzD,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CAAC,4CAA4C,EAAE,KAAK,CAAC,CAAA;gBACjE,QAAQ,GAAG,KAAc,CAAA;YAC3B,CAAC;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,YAAY,CAAC;oBACX,SAAS,EAAE,KAAK;oBAChB,SAAS,EAAE,QAAQ;oBACnB,WAAW,EAAE,cAAc;oBAC3B,gBAAgB,EAAE,mBAAmB;oBACrC,YAAY,EAAE,eAAe;oBAC7B,iBAAiB,EAAE,oBAAoB;iBACxC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC,CAAA;QACD,cAAc,EAAE,CAAA;QAEhB,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,IAAI,CAAA;QACf,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,2BAA2B,GAAG,KAAK,CAAC,WAAW,CACnD,KAAK,EACH,MAEkB,EAClB,EAAE;QACF,IAAI,CAAC,gBAAgB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YAC5C,OAAM;QACR,CAAC;QAED,sBAAsB,CAAC;YACrB,6BAA6B,EAAE,IAAI;YACnC,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAA;QAEF,IAAI,QAAQ,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC;YACH,MAAM,MAAM,CAAC,EAAE,GAAG,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QACtD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,4CAA4C,EAAE,KAAK,CAAC,CAAA;YACjE,QAAQ,GAAG,KAA0B,CAAA;QACvC,CAAC;QAED,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,sBAAsB,CAAC;gBACrB,6BAA6B,EAAE,KAAK;gBACpC,mBAAmB,EAAE,QAAQ;aAC9B,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EACD,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAC9B,CAAA;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC9C,2BAA2B,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC,CAAA;IAEzC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,2BAA2B,CAAC,QAAQ,CAAC,CAAA;IACvC,CAAC,EAAE,CAAC,2BAA2B,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE3C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;YACnD,OAAM;QACR,CAAC;QACD,MAAM,sBAAsB,GAAG,gBAAgB,CAAC,OAAO,CAAC,eAAe,CAAA;QAEvE,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,aAAa,CAAC;gBACZ,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,IAAI;aACjB,CAAC,CAAA;QACJ,CAAC;QAED,IAAI,QAAQ,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC;YACH,gBAAgB,CAAC,OAAO,GAAG,MAAM,4BAA4B,CAAC;gBAC5D,MAAM,EAAE,gBAAgB,CAAC,OAAO,CAAC,MAAM;gBACvC,oBAAoB,EAAE,gBAAgB;gBACtC,sBAAsB;gBACtB,iBAAiB,EAAE,gBAAgB,CAAC,OAAO,CAAC,iBAAiB;gBAC7D,cAAc,EAAE,gBAAgB,CAAC,OAAO,CAAC,cAAc;aACxD,CAAC,CAAA;YACF,MAAM,iBAAiB,CAAC,2BAA2B,CAAC,gBAAgB,EAAE;gBACpE,uBAAuB,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;gBACnD,uBAAuB,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;aAC9D,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,6CAA6C,EAAE,KAAK,CAAC,CAAA;YAClE,QAAQ,GAAG,KAA0B,CAAA;QACvC,CAAC;QAED,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,aAAa,CAAC;gBACZ,UAAU,EAAE,KAAK;gBACjB,UAAU,EAAE,QAAQ;aACrB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE1C,OAAO,CACL;QACG,SAAS,IAAI,CACZ;YACE,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa;gBACrD,sEAA8C,CAC1C,CACE,CACX;QAEA,WAAW,IAAI,CACd,oBAAC,OAAO,IACN,SAAS,EAAC,oBAAoB,EAC9B,kBAAkB,EAAC,+BAA+B;YAElD,oBAAC,WAAW,IACV,oBAAoB,EAAC,kCAAkC,EACvD,oBAAoB,EAAC,kCAAkC,EACvD,uBAAuB,EAAC,6EAA6E,EACrG,cAAc,EACZ,WAAW,CAAC,SAAS;oBACnB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,WAAW,CAAC,YAAY,IAAI,SAAS;gBAG1C,YAAY;oBACX,YAAY,CAAC,MAAM;oBACnB,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE;;wBAClC,OAAO,CACL,oBAAC,eAAe,IACd,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,MAAA,WAAW,CAAC,SAAS,mCAAI,EAAE,EACtC,cAAc,EAAE,MAAA,WAAW,CAAC,cAAc,mCAAI,EAAE,EAChD,IAAI,EAAE,WAAW,CAAC,IAAI,EACtB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,oBAAoB,EAAE,WAAW,CAAC,oBAAoB,GACtD,CACH,CAAA;oBACH,CAAC,CAAC;gBACH,iBAAiB,IAAI,WAAW,CAAC,SAAS,IAAI,CAC7C;oBACG,iBAAiB,CAAC,QAAQ,IAAI,CAC7B,oBAAC,eAAe,IACd,SAAS,EAAC,iCAAiC,EAC3C,cAAc,EAAC,qCAAqC,EACpD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,iBAAiB,CAAC,QAAQ,GACjC,CACH;oBAED,oBAAC,eAAe,IACd,SAAS,EAAC,mCAAmC,EAC7C,cAAc,EAAC,uCAAuC,EACtD,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,mBAAmB,CAAC,kBAAkB,CAC3C,iBAAiB,CAAC,SAAS,CAC5B,GACD;oBAEF,oBAAC,eAAe,IACd,SAAS,EAAC,iCAAiC,EAC3C,cAAc,EAAC,qCAAqC,EACpD,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,mBAAmB,CAAC,kBAAkB,CAC3C,iBAAiB,CAAC,OAAO,CAC1B,GACD,CACD,CACJ;gBACD,oBAAC,eAAe,IACd,SAAS,EAAC,6BAA6B,EACvC,cAAc,EAAC,iCAAiC,EAChD,KAAK,EAAC,SAAS,EACf,KAAK,EAAC,yFAAyF,GAC/F,CACU;YAEd,6BAAK,SAAS,EAAC,SAAS;gBACrB,gBAAgB,IAAI,gBAAgB,CAAC,wBAAwB,IAAI,CAChE,2BACE,SAAS,EAAC,2JAA2J,EACrK,IAAI,EAAE,gBAAgB,CAAC,wBAAwB,EAC/C,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,mBAGd,CACL;gBACA,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CACvB,oBAAC,aAAa,IACZ,SAAS,EAAC,2GAA2G,EACrH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,6BAA6B,EACxC,OAAO,EAAE,UAAU,GACnB,CACH,CAAC,CAAC,CAAC,CACF;oBACE,oBAAC,aAAa,IACZ,SAAS,EAAC,oGAAoG,EAC9G,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,6BAA6B,EACxC,OAAO,EAAE,YAAY,GACrB;oBACF,oBAAC,aAAa,IACZ,SAAS,EAAC,qHAAqH,EAC/H,KAAK,EAAC,WAAW,EACjB,UAAU,EAAE,6BAA6B,EACzC,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,cAAc,GACvB,CACD,CACJ,CACG,CACE,CACX;QAEA,SAAS,IAAI,CACZ,iCAAS,SAAS,EAAC,+CAA+C;YAChE,6BAAK,SAAS,EAAC,gFAAgF;gBAC7F,oBAAC,YAAY,IAAC,SAAS,EAAC,6DAA6D,YAEtE,CACX;YACN,2BAAG,SAAS,EAAC,yEAAyE,IACnF,SAAS,CAAC,OAAO,CAChB,CACI,CACX;QAEA,UAAU,IAAI,CACb,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAE,UAAU,CAAC,KAAK,IAAI,WAAW,EACtC,aAAa,EAAC,6CAA6C,EAC3D,OAAO,EACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6EAA6E,EACvF,OAAO,EAAE,eAAe,EACxB,SAAS,iBAGF,IAGV,UAAU,CAAC,OAAO,CACb,CACT;QAEA,mBAAmB,IAAI,CACtB,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAE,mBAAmB,CAAC,KAAK,IAAI,WAAW,EAC/C,aAAa,EAAC,6CAA6C,EAC3D,OAAO,EACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6EAA6E,EACvF,OAAO,EAAE,wBAAwB,EACjC,SAAS,iBAGF,IAGV,mBAAmB,CAAC,OAAO,CACtB,CACT,CACG,CACP,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA","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 ?? null\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(submissionResult, {\n        onRedirectToRelativeUrl: (url) => history.push(url),\n        onRedirectToAbsoluteUrl: (url) => window.location.assign(url),\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, 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            {submissionResult && submissionResult.downloadSubmissionPdfUrl && (\n              <a\n                className=\"button ob-button ob-receipt__button ob-payment-receipt__button ob-button__download-pdf ob-payment-receipt__pdf-button cypress-receipt-download-pdf-button\"\n                href={submissionResult.downloadSubmissionPdfUrl}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                Download PDF\n              </a>\n            )}\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'\nimport DownloadableFiles from './components/downloadable-files'\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 ?? null\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(submissionResult, {\n        onRedirectToRelativeUrl: (url) => history.push(url),\n        onRedirectToAbsoluteUrl: (url) => window.location.assign(url),\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, 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          {submissionResult && (\n            <DownloadableFiles\n              formSubmissionResult={submissionResult}\n              layout=\"LIST\"\n            />\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/downloadable-files/LayoutProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type LayoutType = 'GRID' | 'LIST';
+export declare const LayoutProvider: ({ children, layout, }: {
+    children: React.ReactNode;
+    layout: LayoutType;
+}) => React.JSX.Element;
+export declare const useLayout: () => LayoutType;

package/dist/components/downloadable-files/LayoutProvider.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+const LayoutContext = React.createContext('GRID');
+export const LayoutProvider = ({ children, layout, }) => {
+    return (React.createElement(LayoutContext.Provider, { value: layout }, children));
+};
+export const useLayout = () => {
+    return React.useContext(LayoutContext);
+};
+//# sourceMappingURL=LayoutProvider.js.map

package/dist/components/downloadable-files/LayoutProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutProvider.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/LayoutProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAa,MAAM,CAAC,CAAA;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,MAAM,GAIP,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,IAAG,QAAQ,CAA0B,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AACxC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nexport type LayoutType = 'GRID' | 'LIST'\n\nconst LayoutContext = React.createContext<LayoutType>('GRID')\n\nexport const LayoutProvider = ({\n  children,\n  layout,\n}: {\n  children: React.ReactNode\n  layout: LayoutType\n}) => {\n  return (\n    <LayoutContext.Provider value={layout}>{children}</LayoutContext.Provider>\n  )\n}\n\nexport const useLayout = () => {\n  return React.useContext(LayoutContext)\n}\n"]}

package/dist/components/downloadable-files/index.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { submissionService } from '@oneblink/apps';
+import { LayoutType } from './LayoutProvider';
+declare function DownloadableFiles({ formSubmissionResult, divider, layout, }: {
+    /** The form submission with the pdf and/or attachments config on it. */
+    formSubmissionResult: submissionService.FormSubmissionResult;
+    /** Whether to render a divider above the content. */
+    divider?: boolean;
+    /**
+     * The layout to use for the downloadable files. Options are `GRID` and
+     * `LIST`. Defaults to `GRID`. `GRID` will render files next to each other at
+     * some screen sizes. `LIST` will always render each file on a new line.
+     */
+    layout?: LayoutType;
+}): React.JSX.Element | null;
+/**
+ * Component for rendering post-submission downloadable files such as PDFs and
+ * attachments. The only thing required is the `formSubmissionResult`.
+ *
+ * It is also recommended to import the `css` from this library as well.
+ *
+ * ```js
+ * import { DownloadableFiles } from '@oneblink/apps-react'
+ * import '@oneblink/apps-react/dist/styles.css'
+ * ```
+ *
+ * #### Example
+ *
+ * ```tsx
+ * import React from 'react'
+ * import ReactDOM from 'react-dom'
+ * import { DownloadableFiles } from '@oneblink/apps-react'
+ * import '@oneblink/apps-react/dist/styles.css'
+ *
+ * function SubmissionContainer() {
+ *
+ *   const [state, setState] = useState(null)
+ *
+ *   const handleSubmit = React.useCallback(async () => {
+ *     ...
+ *     setState(result)
+ *   }, [])
+ *
+ *   return (
+ *     <div>
+ *      ...
+ *       {state && (
+ *         <DownloadableFiles formSubmissionResult={state} />
+ *       )}
+ *     </div>
+ *   )
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <IsOfflineContextProvider>
+ *       <SubmissionContainer />
+ *     </IsOfflineContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
+declare const _default: React.MemoExoticComponent<typeof DownloadableFiles>;
+export default _default;

package/dist/components/downloadable-files/index.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { OnlyPDFDisplay, LoadAndDisplayAttachments, SingleFileDisplay, } from './resource-components';
+import { LayoutProvider } from './LayoutProvider';
+function DownloadableFiles({ formSubmissionResult, divider, layout, }) {
+    const pdfFileNode = React.useMemo(() => {
+        var _a, _b, _c;
+        return !formSubmissionResult.downloadSubmissionPdfUrl ? undefined : (React.createElement(SingleFileDisplay, { attachment: {
+                filename: (_c = (_b = (_a = formSubmissionResult.definition.postSubmissionReceipt) === null || _a === void 0 ? void 0 : _a.allowPDFDownload) === null || _b === void 0 ? void 0 : _b.pdfFileName) !== null && _c !== void 0 ? _c : 'Submission',
+                signedUrl: formSubmissionResult.downloadSubmissionPdfUrl,
+                contentType: 'application/pdf',
+            }, className: "cypress-receipt-download-pdf-button" }));
+    }, [
+        formSubmissionResult.downloadSubmissionPdfUrl,
+        formSubmissionResult.definition,
+    ]);
+    if (!formSubmissionResult.attachmentsAccessToken && !pdfFileNode) {
+        return null;
+    }
+    return (React.createElement("div", { className: "ob-downloadable-files__wrapper" },
+        React.createElement(LayoutProvider, { layout: layout !== null && layout !== void 0 ? layout : 'GRID' },
+            divider && React.createElement("hr", { className: "divider" }),
+            pdfFileNode && !formSubmissionResult.attachmentsAccessToken ? (React.createElement(OnlyPDFDisplay, null, pdfFileNode)) : (React.createElement(LoadAndDisplayAttachments, { formSubmissionResult: formSubmissionResult, pdfFileNode: pdfFileNode })))));
+}
+/**
+ * Component for rendering post-submission downloadable files such as PDFs and
+ * attachments. The only thing required is the `formSubmissionResult`.
+ *
+ * It is also recommended to import the `css` from this library as well.
+ *
+ * ```js
+ * import { DownloadableFiles } from '@oneblink/apps-react'
+ * import '@oneblink/apps-react/dist/styles.css'
+ * ```
+ *
+ * #### Example
+ *
+ * ```tsx
+ * import React from 'react'
+ * import ReactDOM from 'react-dom'
+ * import { DownloadableFiles } from '@oneblink/apps-react'
+ * import '@oneblink/apps-react/dist/styles.css'
+ *
+ * function SubmissionContainer() {
+ *
+ *   const [state, setState] = useState(null)
+ *
+ *   const handleSubmit = React.useCallback(async () => {
+ *     ...
+ *     setState(result)
+ *   }, [])
+ *
+ *   return (
+ *     <div>
+ *      ...
+ *       {state && (
+ *         <DownloadableFiles formSubmissionResult={state} />
+ *       )}
+ *     </div>
+ *   )
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <IsOfflineContextProvider>
+ *       <SubmissionContainer />
+ *     </IsOfflineContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
+export default React.memo(DownloadableFiles);
+//# sourceMappingURL=index.js.map

package/dist/components/downloadable-files/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,cAAc,EACd,yBAAyB,EACzB,iBAAiB,GAClB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAc,MAAM,kBAAkB,CAAA;AAE7D,SAAS,iBAAiB,CAAC,EACzB,oBAAoB,EACpB,OAAO,EACP,MAAM,GAYP;IACC,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAC/B,GAAG,EAAE;;QACH,OAAA,CAAC,oBAAoB,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAC3D,oBAAC,iBAAiB,IAChB,UAAU,EAAE;gBACV,QAAQ,EACN,MAAA,MAAA,MAAA,oBAAoB,CAAC,UAAU,CAAC,qBAAqB,0CACjD,gBAAgB,0CAAE,WAAW,mCAAI,YAAY;gBACnD,SAAS,EAAE,oBAAoB,CAAC,wBAAwB;gBACxD,WAAW,EAAE,iBAAiB;aAC/B,EACD,SAAS,EAAC,qCAAqC,GAC/C,CACH,CAAA;KAAA,EACH;QACE,oBAAoB,CAAC,wBAAwB;QAC7C,oBAAoB,CAAC,UAAU;KAChC,CACF,CAAA;IAED,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,IAAI,CAAC,WAAW,EAAE,CAAC;QACjE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,gCAAgC;QAC7C,oBAAC,cAAc,IAAC,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,MAAM;YACrC,OAAO,IAAI,4BAAI,SAAS,EAAC,SAAS,GAAG;YACrC,WAAW,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAC7D,oBAAC,cAAc,QAAE,WAAW,CAAkB,CAC/C,CAAC,CAAC,CAAC,CACF,oBAAC,yBAAyB,IACxB,oBAAoB,EAAE,oBAAoB,EAC1C,WAAW,EAAE,WAAW,GACxB,CACH,CACc,CACb,CACP,CAAA;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { submissionService } from '@oneblink/apps'\nimport {\n  OnlyPDFDisplay,\n  LoadAndDisplayAttachments,\n  SingleFileDisplay,\n} from './resource-components'\nimport { LayoutProvider, LayoutType } from './LayoutProvider'\n\nfunction DownloadableFiles({\n  formSubmissionResult,\n  divider,\n  layout,\n}: {\n  /** The form submission with the pdf and/or attachments config on it. */\n  formSubmissionResult: submissionService.FormSubmissionResult\n  /** Whether to render a divider above the content. */\n  divider?: boolean\n  /**\n   * The layout to use for the downloadable files. Options are `GRID` and\n   * `LIST`. Defaults to `GRID`. `GRID` will render files next to each other at\n   * some screen sizes. `LIST` will always render each file on a new line.\n   */\n  layout?: LayoutType\n}) {\n  const pdfFileNode = React.useMemo(\n    () =>\n      !formSubmissionResult.downloadSubmissionPdfUrl ? undefined : (\n        <SingleFileDisplay\n          attachment={{\n            filename:\n              formSubmissionResult.definition.postSubmissionReceipt\n                ?.allowPDFDownload?.pdfFileName ?? 'Submission',\n            signedUrl: formSubmissionResult.downloadSubmissionPdfUrl,\n            contentType: 'application/pdf',\n          }}\n          className=\"cypress-receipt-download-pdf-button\"\n        />\n      ),\n    [\n      formSubmissionResult.downloadSubmissionPdfUrl,\n      formSubmissionResult.definition,\n    ],\n  )\n\n  if (!formSubmissionResult.attachmentsAccessToken && !pdfFileNode) {\n    return null\n  }\n\n  return (\n    <div className=\"ob-downloadable-files__wrapper\">\n      <LayoutProvider layout={layout ?? 'GRID'}>\n        {divider && <hr className=\"divider\" />}\n        {pdfFileNode && !formSubmissionResult.attachmentsAccessToken ? (\n          <OnlyPDFDisplay>{pdfFileNode}</OnlyPDFDisplay>\n        ) : (\n          <LoadAndDisplayAttachments\n            formSubmissionResult={formSubmissionResult}\n            pdfFileNode={pdfFileNode}\n          />\n        )}\n      </LayoutProvider>\n    </div>\n  )\n}\n\n/**\n * Component for rendering post-submission downloadable files such as PDFs and\n * attachments. The only thing required is the `formSubmissionResult`.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { DownloadableFiles } 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 { DownloadableFiles } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function SubmissionContainer() {\n *\n *   const [state, setState] = useState(null)\n *\n *   const handleSubmit = React.useCallback(async () => {\n *     ...\n *     setState(result)\n *   }, [])\n *\n *   return (\n *     <div>\n *      ...\n *       {state && (\n *         <DownloadableFiles formSubmissionResult={state} />\n *       )}\n *     </div>\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <SubmissionContainer />\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(DownloadableFiles)\n"]}

package/dist/components/downloadable-files/resource-components.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { submissionService } from '@oneblink/apps';
+type Attachment = Awaited<ReturnType<typeof submissionService.getPostSubmissionAttachments>>[number];
+export declare const LoadAndDisplayAttachments: ({ pdfFileNode, formSubmissionResult, }: {
+    pdfFileNode: React.ReactNode;
+    formSubmissionResult: submissionService.FormSubmissionResult;
+}) => React.JSX.Element;
+export declare const SingleFileDisplay: ({ attachment, className, }: {
+    attachment: Attachment;
+    className?: string;
+}) => React.JSX.Element;
+/** Centers the PDF Download button */
+export declare const OnlyPDFDisplay: ({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+export {};

package/dist/components/downloadable-files/resource-components.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Collapse, Grid, LinearProgress, Tooltip } from '@mui/material';
+import MaterialIcon from '../MaterialIcon';
+import { submissionService } from '@oneblink/apps';
+import useLoadDataState from '../../hooks/useLoadDataState';
+import OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage';
+import clsx from 'clsx';
+import { useLayout } from './LayoutProvider';
+export const LoadAndDisplayAttachments = ({ pdfFileNode, formSubmissionResult, }) => {
+    const loadAttachments = React.useCallback(() => submissionService.getPostSubmissionAttachments(formSubmissionResult), [formSubmissionResult]);
+    const [attachmentsState] = useLoadDataState(loadAttachments);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Collapse, { in: attachmentsState.status === 'LOADING' },
+            React.createElement("div", { className: "ob-downloadable-files__loading" },
+                React.createElement("div", { className: "ob-list__text-secondary mb-1 has-text-centered" }, "Loading Attachments..."),
+                React.createElement(LinearProgress, { className: "ob-progress__downloadable-files" }))),
+        React.createElement(Collapse, { in: attachmentsState.status === 'ERROR' },
+            pdfFileNode && (React.createElement(React.Fragment, null,
+                React.createElement(OnlyPDFDisplay, { className: "ob-downloadable-files__error-pdf" }, pdfFileNode))),
+            React.createElement("div", { className: "ob-downloadable-files__error has-text-centered" },
+                React.createElement(MaterialIcon, { className: "has-text-danger icon-large" }, "error"),
+                React.createElement(OneBlinkAppsErrorOriginalMessage, { error: attachmentsState.status === 'ERROR'
+                        ? attachmentsState.error
+                        : undefined }))),
+        React.createElement(Collapse, { in: attachmentsState.status === 'SUCCESS' },
+            React.createElement(DownloadableFilesDisplay, { attachments: attachmentsState.status === 'SUCCESS' ? attachmentsState.result : [], pdfFileNode: pdfFileNode }))));
+};
+function DownloadableFilesDisplay({ attachments, pdfFileNode, }) {
+    const layout = useLayout();
+    const totalToDisplay = React.useMemo(() => {
+        return attachments.length + (pdfFileNode ? 1 : 0);
+    }, [attachments, pdfFileNode]);
+    const largeBreakpointColumnWidth = React.useMemo(() => 
+    // Don't use a 3 column layout (4) unless we have at least 3 attachments to show
+    totalToDisplay > 2 ? 4 : 6, [totalToDisplay]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "ob-downloadable-files__container" },
+            React.createElement(Grid, { container: true, spacing: 2, justifyContent: totalToDisplay === 1 ? 'center' : undefined },
+                pdfFileNode && (React.createElement(Grid, { item: true, xs: 12, sm: layout === 'GRID' ? 6 : 12, lg: layout === 'GRID' ? largeBreakpointColumnWidth : 12 }, pdfFileNode)),
+                attachments.map((attachment, index) => (React.createElement(Grid, { item: true, xs: 12, sm: layout === 'GRID' ? 6 : 12, lg: layout === 'GRID' ? largeBreakpointColumnWidth : 12, key: index },
+                    React.createElement(SingleFileDisplay, { attachment: attachment }))))))));
+}
+const getFileTypeIcon = (type) => {
+    // Add other appropriate icons for file types here anytime
+    if (type.includes('doc')) {
+        return 'description';
+    }
+    return 'attach_file';
+};
+export const SingleFileDisplay = ({ attachment, className, }) => {
+    const { avatar } = React.useMemo(() => {
+        const avatar = () => {
+            return attachment.contentType.includes('image') ? (React.createElement("img", { src: attachment.signedUrl, alt: attachment.filename, className: "ob-downloadable-files__thumbnail" })) : (React.createElement(MaterialIcon, { className: "ob-downloadable-files__icon" }, getFileTypeIcon(attachment.contentType)));
+        };
+        return { avatar: avatar() };
+    }, [attachment.filename, attachment.contentType, attachment.signedUrl]);
+    return (React.createElement(Tooltip, { title: attachment.filename, arrow: true },
+        React.createElement("a", { href: attachment.signedUrl, target: "_blank", rel: "noreferrer", download: true, className: clsx('ob-downloadable-files__item', className) },
+            avatar,
+            React.createElement("div", { className: "ob-downloadable-files__content" },
+                React.createElement("div", { className: "ob-downloadable-files__filename ob-downloadable-files__text" }, attachment.filename),
+                React.createElement("div", { className: "ob-downloadable-files__filetype ob-downloadable-files__text" }, attachment.contentType.split('/')[1] || 'Unknown')),
+            React.createElement(MaterialIcon, { className: "ob-downloadable-files__download-icon" }, "download"))));
+};
+/** Centers the PDF Download button */
+export const OnlyPDFDisplay = ({ children, className, }) => {
+    const layout = useLayout();
+    return (React.createElement("div", { className: clsx('ob-downloadable-files__container', className) },
+        React.createElement(Grid, { container: true, spacing: 2, justifyContent: "center" },
+            React.createElement(Grid, { item: true, xs: 12, sm: layout === 'GRID' ? 6 : 12 }, children))));
+};
+//# sourceMappingURL=resource-components.js.map

package/dist/components/downloadable-files/resource-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-components.js","sourceRoot":"","sources":["../../../src/components/downloadable-files/resource-components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvE,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAC3D,OAAO,gCAAgC,MAAM,8CAA8C,CAAA;AAC3F,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAM5C,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,WAAW,EACX,oBAAoB,GAIrB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CACvC,GAAG,EAAE,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,oBAAoB,CAAC,EAC1E,CAAC,oBAAoB,CAAC,CACvB,CAAA;IACD,MAAM,CAAC,gBAAgB,CAAC,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAA;IAE5D,OAAO,CACL;QACE,oBAAC,QAAQ,IAAC,EAAE,EAAE,gBAAgB,CAAC,MAAM,KAAK,SAAS;YACjD,6BAAK,SAAS,EAAC,gCAAgC;gBAC7C,6BAAK,SAAS,EAAC,gDAAgD,6BAEzD;gBACN,oBAAC,cAAc,IAAC,SAAS,EAAC,iCAAiC,GAAG,CAC1D,CACG;QACX,oBAAC,QAAQ,IAAC,EAAE,EAAE,gBAAgB,CAAC,MAAM,KAAK,OAAO;YAC9C,WAAW,IAAI,CACd;gBACE,oBAAC,cAAc,IAAC,SAAS,EAAC,kCAAkC,IACzD,WAAW,CACG,CAChB,CACJ;YAED,6BAAK,SAAS,EAAC,gDAAgD;gBAC7D,oBAAC,YAAY,IAAC,SAAS,EAAC,4BAA4B,YAErC;gBACf,oBAAC,gCAAgC,IAC/B,KAAK,EACH,gBAAgB,CAAC,MAAM,KAAK,OAAO;wBACjC,CAAC,CAAC,gBAAgB,CAAC,KAAK;wBACxB,CAAC,CAAC,SAAS,GAEf,CACE,CACG;QACX,oBAAC,QAAQ,IAAC,EAAE,EAAE,gBAAgB,CAAC,MAAM,KAAK,SAAS;YACjD,oBAAC,wBAAwB,IACvB,WAAW,EACT,gBAAgB,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAEtE,WAAW,EAAE,WAAW,GACxB,CACO,CACV,CACJ,CAAA;AACH,CAAC,CAAA;AAMD,SAAS,wBAAwB,CAAC,EAChC,WAAW,EACX,WAAW,GACmB;IAC9B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACnD,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAA;IAE9B,MAAM,0BAA0B,GAAG,KAAK,CAAC,OAAO,CAC9C,GAAG,EAAE;IACH,gFAAgF;IAChF,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC5B,CAAC,cAAc,CAAC,CACjB,CAAA;IAED,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,IAAI,IACH,SAAS,QACT,OAAO,EAAE,CAAC,EACV,cAAc,EAAE,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAE1D,WAAW,IAAI,CACd,oBAAC,IAAI,IACH,IAAI,QACJ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAC9B,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,IAEtD,WAAW,CACP,CACR;gBACA,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,oBAAC,IAAI,IACH,IAAI,QACJ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAC9B,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EACvD,GAAG,EAAE,KAAK;oBAEV,oBAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,GAAI,CACxC,CACR,CAAC,CACG,CACH,CACL,CACJ,CAAA;AACH,CAAC;AAED,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,EAAE;IACvC,0DAA0D;IAC1D,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,aAAa,CAAA;IACtB,CAAC;IACD,OAAO,aAAa,CAAA;AACtB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,UAAU,EACV,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,OAAO,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAChD,6BACE,GAAG,EAAE,UAAU,CAAC,SAAS,EACzB,GAAG,EAAE,UAAU,CAAC,QAAQ,EACxB,SAAS,EAAC,kCAAkC,GAC5C,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IAAC,SAAS,EAAC,6BAA6B,IAClD,eAAe,CAAC,UAAU,CAAC,WAAW,CAAC,CAC3B,CAChB,CAAA;QACH,CAAC,CAAA;QAED,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAA;IAC7B,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAA;IAEvE,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,UAAU,CAAC,QAAQ,EAAE,KAAK;QACxC,2BACE,IAAI,EAAE,UAAU,CAAC,SAAS,EAC1B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,CAAC;YAExD,MAAM;YACP,6BAAK,SAAS,EAAC,gCAAgC;gBAC7C,6BAAK,SAAS,EAAC,6DAA6D,IACzE,UAAU,CAAC,QAAQ,CAChB;gBACN,6BAAK,SAAS,EAAC,6DAA6D,IACzE,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS,CAC9C,CACF;YACN,oBAAC,YAAY,IAAC,SAAS,EAAC,sCAAsC,eAE/C,CACb,CACI,CACX,CAAA;AACH,CAAC,CAAA;AAED,sCAAsC;AACtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,SAAS,CAAC;QACjE,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,QAAQ;YACjD,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAC9C,QAAQ,CACJ,CACF,CACH,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Collapse, Grid, LinearProgress, Tooltip } from '@mui/material'\nimport MaterialIcon from '../MaterialIcon'\nimport { submissionService } from '@oneblink/apps'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport OneBlinkAppsErrorOriginalMessage from '../renderer/OneBlinkAppsErrorOriginalMessage'\nimport clsx from 'clsx'\nimport { useLayout } from './LayoutProvider'\n\ntype Attachment = Awaited<\n  ReturnType<typeof submissionService.getPostSubmissionAttachments>\n>[number]\n\nexport const LoadAndDisplayAttachments = ({\n  pdfFileNode,\n  formSubmissionResult,\n}: {\n  pdfFileNode: React.ReactNode\n  formSubmissionResult: submissionService.FormSubmissionResult\n}) => {\n  const loadAttachments = React.useCallback(\n    () => submissionService.getPostSubmissionAttachments(formSubmissionResult),\n    [formSubmissionResult],\n  )\n  const [attachmentsState] = useLoadDataState(loadAttachments)\n\n  return (\n    <>\n      <Collapse in={attachmentsState.status === 'LOADING'}>\n        <div className=\"ob-downloadable-files__loading\">\n          <div className=\"ob-list__text-secondary mb-1 has-text-centered\">\n            Loading Attachments...\n          </div>\n          <LinearProgress className=\"ob-progress__downloadable-files\" />\n        </div>\n      </Collapse>\n      <Collapse in={attachmentsState.status === 'ERROR'}>\n        {pdfFileNode && (\n          <>\n            <OnlyPDFDisplay className=\"ob-downloadable-files__error-pdf\">\n              {pdfFileNode}\n            </OnlyPDFDisplay>\n          </>\n        )}\n\n        <div className=\"ob-downloadable-files__error has-text-centered\">\n          <MaterialIcon className=\"has-text-danger icon-large\">\n            error\n          </MaterialIcon>\n          <OneBlinkAppsErrorOriginalMessage\n            error={\n              attachmentsState.status === 'ERROR'\n                ? attachmentsState.error\n                : undefined\n            }\n          />\n        </div>\n      </Collapse>\n      <Collapse in={attachmentsState.status === 'SUCCESS'}>\n        <DownloadableFilesDisplay\n          attachments={\n            attachmentsState.status === 'SUCCESS' ? attachmentsState.result : []\n          }\n          pdfFileNode={pdfFileNode}\n        />\n      </Collapse>\n    </>\n  )\n}\n\ntype DownloadableFilesDisplayProps = {\n  attachments: Attachment[]\n  pdfFileNode?: React.ReactNode\n}\nfunction DownloadableFilesDisplay({\n  attachments,\n  pdfFileNode,\n}: DownloadableFilesDisplayProps) {\n  const layout = useLayout()\n\n  const totalToDisplay = React.useMemo(() => {\n    return attachments.length + (pdfFileNode ? 1 : 0)\n  }, [attachments, pdfFileNode])\n\n  const largeBreakpointColumnWidth = React.useMemo(\n    () =>\n      // Don't use a 3 column layout (4) unless we have at least 3 attachments to show\n      totalToDisplay > 2 ? 4 : 6,\n    [totalToDisplay],\n  )\n\n  return (\n    <>\n      <div className=\"ob-downloadable-files__container\">\n        <Grid\n          container\n          spacing={2}\n          justifyContent={totalToDisplay === 1 ? 'center' : undefined}\n        >\n          {pdfFileNode && (\n            <Grid\n              item\n              xs={12}\n              sm={layout === 'GRID' ? 6 : 12}\n              lg={layout === 'GRID' ? largeBreakpointColumnWidth : 12}\n            >\n              {pdfFileNode}\n            </Grid>\n          )}\n          {attachments.map((attachment, index) => (\n            <Grid\n              item\n              xs={12}\n              sm={layout === 'GRID' ? 6 : 12}\n              lg={layout === 'GRID' ? largeBreakpointColumnWidth : 12}\n              key={index}\n            >\n              <SingleFileDisplay attachment={attachment} />\n            </Grid>\n          ))}\n        </Grid>\n      </div>\n    </>\n  )\n}\n\nconst getFileTypeIcon = (type: string) => {\n  // Add other appropriate icons for file types here anytime\n  if (type.includes('doc')) {\n    return 'description'\n  }\n  return 'attach_file'\n}\n\nexport const SingleFileDisplay = ({\n  attachment,\n  className,\n}: {\n  attachment: Attachment\n  className?: string\n}) => {\n  const { avatar } = React.useMemo(() => {\n    const avatar = () => {\n      return attachment.contentType.includes('image') ? (\n        <img\n          src={attachment.signedUrl}\n          alt={attachment.filename}\n          className=\"ob-downloadable-files__thumbnail\"\n        />\n      ) : (\n        <MaterialIcon className=\"ob-downloadable-files__icon\">\n          {getFileTypeIcon(attachment.contentType)}\n        </MaterialIcon>\n      )\n    }\n\n    return { avatar: avatar() }\n  }, [attachment.filename, attachment.contentType, attachment.signedUrl])\n\n  return (\n    <Tooltip title={attachment.filename} arrow>\n      <a\n        href={attachment.signedUrl}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        download\n        className={clsx('ob-downloadable-files__item', className)}\n      >\n        {avatar}\n        <div className=\"ob-downloadable-files__content\">\n          <div className=\"ob-downloadable-files__filename ob-downloadable-files__text\">\n            {attachment.filename}\n          </div>\n          <div className=\"ob-downloadable-files__filetype ob-downloadable-files__text\">\n            {attachment.contentType.split('/')[1] || 'Unknown'}\n          </div>\n        </div>\n        <MaterialIcon className=\"ob-downloadable-files__download-icon\">\n          download\n        </MaterialIcon>\n      </a>\n    </Tooltip>\n  )\n}\n\n/** Centers the PDF Download button */\nexport const OnlyPDFDisplay = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) => {\n  const layout = useLayout()\n\n  return (\n    <div className={clsx('ob-downloadable-files__container', className)}>\n      <Grid container spacing={2} justifyContent=\"center\">\n        <Grid item xs={12} sm={layout === 'GRID' ? 6 : 12}>\n          {children}\n        </Grid>\n      </Grid>\n    </div>\n  )\n}\n"]}

package/dist/index.d.ts

@@ -31,4 +31,5 @@ export { default as CalendarBookingsRescheduleForm } from './components/calendar
 export { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm';
 export { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication';
 export { default as useMfa, MfaProvider, useUserMeetsMfaRequirement, } from './hooks/useMfa';
+export { default as DownloadableFiles } from './components/downloadable-files';
 export * from './types/form';

package/dist/index.js

@@ -31,5 +31,6 @@ export { default as CalendarBookingsRescheduleForm } from './components/calendar
 export { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm';
 export { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication';
 export { default as useMfa, MfaProvider, useUserMeetsMfaRequirement, } from './hooks/useMfa';
+export { default as DownloadableFiles } from './components/downloadable-files';
 export * from './types/form';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,4DAA4D,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,wDAAwD,CAAA;AACnH,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAiB,MAAM,kBAAkB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EACL,OAAO,IAAI,OAAO,EAClB,mBAAmB,GAEpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,OAAO,IAAI,qBAAqB,EAChC,iCAAiC,GAElC,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,qBAAqB,GAEtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAChF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAE9E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,qDAAqD,CAAA;AACrG,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iEAAiE,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,2DAA2D,CAAA;AAEjH,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AAEjG,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,WAAW,EACX,0BAA0B,GAC3B,MAAM,gBAAgB,CAAA;AAEvB,cAAc,cAAc,CAAA","sourcesContent":["export {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin, UseLoginValue } from './hooks/useLogin'\nexport { default as useSignUp } from './hooks/useSignUp'\nexport {\n  default as useAuth,\n  AuthContextProvider,\n  AuthContextValue,\n} from './hooks/useAuth'\nexport {\n  default as usePendingSubmissions,\n  PendingSubmissionsContextProvider,\n  PendingSubmissionsContextValue,\n} from './hooks/usePendingSubmissions'\nexport {\n  default as useDrafts,\n  DraftsContextProvider,\n  DraftsContextValue,\n} from './hooks/useDrafts'\nexport {\n  default as useLoadDataState,\n  LoadDataState,\n} from './hooks/useLoadDataState'\nexport { default as useLoadResourcesState } from './hooks/useLoadResourcesState'\nexport { default as useLoadDataEffect } from './hooks/useLoadDataEffect'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\nexport { default as useGoogleJsApiLoader } from './hooks/useGoogleJsApiLoader'\n\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\nexport { default as PaymentForm } from './components/payments/PaymentForm'\n\nexport { default as CalendarBookingsForm } from './components/calendar-bookings/CalendarBookingsForm'\nexport { default as CalendarBookingsRescheduleForm } from './components/calendar-bookings/CalendarBookingsReschedulingForm'\nexport { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm'\n\nexport { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication'\n\nexport {\n  default as useMfa,\n  MfaProvider,\n  useUserMeetsMfaRequirement,\n} from './hooks/useMfa'\n\nexport * from './types/form'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,4DAA4D,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,wDAAwD,CAAA;AACnH,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAiB,MAAM,kBAAkB,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EACL,OAAO,IAAI,OAAO,EAClB,mBAAmB,GAEpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,OAAO,IAAI,qBAAqB,EAChC,iCAAiC,GAElC,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,qBAAqB,GAEtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAChF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,8BAA8B,CAAA;AAE9E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,qDAAqD,CAAA;AACrG,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iEAAiE,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,2DAA2D,CAAA;AAEjH,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AAEjG,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,WAAW,EACX,0BAA0B,GAC3B,MAAM,gBAAgB,CAAA;AAEvB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAE9E,cAAc,cAAc,CAAA","sourcesContent":["export {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin, UseLoginValue } from './hooks/useLogin'\nexport { default as useSignUp } from './hooks/useSignUp'\nexport {\n  default as useAuth,\n  AuthContextProvider,\n  AuthContextValue,\n} from './hooks/useAuth'\nexport {\n  default as usePendingSubmissions,\n  PendingSubmissionsContextProvider,\n  PendingSubmissionsContextValue,\n} from './hooks/usePendingSubmissions'\nexport {\n  default as useDrafts,\n  DraftsContextProvider,\n  DraftsContextValue,\n} from './hooks/useDrafts'\nexport {\n  default as useLoadDataState,\n  LoadDataState,\n} from './hooks/useLoadDataState'\nexport { default as useLoadResourcesState } from './hooks/useLoadResourcesState'\nexport { default as useLoadDataEffect } from './hooks/useLoadDataEffect'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\nexport { default as useGoogleJsApiLoader } from './hooks/useGoogleJsApiLoader'\n\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\nexport { default as PaymentForm } from './components/payments/PaymentForm'\n\nexport { default as CalendarBookingsForm } from './components/calendar-bookings/CalendarBookingsForm'\nexport { default as CalendarBookingsRescheduleForm } from './components/calendar-bookings/CalendarBookingsReschedulingForm'\nexport { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm'\n\nexport { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication'\n\nexport {\n  default as useMfa,\n  MfaProvider,\n  useUserMeetsMfaRequirement,\n} from './hooks/useMfa'\n\nexport { default as DownloadableFiles } from './components/downloadable-files'\n\nexport * from './types/form'\n"]}

package/dist/styles/downloadable-files.scss

@@ -0,0 +1,83 @@
+.ob-downloadable-files__wrapper {
+  margin-bottom: $size-6;
+
+  pre {
+    background-color: $white;
+    border: 1px solid $grey-lighter;
+    border-radius: $size-9;
+  }
+}
+// Individual downloadable file item
+.ob-downloadable-files__item {
+  background-color: $white;
+  border: 1px solid $grey-lighter;
+  border-radius: $size-9;
+  padding: $size-5;
+  gap: $size-7;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  align-items: center;
+  display: flex;
+
+  &:hover {
+    background-color: $grey-lightest;
+  }
+}
+
+// Thumbnail image for image files
+.ob-downloadable-files__thumbnail {
+  width: $size-2;
+  height: $size-2;
+  object-fit: cover;
+  border-radius: $size-9;
+}
+
+// File type icon styling
+.ob-downloadable-files__container .ob-downloadable-files__icon {
+  color: $grey;
+  font-size: $size-2;
+}
+
+// Content area containing filename and type
+.ob-downloadable-files__content {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.ob-downloadable-files__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Filename text styling
+.ob-downloadable-files__filename {
+  font-size: 0.9rem;
+  color: $grey-dark;
+  margin-bottom: $size-9;
+  font-weight: 500;
+}
+
+// File type text styling
+.ob-downloadable-files__filetype {
+  color: $grey;
+  font-size: $size-7;
+  text-transform: uppercase;
+}
+
+// Download icon styling
+.ob-downloadable-files__container .ob-downloadable-files__download-icon {
+  color: $grey;
+  font-size: $size-5;
+}
+
+.ob-progress__downloadable-files {
+  width: 70%;
+  margin: auto;
+  border-radius: $size-9;
+}
+
+.ob-downloadable-files__error-pdf {
+  padding-bottom: $size-4;
+}

package/dist/styles.css

@@ -10086,3 +10086,79 @@ textarea:disabled {
   container-name: ob-point-cadastral-parcel__container;
   container-type: inline-size;
 }
+
+.ob-downloadable-files__wrapper {
+  margin-bottom: 1rem;
+}
+.ob-downloadable-files__wrapper pre {
+  background-color: hsl(0, 0%, 100%);
+  border: 1px solid hsl(0, 0%, 86%);
+  border-radius: 0.25rem;
+}
+
+.ob-downloadable-files__item {
+  background-color: hsl(0, 0%, 100%);
+  border: 1px solid hsl(0, 0%, 86%);
+  border-radius: 0.25rem;
+  padding: 1.25rem;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  align-items: center;
+  display: flex;
+}
+.ob-downloadable-files__item:hover {
+  background-color: hsl(0, 0%, 93%);
+}
+
+.ob-downloadable-files__thumbnail {
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: cover;
+  border-radius: 0.25rem;
+}
+
+.ob-downloadable-files__container .ob-downloadable-files__icon {
+  color: #757575;
+  font-size: 2.5rem;
+}
+
+.ob-downloadable-files__content {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.ob-downloadable-files__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ob-downloadable-files__filename {
+  font-size: 0.9rem;
+  color: hsl(0, 0%, 29%);
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+.ob-downloadable-files__filetype {
+  color: #757575;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.ob-downloadable-files__container .ob-downloadable-files__download-icon {
+  color: #757575;
+  font-size: 1.25rem;
+}
+
+.ob-progress__downloadable-files {
+  width: 70%;
+  margin: auto;
+  border-radius: 0.25rem;
+}
+
+.ob-downloadable-files__error-pdf {
+  padding-bottom: 1.5rem;
+}

package/dist/styles.scss

@@ -145,6 +145,7 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/option-buttons.scss';
 @import './styles/nsw-point-address.scss';
 @import './styles/nsw-point-cadastral-parcel.scss';
+@import './styles/downloadable-files.scss';
 //
 // Third Party
 //

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "8.9.1-beta.2",
+  "version": "8.9.2-beta.2",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@nylas/react": "^1.3.1",
-    "@oneblink/sdk-core": "^8.7.0-beta.2",
+    "@oneblink/sdk-core": "^8.8.0-beta.1",
     "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",
@@ -47,7 +47,7 @@
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.15.6",
     "@mui/x-date-pickers": "^6.20.2",
-    "@oneblink/apps": "^23.1.0-beta.9",
+    "@oneblink/apps": "^23.3.0-beta.2",
     "@oneblink/release-cli": "^3.4.0-beta.1",
     "@oneblink/types": "github:oneblink/types",
     "@types/blueimp-load-image": "^5.16.6",