@depay/widgets 6.5.5 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -210,6 +210,10 @@ Those values are supposed to be set by your backend not the widget nor the front
210
210
 
211
211
  Make sure you read the [Payment Tracking API](https://depay.fi/documentation/api#payments) for further details on how to integrate payment tracking.
212
212
 
213
+ Payment tracking requests will be attempted up to 3 times by the widget and will display "Payment tracking failed!" to the user if the widget was not able to start payment tracking via the given endpoint after 3 attempts.
214
+
215
+ A failed payment tracking will also call the [error callback](#https://github.com/depayfi/widgets#error) with `{code: "TRACKING_FAILED"}`.
216
+
213
217
  #### connected
214
218
 
215
219
  `connected`
@@ -49451,7 +49451,8 @@ var ErrorProvider = (function (props) {
49451
49451
  } else {
49452
49452
  return /*#__PURE__*/react.createElement(ErrorContext.Provider, {
49453
49453
  value: {
49454
- setError: setErrorFromChildren
49454
+ setError: setErrorFromChildren,
49455
+ errorCallback: props.errorCallback
49455
49456
  }
49456
49457
  }, /*#__PURE__*/react.createElement(ErrorBoundary, {
49457
49458
  setError: setErrorFromChildren
@@ -49496,7 +49497,7 @@ var HeightStyle = (function () {
49496
49497
  });
49497
49498
 
49498
49499
  var IconStyle = (function (style) {
49499
- return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
49500
+ return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .AlertIcon {\n height: 20px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 20px;\n fill: #e42626;\n stroke: transparent;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
49500
49501
  });
49501
49502
 
49502
49503
  var ImageStyle = (function (style) {
@@ -69671,6 +69672,19 @@ var DonationOverviewSkeleton = (function (props) {
69671
69672
  });
69672
69673
  });
69673
69674
 
69675
+ var AlertIcon = (function (props) {
69676
+ return /*#__PURE__*/react.createElement("svg", {
69677
+ className: "AlertIcon Icon " + props.className,
69678
+ version: "1.1",
69679
+ xmlns: "http://www.w3.org/2000/svg",
69680
+ x: "0px",
69681
+ y: "0px",
69682
+ viewBox: "0 0 20 20"
69683
+ }, /*#__PURE__*/react.createElement("path", {
69684
+ d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
69685
+ }));
69686
+ });
69687
+
69674
69688
  var Checkmark = (function (props) {
69675
69689
  return /*#__PURE__*/react.createElement("svg", {
69676
69690
  className: "Checkmark Icon " + props.className,
@@ -69748,7 +69762,8 @@ var Footer = (function () {
69748
69762
  var _useContext3 = react.useContext(TrackingContext),
69749
69763
  tracking = _useContext3.tracking,
69750
69764
  forward = _useContext3.forward,
69751
- forwardTo = _useContext3.forwardTo;
69765
+ forwardTo = _useContext3.forwardTo,
69766
+ trackingFailed = _useContext3.trackingFailed;
69752
69767
 
69753
69768
  var _useContext4 = react.useContext(PaymentContext),
69754
69769
  payment = _useContext4.payment,
@@ -69773,7 +69788,7 @@ var Footer = (function () {
69773
69788
  }
69774
69789
 
69775
69790
  if (forward) {
69776
- return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
69791
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
69777
69792
  className: "Card transparent small disabled"
69778
69793
  }, /*#__PURE__*/react.createElement("div", {
69779
69794
  className: "CardImage"
@@ -69789,21 +69804,37 @@ var Footer = (function () {
69789
69804
  className: "Opacity05"
69790
69805
  }, "Payment confirmation has been stored")))));
69791
69806
  } else {
69792
- return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
69793
- className: "Card transparent small disabled"
69794
- }, /*#__PURE__*/react.createElement("div", {
69795
- className: "CardImage"
69796
- }, /*#__PURE__*/react.createElement("div", {
69797
- className: "TextCenter"
69798
- }, /*#__PURE__*/react.createElement("div", {
69799
- className: "Loading Icon"
69800
- }))), /*#__PURE__*/react.createElement("div", {
69801
- className: "CardBody"
69802
- }, /*#__PURE__*/react.createElement("div", {
69803
- className: "CardBodyWrapper"
69804
- }, /*#__PURE__*/react.createElement("div", {
69805
- className: "Opacity05"
69806
- }, "Storing payment confirmation")))));
69807
+ if (trackingFailed) {
69808
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
69809
+ className: "Card transparent small"
69810
+ }, /*#__PURE__*/react.createElement("div", {
69811
+ className: "CardImage"
69812
+ }, /*#__PURE__*/react.createElement("div", {
69813
+ className: "TextCenter"
69814
+ }, /*#__PURE__*/react.createElement(AlertIcon, {
69815
+ className: "small"
69816
+ }))), /*#__PURE__*/react.createElement("div", {
69817
+ className: "CardBody"
69818
+ }, /*#__PURE__*/react.createElement("div", {
69819
+ className: "CardBodyWrapper"
69820
+ }, /*#__PURE__*/react.createElement("div", null, "Tracking payment failed!")))));
69821
+ } else {
69822
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
69823
+ className: "Card transparent small disabled"
69824
+ }, /*#__PURE__*/react.createElement("div", {
69825
+ className: "CardImage"
69826
+ }, /*#__PURE__*/react.createElement("div", {
69827
+ className: "TextCenter"
69828
+ }, /*#__PURE__*/react.createElement("div", {
69829
+ className: "Loading Icon"
69830
+ }))), /*#__PURE__*/react.createElement("div", {
69831
+ className: "CardBody"
69832
+ }, /*#__PURE__*/react.createElement("div", {
69833
+ className: "CardBodyWrapper"
69834
+ }, /*#__PURE__*/react.createElement("div", {
69835
+ className: "Opacity05"
69836
+ }, "Storing payment confirmation")))));
69837
+ }
69807
69838
  }
69808
69839
  };
69809
69840
 
@@ -70130,8 +70161,11 @@ var DonationStack = (function (props) {
70130
70161
  });
70131
70162
 
70132
70163
  var TrackingProvider = (function (props) {
70133
- var _useContext = react.useContext(ConfigurationContext),
70134
- track = _useContext.track;
70164
+ var _useContext = react.useContext(ErrorContext),
70165
+ errorCallback = _useContext.errorCallback;
70166
+
70167
+ var _useContext2 = react.useContext(ConfigurationContext),
70168
+ track = _useContext2.track;
70135
70169
 
70136
70170
  var _useState = react.useState(track && !!track.endpoint),
70137
70171
  _useState2 = _slicedToArray(_useState, 2),
@@ -70143,13 +70177,18 @@ var TrackingProvider = (function (props) {
70143
70177
  forward = _useState4[0],
70144
70178
  setForward = _useState4[1];
70145
70179
 
70146
- var _useState5 = react.useState(),
70180
+ var _useState5 = react.useState(false),
70147
70181
  _useState6 = _slicedToArray(_useState5, 2),
70148
- forwardTo = _useState6[0],
70149
- setForwardTo = _useState6[1];
70182
+ trackingFailed = _useState6[0],
70183
+ setTrackingFailed = _useState6[1];
70150
70184
 
70151
- var _useContext2 = react.useContext(ClosableContext),
70152
- setClosable = _useContext2.setClosable;
70185
+ var _useState7 = react.useState(),
70186
+ _useState8 = _slicedToArray(_useState7, 2),
70187
+ forwardTo = _useState8[0],
70188
+ setForwardTo = _useState8[1];
70189
+
70190
+ var _useContext3 = react.useContext(ClosableContext),
70191
+ setClosable = _useContext3.setClosable;
70153
70192
 
70154
70193
  react.useEffect(function () {
70155
70194
  setTracking(track && !!track.endpoint);
@@ -70209,6 +70248,13 @@ var TrackingProvider = (function (props) {
70209
70248
  }, 3000);
70210
70249
  } else {
70211
70250
  console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
70251
+ setTrackingFailed(true);
70252
+
70253
+ if (typeof errorCallback == 'function') {
70254
+ errorCallback({
70255
+ code: 'TRACKING_FAILED'
70256
+ });
70257
+ }
70212
70258
  }
70213
70259
  };
70214
70260
 
@@ -70244,7 +70290,8 @@ var TrackingProvider = (function (props) {
70244
70290
  tracking: tracking,
70245
70291
  initializeTracking: initializeTracking,
70246
70292
  forward: forward,
70247
- forwardTo: forwardTo
70293
+ forwardTo: forwardTo,
70294
+ trackingFailed: trackingFailed
70248
70295
  }
70249
70296
  }, props.children);
70250
70297
  });
package/dist/esm/index.js CHANGED
@@ -1652,7 +1652,8 @@ var ErrorProvider = (function (props) {
1652
1652
  } else {
1653
1653
  return /*#__PURE__*/React.createElement(ErrorContext.Provider, {
1654
1654
  value: {
1655
- setError: setErrorFromChildren
1655
+ setError: setErrorFromChildren,
1656
+ errorCallback: props.errorCallback
1656
1657
  }
1657
1658
  }, /*#__PURE__*/React.createElement(ErrorBoundary, {
1658
1659
  setError: setErrorFromChildren
@@ -1697,7 +1698,7 @@ var HeightStyle = (function () {
1697
1698
  });
1698
1699
 
1699
1700
  var IconStyle = (function (style) {
1700
- return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
1701
+ return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .AlertIcon {\n height: 20px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 20px;\n fill: #e42626;\n stroke: transparent;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
1701
1702
  });
1702
1703
 
1703
1704
  var ImageStyle = (function (style) {
@@ -3048,6 +3049,19 @@ var DonationOverviewSkeleton = (function (props) {
3048
3049
  });
3049
3050
  });
3050
3051
 
3052
+ var AlertIcon = (function (props) {
3053
+ return /*#__PURE__*/React.createElement("svg", {
3054
+ className: "AlertIcon Icon " + props.className,
3055
+ version: "1.1",
3056
+ xmlns: "http://www.w3.org/2000/svg",
3057
+ x: "0px",
3058
+ y: "0px",
3059
+ viewBox: "0 0 20 20"
3060
+ }, /*#__PURE__*/React.createElement("path", {
3061
+ d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
3062
+ }));
3063
+ });
3064
+
3051
3065
  var Checkmark = (function (props) {
3052
3066
  return /*#__PURE__*/React.createElement("svg", {
3053
3067
  className: "Checkmark Icon " + props.className,
@@ -3125,7 +3139,8 @@ var Footer = (function () {
3125
3139
  var _useContext3 = useContext(TrackingContext),
3126
3140
  tracking = _useContext3.tracking,
3127
3141
  forward = _useContext3.forward,
3128
- forwardTo = _useContext3.forwardTo;
3142
+ forwardTo = _useContext3.forwardTo,
3143
+ trackingFailed = _useContext3.trackingFailed;
3129
3144
 
3130
3145
  var _useContext4 = useContext(PaymentContext),
3131
3146
  payment = _useContext4.payment,
@@ -3150,7 +3165,7 @@ var Footer = (function () {
3150
3165
  }
3151
3166
 
3152
3167
  if (forward) {
3153
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
3168
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
3154
3169
  className: "Card transparent small disabled"
3155
3170
  }, /*#__PURE__*/React.createElement("div", {
3156
3171
  className: "CardImage"
@@ -3166,21 +3181,37 @@ var Footer = (function () {
3166
3181
  className: "Opacity05"
3167
3182
  }, "Payment confirmation has been stored")))));
3168
3183
  } else {
3169
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
3170
- className: "Card transparent small disabled"
3171
- }, /*#__PURE__*/React.createElement("div", {
3172
- className: "CardImage"
3173
- }, /*#__PURE__*/React.createElement("div", {
3174
- className: "TextCenter"
3175
- }, /*#__PURE__*/React.createElement("div", {
3176
- className: "Loading Icon"
3177
- }))), /*#__PURE__*/React.createElement("div", {
3178
- className: "CardBody"
3179
- }, /*#__PURE__*/React.createElement("div", {
3180
- className: "CardBodyWrapper"
3181
- }, /*#__PURE__*/React.createElement("div", {
3182
- className: "Opacity05"
3183
- }, "Storing payment confirmation")))));
3184
+ if (trackingFailed) {
3185
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
3186
+ className: "Card transparent small"
3187
+ }, /*#__PURE__*/React.createElement("div", {
3188
+ className: "CardImage"
3189
+ }, /*#__PURE__*/React.createElement("div", {
3190
+ className: "TextCenter"
3191
+ }, /*#__PURE__*/React.createElement(AlertIcon, {
3192
+ className: "small"
3193
+ }))), /*#__PURE__*/React.createElement("div", {
3194
+ className: "CardBody"
3195
+ }, /*#__PURE__*/React.createElement("div", {
3196
+ className: "CardBodyWrapper"
3197
+ }, /*#__PURE__*/React.createElement("div", null, "Tracking payment failed!")))));
3198
+ } else {
3199
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
3200
+ className: "Card transparent small disabled"
3201
+ }, /*#__PURE__*/React.createElement("div", {
3202
+ className: "CardImage"
3203
+ }, /*#__PURE__*/React.createElement("div", {
3204
+ className: "TextCenter"
3205
+ }, /*#__PURE__*/React.createElement("div", {
3206
+ className: "Loading Icon"
3207
+ }))), /*#__PURE__*/React.createElement("div", {
3208
+ className: "CardBody"
3209
+ }, /*#__PURE__*/React.createElement("div", {
3210
+ className: "CardBodyWrapper"
3211
+ }, /*#__PURE__*/React.createElement("div", {
3212
+ className: "Opacity05"
3213
+ }, "Storing payment confirmation")))));
3214
+ }
3184
3215
  }
3185
3216
  };
3186
3217
 
@@ -3507,8 +3538,11 @@ var DonationStack = (function (props) {
3507
3538
  });
3508
3539
 
3509
3540
  var TrackingProvider = (function (props) {
3510
- var _useContext = useContext(ConfigurationContext),
3511
- track = _useContext.track;
3541
+ var _useContext = useContext(ErrorContext),
3542
+ errorCallback = _useContext.errorCallback;
3543
+
3544
+ var _useContext2 = useContext(ConfigurationContext),
3545
+ track = _useContext2.track;
3512
3546
 
3513
3547
  var _useState = useState(track && !!track.endpoint),
3514
3548
  _useState2 = _slicedToArray(_useState, 2),
@@ -3520,13 +3554,18 @@ var TrackingProvider = (function (props) {
3520
3554
  forward = _useState4[0],
3521
3555
  setForward = _useState4[1];
3522
3556
 
3523
- var _useState5 = useState(),
3557
+ var _useState5 = useState(false),
3524
3558
  _useState6 = _slicedToArray(_useState5, 2),
3525
- forwardTo = _useState6[0],
3526
- setForwardTo = _useState6[1];
3559
+ trackingFailed = _useState6[0],
3560
+ setTrackingFailed = _useState6[1];
3527
3561
 
3528
- var _useContext2 = useContext(ClosableContext),
3529
- setClosable = _useContext2.setClosable;
3562
+ var _useState7 = useState(),
3563
+ _useState8 = _slicedToArray(_useState7, 2),
3564
+ forwardTo = _useState8[0],
3565
+ setForwardTo = _useState8[1];
3566
+
3567
+ var _useContext3 = useContext(ClosableContext),
3568
+ setClosable = _useContext3.setClosable;
3530
3569
 
3531
3570
  useEffect(function () {
3532
3571
  setTracking(track && !!track.endpoint);
@@ -3586,6 +3625,13 @@ var TrackingProvider = (function (props) {
3586
3625
  }, 3000);
3587
3626
  } else {
3588
3627
  console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
3628
+ setTrackingFailed(true);
3629
+
3630
+ if (typeof errorCallback == 'function') {
3631
+ errorCallback({
3632
+ code: 'TRACKING_FAILED'
3633
+ });
3634
+ }
3589
3635
  }
3590
3636
  };
3591
3637
 
@@ -3621,7 +3667,8 @@ var TrackingProvider = (function (props) {
3621
3667
  tracking: tracking,
3622
3668
  initializeTracking: initializeTracking,
3623
3669
  forward: forward,
3624
- forwardTo: forwardTo
3670
+ forwardTo: forwardTo,
3671
+ trackingFailed: trackingFailed
3625
3672
  }
3626
3673
  }, props.children);
3627
3674
  });
@@ -49457,7 +49457,8 @@
49457
49457
  } else {
49458
49458
  return /*#__PURE__*/react.createElement(ErrorContext.Provider, {
49459
49459
  value: {
49460
- setError: setErrorFromChildren
49460
+ setError: setErrorFromChildren,
49461
+ errorCallback: props.errorCallback
49461
49462
  }
49462
49463
  }, /*#__PURE__*/react.createElement(ErrorBoundary, {
49463
49464
  setError: setErrorFromChildren
@@ -49502,7 +49503,7 @@
49502
49503
  });
49503
49504
 
49504
49505
  var IconStyle = (function (style) {
49505
- return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
49506
+ return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .AlertIcon {\n height: 20px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 20px;\n fill: #e42626;\n stroke: transparent;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
49506
49507
  });
49507
49508
 
49508
49509
  var ImageStyle = (function (style) {
@@ -69677,6 +69678,19 @@
69677
69678
  });
69678
69679
  });
69679
69680
 
69681
+ var AlertIcon = (function (props) {
69682
+ return /*#__PURE__*/react.createElement("svg", {
69683
+ className: "AlertIcon Icon " + props.className,
69684
+ version: "1.1",
69685
+ xmlns: "http://www.w3.org/2000/svg",
69686
+ x: "0px",
69687
+ y: "0px",
69688
+ viewBox: "0 0 20 20"
69689
+ }, /*#__PURE__*/react.createElement("path", {
69690
+ d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
69691
+ }));
69692
+ });
69693
+
69680
69694
  var Checkmark = (function (props) {
69681
69695
  return /*#__PURE__*/react.createElement("svg", {
69682
69696
  className: "Checkmark Icon " + props.className,
@@ -69754,7 +69768,8 @@
69754
69768
  var _useContext3 = react.useContext(TrackingContext),
69755
69769
  tracking = _useContext3.tracking,
69756
69770
  forward = _useContext3.forward,
69757
- forwardTo = _useContext3.forwardTo;
69771
+ forwardTo = _useContext3.forwardTo,
69772
+ trackingFailed = _useContext3.trackingFailed;
69758
69773
 
69759
69774
  var _useContext4 = react.useContext(PaymentContext),
69760
69775
  payment = _useContext4.payment,
@@ -69779,7 +69794,7 @@
69779
69794
  }
69780
69795
 
69781
69796
  if (forward) {
69782
- return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
69797
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
69783
69798
  className: "Card transparent small disabled"
69784
69799
  }, /*#__PURE__*/react.createElement("div", {
69785
69800
  className: "CardImage"
@@ -69795,21 +69810,37 @@
69795
69810
  className: "Opacity05"
69796
69811
  }, "Payment confirmation has been stored")))));
69797
69812
  } else {
69798
- return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("a", {
69799
- className: "Card transparent small disabled"
69800
- }, /*#__PURE__*/react.createElement("div", {
69801
- className: "CardImage"
69802
- }, /*#__PURE__*/react.createElement("div", {
69803
- className: "TextCenter"
69804
- }, /*#__PURE__*/react.createElement("div", {
69805
- className: "Loading Icon"
69806
- }))), /*#__PURE__*/react.createElement("div", {
69807
- className: "CardBody"
69808
- }, /*#__PURE__*/react.createElement("div", {
69809
- className: "CardBodyWrapper"
69810
- }, /*#__PURE__*/react.createElement("div", {
69811
- className: "Opacity05"
69812
- }, "Storing payment confirmation")))));
69813
+ if (trackingFailed) {
69814
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
69815
+ className: "Card transparent small"
69816
+ }, /*#__PURE__*/react.createElement("div", {
69817
+ className: "CardImage"
69818
+ }, /*#__PURE__*/react.createElement("div", {
69819
+ className: "TextCenter"
69820
+ }, /*#__PURE__*/react.createElement(AlertIcon, {
69821
+ className: "small"
69822
+ }))), /*#__PURE__*/react.createElement("div", {
69823
+ className: "CardBody"
69824
+ }, /*#__PURE__*/react.createElement("div", {
69825
+ className: "CardBodyWrapper"
69826
+ }, /*#__PURE__*/react.createElement("div", null, "Tracking payment failed!")))));
69827
+ } else {
69828
+ return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
69829
+ className: "Card transparent small disabled"
69830
+ }, /*#__PURE__*/react.createElement("div", {
69831
+ className: "CardImage"
69832
+ }, /*#__PURE__*/react.createElement("div", {
69833
+ className: "TextCenter"
69834
+ }, /*#__PURE__*/react.createElement("div", {
69835
+ className: "Loading Icon"
69836
+ }))), /*#__PURE__*/react.createElement("div", {
69837
+ className: "CardBody"
69838
+ }, /*#__PURE__*/react.createElement("div", {
69839
+ className: "CardBodyWrapper"
69840
+ }, /*#__PURE__*/react.createElement("div", {
69841
+ className: "Opacity05"
69842
+ }, "Storing payment confirmation")))));
69843
+ }
69813
69844
  }
69814
69845
  };
69815
69846
 
@@ -70136,8 +70167,11 @@
70136
70167
  });
70137
70168
 
70138
70169
  var TrackingProvider = (function (props) {
70139
- var _useContext = react.useContext(ConfigurationContext),
70140
- track = _useContext.track;
70170
+ var _useContext = react.useContext(ErrorContext),
70171
+ errorCallback = _useContext.errorCallback;
70172
+
70173
+ var _useContext2 = react.useContext(ConfigurationContext),
70174
+ track = _useContext2.track;
70141
70175
 
70142
70176
  var _useState = react.useState(track && !!track.endpoint),
70143
70177
  _useState2 = _slicedToArray(_useState, 2),
@@ -70149,13 +70183,18 @@
70149
70183
  forward = _useState4[0],
70150
70184
  setForward = _useState4[1];
70151
70185
 
70152
- var _useState5 = react.useState(),
70186
+ var _useState5 = react.useState(false),
70153
70187
  _useState6 = _slicedToArray(_useState5, 2),
70154
- forwardTo = _useState6[0],
70155
- setForwardTo = _useState6[1];
70188
+ trackingFailed = _useState6[0],
70189
+ setTrackingFailed = _useState6[1];
70156
70190
 
70157
- var _useContext2 = react.useContext(ClosableContext),
70158
- setClosable = _useContext2.setClosable;
70191
+ var _useState7 = react.useState(),
70192
+ _useState8 = _slicedToArray(_useState7, 2),
70193
+ forwardTo = _useState8[0],
70194
+ setForwardTo = _useState8[1];
70195
+
70196
+ var _useContext3 = react.useContext(ClosableContext),
70197
+ setClosable = _useContext3.setClosable;
70159
70198
 
70160
70199
  react.useEffect(function () {
70161
70200
  setTracking(track && !!track.endpoint);
@@ -70215,6 +70254,13 @@
70215
70254
  }, 3000);
70216
70255
  } else {
70217
70256
  console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
70257
+ setTrackingFailed(true);
70258
+
70259
+ if (typeof errorCallback == 'function') {
70260
+ errorCallback({
70261
+ code: 'TRACKING_FAILED'
70262
+ });
70263
+ }
70218
70264
  }
70219
70265
  };
70220
70266
 
@@ -70250,7 +70296,8 @@
70250
70296
  tracking: tracking,
70251
70297
  initializeTracking: initializeTracking,
70252
70298
  forward: forward,
70253
- forwardTo: forwardTo
70299
+ forwardTo: forwardTo,
70300
+ trackingFailed: trackingFailed
70254
70301
  }
70255
70302
  }, props.children);
70256
70303
  });
package/dist/umd/index.js CHANGED
@@ -1647,7 +1647,8 @@
1647
1647
  } else {
1648
1648
  return /*#__PURE__*/React__default["default"].createElement(ErrorContext.Provider, {
1649
1649
  value: {
1650
- setError: setErrorFromChildren
1650
+ setError: setErrorFromChildren,
1651
+ errorCallback: props.errorCallback
1651
1652
  }
1652
1653
  }, /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, {
1653
1654
  setError: setErrorFromChildren
@@ -1692,7 +1693,7 @@
1692
1693
  });
1693
1694
 
1694
1695
  var IconStyle = (function (style) {
1695
- return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
1696
+ return "\n\n .Icon {\n fill : ".concat(style.colors.icons, ";\n stroke : ").concat(style.colors.icons, ";\n }\n\n .ChevronLeft, .ChevronRight {\n position: relative;\n top: 1px;\n }\n\n .Checkmark {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .AlertIcon {\n height: 20px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 20px;\n fill: #e42626;\n stroke: transparent;\n }\n\n .CheckMark.small {\n height: 16px;\n width: 16px;\n }\n\n .DigitalWalletIcon {\n height: 24px;\n position: relative;\n top: -1px;\n vertical-align: middle;\n width: 24px;\n }\n\n .ButtonPrimary .Icon {\n fill : ").concat(style.colors.buttonText, ";\n stroke : ").concat(style.colors.buttonText, ";\n }\n\n .Loading {\n border: 3px solid ").concat(style.colors.primary, ";\n border-top: 3px solid rgba(0,0,0,0.1);\n border-radius: 100%;\n position: relative;\n left: -1px;\n width: 18px;\n height: 18px;\n animation: spin 1.5s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ");
1696
1697
  });
1697
1698
 
1698
1699
  var ImageStyle = (function (style) {
@@ -3043,6 +3044,19 @@
3043
3044
  });
3044
3045
  });
3045
3046
 
3047
+ var AlertIcon = (function (props) {
3048
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3049
+ className: "AlertIcon Icon " + props.className,
3050
+ version: "1.1",
3051
+ xmlns: "http://www.w3.org/2000/svg",
3052
+ x: "0px",
3053
+ y: "0px",
3054
+ viewBox: "0 0 20 20"
3055
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3056
+ d: "M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"
3057
+ }));
3058
+ });
3059
+
3046
3060
  var Checkmark = (function (props) {
3047
3061
  return /*#__PURE__*/React__default["default"].createElement("svg", {
3048
3062
  className: "Checkmark Icon " + props.className,
@@ -3120,7 +3134,8 @@
3120
3134
  var _useContext3 = React.useContext(TrackingContext),
3121
3135
  tracking = _useContext3.tracking,
3122
3136
  forward = _useContext3.forward,
3123
- forwardTo = _useContext3.forwardTo;
3137
+ forwardTo = _useContext3.forwardTo,
3138
+ trackingFailed = _useContext3.trackingFailed;
3124
3139
 
3125
3140
  var _useContext4 = React.useContext(PaymentContext),
3126
3141
  payment = _useContext4.payment,
@@ -3145,7 +3160,7 @@
3145
3160
  }
3146
3161
 
3147
3162
  if (forward) {
3148
- return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
3163
+ return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
3149
3164
  className: "Card transparent small disabled"
3150
3165
  }, /*#__PURE__*/React__default["default"].createElement("div", {
3151
3166
  className: "CardImage"
@@ -3161,21 +3176,37 @@
3161
3176
  className: "Opacity05"
3162
3177
  }, "Payment confirmation has been stored")))));
3163
3178
  } else {
3164
- return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("a", {
3165
- className: "Card transparent small disabled"
3166
- }, /*#__PURE__*/React__default["default"].createElement("div", {
3167
- className: "CardImage"
3168
- }, /*#__PURE__*/React__default["default"].createElement("div", {
3169
- className: "TextCenter"
3170
- }, /*#__PURE__*/React__default["default"].createElement("div", {
3171
- className: "Loading Icon"
3172
- }))), /*#__PURE__*/React__default["default"].createElement("div", {
3173
- className: "CardBody"
3174
- }, /*#__PURE__*/React__default["default"].createElement("div", {
3175
- className: "CardBodyWrapper"
3176
- }, /*#__PURE__*/React__default["default"].createElement("div", {
3177
- className: "Opacity05"
3178
- }, "Storing payment confirmation")))));
3179
+ if (trackingFailed) {
3180
+ return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
3181
+ className: "Card transparent small"
3182
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3183
+ className: "CardImage"
3184
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3185
+ className: "TextCenter"
3186
+ }, /*#__PURE__*/React__default["default"].createElement(AlertIcon, {
3187
+ className: "small"
3188
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
3189
+ className: "CardBody"
3190
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3191
+ className: "CardBodyWrapper"
3192
+ }, /*#__PURE__*/React__default["default"].createElement("div", null, "Tracking payment failed!")))));
3193
+ } else {
3194
+ return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
3195
+ className: "Card transparent small disabled"
3196
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3197
+ className: "CardImage"
3198
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3199
+ className: "TextCenter"
3200
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3201
+ className: "Loading Icon"
3202
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
3203
+ className: "CardBody"
3204
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3205
+ className: "CardBodyWrapper"
3206
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3207
+ className: "Opacity05"
3208
+ }, "Storing payment confirmation")))));
3209
+ }
3179
3210
  }
3180
3211
  };
3181
3212
 
@@ -3502,8 +3533,11 @@
3502
3533
  });
3503
3534
 
3504
3535
  var TrackingProvider = (function (props) {
3505
- var _useContext = React.useContext(ConfigurationContext),
3506
- track = _useContext.track;
3536
+ var _useContext = React.useContext(ErrorContext),
3537
+ errorCallback = _useContext.errorCallback;
3538
+
3539
+ var _useContext2 = React.useContext(ConfigurationContext),
3540
+ track = _useContext2.track;
3507
3541
 
3508
3542
  var _useState = React.useState(track && !!track.endpoint),
3509
3543
  _useState2 = _slicedToArray(_useState, 2),
@@ -3515,13 +3549,18 @@
3515
3549
  forward = _useState4[0],
3516
3550
  setForward = _useState4[1];
3517
3551
 
3518
- var _useState5 = React.useState(),
3552
+ var _useState5 = React.useState(false),
3519
3553
  _useState6 = _slicedToArray(_useState5, 2),
3520
- forwardTo = _useState6[0],
3521
- setForwardTo = _useState6[1];
3554
+ trackingFailed = _useState6[0],
3555
+ setTrackingFailed = _useState6[1];
3522
3556
 
3523
- var _useContext2 = React.useContext(ClosableContext),
3524
- setClosable = _useContext2.setClosable;
3557
+ var _useState7 = React.useState(),
3558
+ _useState8 = _slicedToArray(_useState7, 2),
3559
+ forwardTo = _useState8[0],
3560
+ setForwardTo = _useState8[1];
3561
+
3562
+ var _useContext3 = React.useContext(ClosableContext),
3563
+ setClosable = _useContext3.setClosable;
3525
3564
 
3526
3565
  React.useEffect(function () {
3527
3566
  setTracking(track && !!track.endpoint);
@@ -3581,6 +3620,13 @@
3581
3620
  }, 3000);
3582
3621
  } else {
3583
3622
  console.log('TRACKING FAILED AFTER 3 ATTEMPTS!');
3623
+ setTrackingFailed(true);
3624
+
3625
+ if (typeof errorCallback == 'function') {
3626
+ errorCallback({
3627
+ code: 'TRACKING_FAILED'
3628
+ });
3629
+ }
3584
3630
  }
3585
3631
  };
3586
3632
 
@@ -3616,7 +3662,8 @@
3616
3662
  tracking: tracking,
3617
3663
  initializeTracking: initializeTracking,
3618
3664
  forward: forward,
3619
- forwardTo: forwardTo
3665
+ forwardTo: forwardTo,
3666
+ trackingFailed: trackingFailed
3620
3667
  }
3621
3668
  }, props.children);
3622
3669
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@depay/widgets",
3
3
  "moduleName": "DePayWidgets",
4
- "version": "6.5.5",
4
+ "version": "6.6.0",
5
5
  "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
6
6
  "main": "./dist/umd/index.js",
7
7
  "module": "./dist/esm/index.js",