@depay/widgets 9.2.3 → 9.3.1

package/dist/esm/index.js

@@ -533,7 +533,7 @@ var Dialog$1 = (function (props) {
     close = _useContext2.close,
     closable = _useContext2.closable;
   return /*#__PURE__*/React.createElement("div", {
-    className: "Dialog"
+    className: ["Dialog", props.className].join(' ')
   }, /*#__PURE__*/React.createElement("div", {
     className: ["DialogHeader", props.stacked ? 'TextCenter' : ''].join(' ')
   }, props.stacked && /*#__PURE__*/React.createElement("div", {
@@ -546,7 +546,7 @@ var Dialog$1 = (function (props) {
     title: "Go back"
   }, /*#__PURE__*/React.createElement(ChevronLeft, null))), props.header, /*#__PURE__*/React.createElement("div", {
     className: "DialogHeaderActionRight PaddingTopS PaddingLeftS PaddingRightS"
-  }, closable && /*#__PURE__*/React.createElement("button", {
+  }, closable && props.closable !== false && /*#__PURE__*/React.createElement("button", {
     onClick: close,
     className: "ButtonCircular",
     title: "Close dialog"
@@ -1226,7 +1226,7 @@ var CardStyle = (function (style) {
 });
 
 var DialogStyle = (function (style) {
-  return "\n\n    .ReactDialogBackground {\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.2);\n      border-radius: 13px;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 13px;\n        border-top-radius: 13px;\n        display: flex;\n        flex-direction: column;\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.ScrollHeight {\n      height: 30vh !important;\n      max-height: 30vh !important;\n    }\n\n    .DialogHeader {\n      border-top-left-radius: 13px;\n      border-top-right-radius: 13px;\n      min-height: 54px;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 48px;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 48px;\n    }\n\n    .DialogFooter {\n      border-bottom-left-radius: 13px;\n      border-bottom-right-radius: 13px;\n      line-height: 24px;\n      min-height: 32px;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
+  return "\n\n    .ReactDialogBackground {\n      z-index: -2;\n      backdrop-filter: blur(5px);\n      background: rgba(0,0,0,0.7);\n    }\n\n    .contained .ReactDialog {\n      position: absolute;\n      height: 100%;\n      min-height: 100%;\n      width: 100%;\n      min-width: 100%;\n    }\n\n    .contained .ReactDialogBackground {\n      position: absolute;\n    }\n\n    .contained .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n      top: 0;\n    }\n\n    .Dialog {\n      margin: 0 auto;\n      position: relative;\n      width: 420px;\n      box-shadow: 0 0 20px rgba(0,0,0,0.2);\n      border-radius: 13px;\n      background: rgb(248,248,248);\n    }\n\n    @media (max-width: 450px) {\n\n      .Dialog {\n        border-radius: 0;\n        width: 100%;\n      }\n    }\n\n    @media (orientation: portrait) and (max-width: 800px) {\n\n      .ReactDialogAnimation {\n        width: 100%;\n      }\n\n      .ReactDialog {\n        height: 100%;\n        min-height: 100%;\n      }\n\n      .ReactDialogStack {\n        align-items: flex-end;\n      }\n\n      .Dialog {\n        align-content: stretch;\n        border-radius: 13px;\n        border-top-radius: 13px;\n        display: flex;\n        flex-direction: column;\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .DialogBody {\n        flex: 1;\n        align-items: flex-end;\n      }\n\n      .DialogFooter {\n        padding-bottom: 20px;\n      }\n\n      .ReactDialogAnimation {\n        margin-bottom: -100px !important;\n        top: inherit !important;\n        position: relative;\n        transition: opacity 0.4s ease, margin-bottom 0.4s ease;\n      }\n\n      .ReactDialog.ReactDialogOpen .ReactDialogAnimation {\n        margin-bottom: 0px !important;\n      }\n\n      .DialogFooter {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .ReactShadowDOMInsideContainer > .ReactDialog {\n        align-items: flex-end;\n      }\n    }\n\n    .DialogBody {\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n\n    .DialogBody.ScrollHeight {\n      height: 30vh !important;\n      max-height: 30vh !important;\n    }\n\n    .DialogBody.MinHeight {\n      height: 120px !important;\n      max-height: 120px !important;\n    }\n\n    .DialogHeader {\n      border-top-left-radius: 13px;\n      border-top-right-radius: 13px;\n      min-height: 54px;\n      position: relative;\n      width: 100%;\n    }\n\n    .DialogHeaderActionRight {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 48px;\n    }\n\n    .DialogHeaderActionLeft {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 48px;\n    }\n\n    .DialogFooter {\n      border-bottom-left-radius: 13px;\n      border-bottom-right-radius: 13px;\n      line-height: 24px;\n      min-height: 32px;\n      position: relative;\n      text-align: center;\n    }\n\n  ";
 });
 
 var FontStyle = (function (style) {
@@ -20588,8 +20588,9 @@ var PaymentTrackingProvider = (function (props) {
     _useContext.errorCallback;
   var _useContext2 = useContext(ConfigurationContext),
     track = _useContext2.track,
-    validated = _useContext2.validated,
-    integration = _useContext2.integration,
+    validated = _useContext2.validated;
+    _useContext2.failed;
+    var integration = _useContext2.integration,
     link = _useContext2.link,
     type = _useContext2.type;
   var _useContext3 = useContext(WalletContext),
@@ -20643,8 +20644,8 @@ var PaymentTrackingProvider = (function (props) {
   var _useContext4 = useContext(ClosableContext),
     setClosable = _useContext4.setClosable;
   var _useContext5 = useContext(NavigateContext),
-    navigate = _useContext5.navigate;
-    _useContext5.set;
+    navigate = _useContext5.navigate,
+    set = _useContext5.set;
   var openSocket = function openSocket(transaction) {
     var socket = new WebSocket('wss://integrate.depay.com/cable');
     socket.onopen = function (event) {
@@ -20670,18 +20671,24 @@ var PaymentTrackingProvider = (function (props) {
       if (item.type === "ping" || !item.message) {
         return;
       }
+      var success = item.message.status == 'success';
       if (validated) {
-        validated(item.message.status == 'success');
+        validated(success);
       }
       if (item.message.release) {
-        setRelease(true);
-        setClosable(!item.message.forward_to);
-        setForwardTo(item.message.forward_to);
         socket.close(1000);
-        if (!!item.message.forward_to) {
-          setTimeout(function () {
-            props.document.location.href = item.message.forward_to;
-          }, 200);
+        if (success) {
+          setRelease(true);
+          setClosable(!item.message.forward_to);
+          setForwardTo(item.message.forward_to);
+          if (!!item.message.forward_to) {
+            setTimeout(function () {
+              props.document.location.href = item.message.forward_to;
+            }, 200);
+          }
+        } else if (success == false) {
+          setClosable(true);
+          set(['PaymentFailed']);
         }
       } else if (item.message.confirmations) {
         setConfirmationsRequired(item.message.confirmations.required);
@@ -21300,6 +21307,111 @@ var Donation = /*#__PURE__*/function () {
   };
 }();
 
+var LoadingDialog = (function (props) {
+  var _useContext = useContext(ConfigurationContext),
+    text = _useContext.text;
+  return /*#__PURE__*/React.createElement(Dialog$1, {
+    closable: false,
+    header: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
+    }, /*#__PURE__*/React.createElement("h1", {
+      className: "LineHeightL FontSizeL"
+    }, "Payment")),
+    body: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingLeftM PaddingRightM PaddingBottomXS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "Card Skeleton"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "SkeletonBackground"
+    }))),
+    footer: /*#__PURE__*/React.createElement("div", {
+      className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomS"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "SkeletonWrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ButtonPrimary Skeleton"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "SkeletonBackground"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "TextCenter Opacity05 PaddingTopS"
+    }, /*#__PURE__*/React.createElement("strong", null, text)))
+  });
+});
+
+var LoadingStack = (function (props) {
+  var _useContext = useContext(ClosableContext),
+    open = _useContext.open,
+    close = _useContext.close;
+  var _useContext2 = useContext(NavigateContext),
+    setNavigator = _useContext2.setNavigator;
+  return /*#__PURE__*/React.createElement(ReactDialogStack, {
+    setNavigator: setNavigator,
+    open: open,
+    close: close,
+    start: "Loading",
+    container: props.container,
+    document: props.document,
+    dialogs: {
+      Loading: /*#__PURE__*/React.createElement(LoadingDialog, null)
+    }
+  });
+});
+
+var Loading = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref) {
+    var text, style, error, critical, container, document, unmount;
+    return regenerator.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          text = _ref.text, style = _ref.style, error = _ref.error, critical = _ref.critical, container = _ref.container, _ref.before, document = _ref.document;
+          requireReactVersion();
+          _context.prev = 2;
+          unmount = mount({
+            style: style,
+            container: container,
+            document: ensureDocument(document),
+            closed: closed
+          }, function (unmount) {
+            return function (container) {
+              return /*#__PURE__*/React.createElement(ErrorProvider, {
+                errorCallback: error,
+                container: container,
+                unmount: unmount
+              }, /*#__PURE__*/React.createElement(ConfigurationProvider, {
+                configuration: {
+                  text: text
+                }
+              }, /*#__PURE__*/React.createElement(UpdatableProvider, null, /*#__PURE__*/React.createElement(ClosableProvider, {
+                unmount: unmount,
+                closable: false
+              }, /*#__PURE__*/React.createElement(NavigateProvider, null, /*#__PURE__*/React.createElement(LoadingStack, {
+                document: document,
+                container: container
+              }), /*#__PURE__*/React.createElement(PoweredBy, null))))));
+            };
+          });
+          window._depayUnmountLoading = unmount;
+          return _context.abrupt("return", {
+            unmount: unmount
+          });
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](2);
+          console.log('critical error', _context.t0);
+          if (critical != undefined) {
+            critical(_context.t0);
+          }
+        case 12:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 8]]);
+  }));
+  return function Loading(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
 var SignLoginDialog = (function (props) {
   var _useContext = useContext(ErrorContext),
     setError = _useContext.setError;
@@ -21517,7 +21629,7 @@ var PaymentOverviewSkeleton = (function (props) {
       className: "SkeletonBackground"
     }))),
     footer: /*#__PURE__*/React.createElement("div", {
-      className: "PaddingTopXS PaddingRightM PaddingLeftM PaddingBottomM"
+      className: ["PaddingTopXS PaddingRightM PaddingLeftM", selectedRoute == undefined && slowRouting ? 'PaddingBottomS' : 'PaddingBottomM'].join(' ')
     }, /*#__PURE__*/React.createElement("div", {
       className: "SkeletonWrapper"
     }, /*#__PURE__*/React.createElement("div", {
@@ -21788,6 +21900,9 @@ var Payment = /*#__PURE__*/function () {
             recover: recover
           });
         case 5:
+          if (typeof window._depayUnmountLoading == 'function') {
+            window._depayUnmountLoading();
+          }
           unmount = mount({
             style: style,
             container: container,
@@ -21850,18 +21965,18 @@ var Payment = /*#__PURE__*/function () {
           return _context2.abrupt("return", {
             unmount: unmount
           });
-        case 9:
-          _context2.prev = 9;
+        case 10:
+          _context2.prev = 10;
           _context2.t0 = _context2["catch"](2);
           console.log('critical error', _context2.t0);
           if (critical != undefined) {
             critical(_context2.t0);
           }
-        case 13:
+        case 14:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[2, 9]]);
+    }, _callee2, null, [[2, 10]]);
   }));
   return function Payment(_x2) {
     return _ref4.apply(this, arguments);
@@ -23674,7 +23789,8 @@ var DePayWidgets = {
   Login: Login,
   Payment: Payment,
   Sale: Sale,
-  Select: Select
+  Select: Select,
+  Loading: Loading
 };
 
 export { DePayWidgets as default };