@pelcro/react-pelcro-js 4.0.0-alpha.84 → 4.0.0-alpha.86

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.
Files changed (3) hide show
  1. package/dist/index.cjs.js +68 -13
  2. package/dist/index.esm.js +68 -13
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -28460,10 +28460,11 @@ const SubscriptionCreateSummary = () => {
28460
28460
  const autoRenewed = plan.auto_renew;
28461
28461
  const {
28462
28462
  interval_translated: intervalTranslated,
28463
- interval_count: intervalCount
28463
+ interval_count: intervalCount,
28464
+ interval
28464
28465
  } = plan;
28465
28466
  const intervalText = t("labels.interval", {
28466
- interval: intervalTranslated,
28467
+ interval: intervalTranslated !== null && intervalTranslated !== void 0 ? intervalTranslated : interval,
28467
28468
  count: intervalCount
28468
28469
  });
28469
28470
  const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -33049,9 +33050,16 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
33049
33050
  const OrderCreateSummary = ({
33050
33051
  order
33051
33052
  }) => {
33052
- var _calcAndFormatItemsTo, _order$;
33053
+ const [items, setItems] = React.useState([]);
33054
+ const [orderTotal, setOrderTotal] = React.useState("");
33055
+ React.useEffect(() => {
33056
+ if ((order === null || order === void 0 ? void 0 : order.length) > 0) {
33057
+ var _calcAndFormatItemsTo, _order$;
33053
33058
 
33054
- const items = (order === null || order === void 0 ? void 0 : order.length) > 0 ? order : [];
33059
+ setItems(order);
33060
+ setOrderTotal((_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage()));
33061
+ }
33062
+ }, []);
33055
33063
  return /*#__PURE__*/React__default['default'].createElement("div", {
33056
33064
  className: "plc-px-8 md:plc-px-0"
33057
33065
  }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -33094,7 +33102,7 @@ const OrderCreateSummary = ({
33094
33102
  className: "plc-text-base"
33095
33103
  }, "Total"), /*#__PURE__*/React__default['default'].createElement("dd", {
33096
33104
  className: "plc-text-base"
33097
- }, order && ((_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage()))))));
33105
+ }, orderTotal))));
33098
33106
  };
33099
33107
 
33100
33108
  const OrderCreateView = props => {
@@ -33164,7 +33172,8 @@ const OrderCreateModal = ({
33164
33172
  ...otherProps
33165
33173
  }) => {
33166
33174
  const {
33167
- switchView
33175
+ switchView,
33176
+ order
33168
33177
  } = usePelcro();
33169
33178
  const {
33170
33179
  t
@@ -33177,6 +33186,39 @@ const OrderCreateModal = ({
33177
33186
  return switchView("order-confirm");
33178
33187
  };
33179
33188
 
33189
+ const showBackButton = Boolean(order);
33190
+
33191
+ const userHasPaymentMethod = () => {
33192
+ var _window$Pelcro$user$r, _window$Pelcro$user$r2;
33193
+
33194
+ const sources = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.sources) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
33195
+ return sources.length > 0;
33196
+ };
33197
+
33198
+ const userHasAddress = () => {
33199
+ var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
33200
+
33201
+ const addresses = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.addresses) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : [];
33202
+ return addresses.length > 0;
33203
+ };
33204
+
33205
+ const isUserHasPaymentMethod = userHasPaymentMethod();
33206
+ const isUserHasAddress = userHasAddress();
33207
+
33208
+ const goBack = () => {
33209
+ if (order && isUserHasPaymentMethod) {
33210
+ return switchView("payment-method-select");
33211
+ }
33212
+
33213
+ if (order && isUserHasAddress) {
33214
+ return switchView("address-select");
33215
+ }
33216
+
33217
+ if (order) {
33218
+ return switchView("cart");
33219
+ }
33220
+ };
33221
+
33180
33222
  return /*#__PURE__*/React__default['default'].createElement(Modal, {
33181
33223
  id: "pelcro-order-create-modal",
33182
33224
  className: "plc-max-w-7xl",
@@ -33185,8 +33227,12 @@ const OrderCreateModal = ({
33185
33227
  onCloseModal: onClose
33186
33228
  }, /*#__PURE__*/React__default['default'].createElement("div", {
33187
33229
  className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
33188
- }, /*#__PURE__*/React__default['default'].createElement("h4", {
33189
- className: "plc-text-xl plc-font-bold "
33230
+ }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
33231
+ type: "button",
33232
+ onClick: goBack,
33233
+ className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
33234
+ }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
33235
+ className: "plc-text-xl plc-font-bold plc-text-center"
33190
33236
  }, t("labels.checkout.title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(OrderCreateView, Object.assign({}, otherProps, {
33191
33237
  onSuccess: onSuccess
33192
33238
  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -34233,7 +34279,8 @@ const AddressSelectModal = ({
34233
34279
  resetView,
34234
34280
  product,
34235
34281
  plan,
34236
- giftRecipient
34282
+ giftRecipient,
34283
+ order
34237
34284
  } = usePelcro();
34238
34285
  const {
34239
34286
  t
@@ -34265,11 +34312,15 @@ const AddressSelectModal = ({
34265
34312
  resetView();
34266
34313
  };
34267
34314
 
34268
- const showBackButton = Boolean(product && plan && !giftRecipient);
34315
+ const showBackButton = Boolean(product && plan && !giftRecipient || order);
34269
34316
 
34270
34317
  const goBack = () => {
34271
34318
  if (product && plan) {
34272
- switchView("plan-select");
34319
+ return switchView("plan-select");
34320
+ }
34321
+
34322
+ if (order) {
34323
+ return switchView("cart");
34273
34324
  }
34274
34325
  };
34275
34326
 
@@ -34657,7 +34708,7 @@ const PaymentMethodSelectModal = ({
34657
34708
  switchToCheckoutForm();
34658
34709
  };
34659
34710
 
34660
- const showBackButton = Boolean(product && plan && !giftRecipient);
34711
+ const showBackButton = Boolean(product && plan && !giftRecipient || order);
34661
34712
 
34662
34713
  const userHasAddress = () => {
34663
34714
  var _window$Pelcro$user$r, _window$Pelcro$user$r2;
@@ -34669,13 +34720,17 @@ const PaymentMethodSelectModal = ({
34669
34720
  const isUserHasAddress = userHasAddress();
34670
34721
 
34671
34722
  const goBack = () => {
34672
- if (product && plan && product.address_required && isUserHasAddress) {
34723
+ if ((product && plan && product.address_required || order) && isUserHasAddress) {
34673
34724
  return switchView("address-select");
34674
34725
  }
34675
34726
 
34676
34727
  if (product && plan) {
34677
34728
  return switchView("plan-select");
34678
34729
  }
34730
+
34731
+ if (order) {
34732
+ return switchView("cart");
34733
+ }
34679
34734
  };
34680
34735
 
34681
34736
  return /*#__PURE__*/React__default['default'].createElement(Modal, {
package/dist/index.esm.js CHANGED
@@ -28430,10 +28430,11 @@ const SubscriptionCreateSummary = () => {
28430
28430
  const autoRenewed = plan.auto_renew;
28431
28431
  const {
28432
28432
  interval_translated: intervalTranslated,
28433
- interval_count: intervalCount
28433
+ interval_count: intervalCount,
28434
+ interval
28434
28435
  } = plan;
28435
28436
  const intervalText = t("labels.interval", {
28436
- interval: intervalTranslated,
28437
+ interval: intervalTranslated !== null && intervalTranslated !== void 0 ? intervalTranslated : interval,
28437
28438
  count: intervalCount
28438
28439
  });
28439
28440
  const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -33019,9 +33020,16 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
33019
33020
  const OrderCreateSummary = ({
33020
33021
  order
33021
33022
  }) => {
33022
- var _calcAndFormatItemsTo, _order$;
33023
+ const [items, setItems] = useState([]);
33024
+ const [orderTotal, setOrderTotal] = useState("");
33025
+ useEffect(() => {
33026
+ if ((order === null || order === void 0 ? void 0 : order.length) > 0) {
33027
+ var _calcAndFormatItemsTo, _order$;
33023
33028
 
33024
- const items = (order === null || order === void 0 ? void 0 : order.length) > 0 ? order : [];
33029
+ setItems(order);
33030
+ setOrderTotal((_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage()));
33031
+ }
33032
+ }, []);
33025
33033
  return /*#__PURE__*/React__default.createElement("div", {
33026
33034
  className: "plc-px-8 md:plc-px-0"
33027
33035
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -33064,7 +33072,7 @@ const OrderCreateSummary = ({
33064
33072
  className: "plc-text-base"
33065
33073
  }, "Total"), /*#__PURE__*/React__default.createElement("dd", {
33066
33074
  className: "plc-text-base"
33067
- }, order && ((_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage()))))));
33075
+ }, orderTotal))));
33068
33076
  };
33069
33077
 
33070
33078
  const OrderCreateView = props => {
@@ -33134,7 +33142,8 @@ const OrderCreateModal = ({
33134
33142
  ...otherProps
33135
33143
  }) => {
33136
33144
  const {
33137
- switchView
33145
+ switchView,
33146
+ order
33138
33147
  } = usePelcro();
33139
33148
  const {
33140
33149
  t
@@ -33147,6 +33156,39 @@ const OrderCreateModal = ({
33147
33156
  return switchView("order-confirm");
33148
33157
  };
33149
33158
 
33159
+ const showBackButton = Boolean(order);
33160
+
33161
+ const userHasPaymentMethod = () => {
33162
+ var _window$Pelcro$user$r, _window$Pelcro$user$r2;
33163
+
33164
+ const sources = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.sources) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
33165
+ return sources.length > 0;
33166
+ };
33167
+
33168
+ const userHasAddress = () => {
33169
+ var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
33170
+
33171
+ const addresses = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.addresses) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : [];
33172
+ return addresses.length > 0;
33173
+ };
33174
+
33175
+ const isUserHasPaymentMethod = userHasPaymentMethod();
33176
+ const isUserHasAddress = userHasAddress();
33177
+
33178
+ const goBack = () => {
33179
+ if (order && isUserHasPaymentMethod) {
33180
+ return switchView("payment-method-select");
33181
+ }
33182
+
33183
+ if (order && isUserHasAddress) {
33184
+ return switchView("address-select");
33185
+ }
33186
+
33187
+ if (order) {
33188
+ return switchView("cart");
33189
+ }
33190
+ };
33191
+
33150
33192
  return /*#__PURE__*/React__default.createElement(Modal, {
33151
33193
  id: "pelcro-order-create-modal",
33152
33194
  className: "plc-max-w-7xl",
@@ -33155,8 +33197,12 @@ const OrderCreateModal = ({
33155
33197
  onCloseModal: onClose
33156
33198
  }, /*#__PURE__*/React__default.createElement("div", {
33157
33199
  className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
33158
- }, /*#__PURE__*/React__default.createElement("h4", {
33159
- className: "plc-text-xl plc-font-bold "
33200
+ }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
33201
+ type: "button",
33202
+ onClick: goBack,
33203
+ className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
33204
+ }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
33205
+ className: "plc-text-xl plc-font-bold plc-text-center"
33160
33206
  }, t("labels.checkout.title")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(OrderCreateView, Object.assign({}, otherProps, {
33161
33207
  onSuccess: onSuccess
33162
33208
  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null));
@@ -34203,7 +34249,8 @@ const AddressSelectModal = ({
34203
34249
  resetView,
34204
34250
  product,
34205
34251
  plan,
34206
- giftRecipient
34252
+ giftRecipient,
34253
+ order
34207
34254
  } = usePelcro();
34208
34255
  const {
34209
34256
  t
@@ -34235,11 +34282,15 @@ const AddressSelectModal = ({
34235
34282
  resetView();
34236
34283
  };
34237
34284
 
34238
- const showBackButton = Boolean(product && plan && !giftRecipient);
34285
+ const showBackButton = Boolean(product && plan && !giftRecipient || order);
34239
34286
 
34240
34287
  const goBack = () => {
34241
34288
  if (product && plan) {
34242
- switchView("plan-select");
34289
+ return switchView("plan-select");
34290
+ }
34291
+
34292
+ if (order) {
34293
+ return switchView("cart");
34243
34294
  }
34244
34295
  };
34245
34296
 
@@ -34627,7 +34678,7 @@ const PaymentMethodSelectModal = ({
34627
34678
  switchToCheckoutForm();
34628
34679
  };
34629
34680
 
34630
- const showBackButton = Boolean(product && plan && !giftRecipient);
34681
+ const showBackButton = Boolean(product && plan && !giftRecipient || order);
34631
34682
 
34632
34683
  const userHasAddress = () => {
34633
34684
  var _window$Pelcro$user$r, _window$Pelcro$user$r2;
@@ -34639,13 +34690,17 @@ const PaymentMethodSelectModal = ({
34639
34690
  const isUserHasAddress = userHasAddress();
34640
34691
 
34641
34692
  const goBack = () => {
34642
- if (product && plan && product.address_required && isUserHasAddress) {
34693
+ if ((product && plan && product.address_required || order) && isUserHasAddress) {
34643
34694
  return switchView("address-select");
34644
34695
  }
34645
34696
 
34646
34697
  if (product && plan) {
34647
34698
  return switchView("plan-select");
34648
34699
  }
34700
+
34701
+ if (order) {
34702
+ return switchView("cart");
34703
+ }
34649
34704
  };
34650
34705
 
34651
34706
  return /*#__PURE__*/React__default.createElement(Modal, {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pelcro/react-pelcro-js",
3
3
  "description": "Pelcro's React UI Elements",
4
- "version": "4.0.0-alpha.84",
4
+ "version": "4.0.0-alpha.86",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",