@pelcro/react-pelcro-js 4.0.0-alpha.100 → 4.0.0-alpha.102

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 +69 -13
  2. package/dist/index.esm.js +69 -13
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -3781,7 +3781,9 @@ var messages$Y = {
3781
3781
  };
3782
3782
  var labels$X = {
3783
3783
  summary: "Order summary",
3784
- total: "total"
3784
+ total: "Total",
3785
+ subtotal: "Subtotal",
3786
+ shippingRate: "Shipping Rate"
3785
3787
  };
3786
3788
  var shop_en = {
3787
3789
  buttons: buttons$h,
@@ -38697,21 +38699,54 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
38697
38699
  const OrderCreateSummary = ({
38698
38700
  order
38699
38701
  }) => {
38702
+ const {
38703
+ t
38704
+ } = useTranslation("shop");
38700
38705
  const [items, setItems] = React.useState([]);
38701
- const [orderTotal, setOrderTotal] = React.useState("");
38706
+ const [paymentInfo, setPaymentInfo] = React.useState({});
38707
+ React.useEffect(() => {
38708
+ if (!(order !== null && order !== void 0 && order.length) || paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.total) {
38709
+ return;
38710
+ }
38711
+ window.Pelcro.ecommerce.order.createSummary({
38712
+ items: order.map(item => {
38713
+ return {
38714
+ sku_id: item.id,
38715
+ quantity: item.quantity
38716
+ };
38717
+ })
38718
+ }, (err, res) => {
38719
+ if (err) {
38720
+ console.error(err);
38721
+ }
38722
+ setPaymentInfo({
38723
+ total: res.data.total,
38724
+ shippingRate: res.data.shipping_rate,
38725
+ subtotal: res.data.subtotal
38726
+ });
38727
+ });
38728
+ }, [order, paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total]);
38702
38729
  React.useEffect(() => {
38703
38730
  const isQuickPurchase = !Array.isArray(order);
38704
38731
  if (isQuickPurchase) {
38705
- var _calcAndFormatItemsTo, _order$;
38706
38732
  setItems([order]);
38707
- 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()));
38708
38733
  }
38709
38734
  if ((order === null || order === void 0 ? void 0 : order.length) > 0) {
38710
- var _calcAndFormatItemsTo2, _order$2;
38711
38735
  setItems(order);
38712
- setOrderTotal((_calcAndFormatItemsTo2 = calcAndFormatItemsTotal(order, (_order$2 = order[0]) === null || _order$2 === void 0 ? void 0 : _order$2.currency)) !== null && _calcAndFormatItemsTo2 !== void 0 ? _calcAndFormatItemsTo2 : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage()));
38713
38736
  }
38714
- }, []);
38737
+ }, [order]);
38738
+ const subtotal = React.useMemo(() => {
38739
+ var _order$;
38740
+ return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.subtotal) || 0, order === null || order === void 0 ? void 0 : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency, getPageOrDefaultLanguage());
38741
+ }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.subtotal, order]);
38742
+ const shippingRate = React.useMemo(() => {
38743
+ var _order$2;
38744
+ return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.shippingRate) || 0, order === null || order === void 0 ? void 0 : (_order$2 = order[0]) === null || _order$2 === void 0 ? void 0 : _order$2.currency, getPageOrDefaultLanguage());
38745
+ }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.shippingRate, order]);
38746
+ const total = React.useMemo(() => {
38747
+ var _order$3;
38748
+ return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total) || 0, order === null || order === void 0 ? void 0 : (_order$3 = order[0]) === null || _order$3 === void 0 ? void 0 : _order$3.currency, getPageOrDefaultLanguage());
38749
+ }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total, order]);
38715
38750
  return /*#__PURE__*/React__default['default'].createElement("div", {
38716
38751
  className: "plc-px-8 md:plc-px-0"
38717
38752
  }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -38746,15 +38781,30 @@ const OrderCreateSummary = ({
38746
38781
  }, /*#__PURE__*/React__default['default'].createElement("p", {
38747
38782
  className: "plc-text-gray-900"
38748
38783
  }, item && item.currency && calcAndFormatItemsTotal([item], item === null || item === void 0 ? void 0 : item.currency))))));
38749
- })))), /*#__PURE__*/React__default['default'].createElement("dl", {
38784
+ })))), paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.total ? /*#__PURE__*/React__default['default'].createElement("dl", {
38750
38785
  className: "plc-mt-6 plc-space-y-6 plc-text-sm plc-font-medium plc-text-gray-500"
38751
38786
  }, /*#__PURE__*/React__default['default'].createElement("div", {
38752
38787
  className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
38753
38788
  }, /*#__PURE__*/React__default['default'].createElement("dt", {
38754
38789
  className: "plc-text-base"
38755
- }, "Total"), /*#__PURE__*/React__default['default'].createElement("dd", {
38790
+ }, t("labels.subtotal")), /*#__PURE__*/React__default['default'].createElement("dd", {
38791
+ className: "plc-text-base"
38792
+ }, subtotal)), /*#__PURE__*/React__default['default'].createElement("div", {
38793
+ className: "plc-flex plc-justify-between plc-text-gray-900"
38794
+ }, /*#__PURE__*/React__default['default'].createElement("dt", {
38795
+ className: "plc-text-base"
38796
+ }, t("labels.shippingRate")), /*#__PURE__*/React__default['default'].createElement("dd", {
38797
+ className: "plc-text-base"
38798
+ }, shippingRate)), /*#__PURE__*/React__default['default'].createElement("div", {
38799
+ className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
38800
+ }, /*#__PURE__*/React__default['default'].createElement("dt", {
38801
+ className: "plc-text-base"
38802
+ }, t("labels.total")), /*#__PURE__*/React__default['default'].createElement("dd", {
38756
38803
  className: "plc-text-base"
38757
- }, orderTotal))));
38804
+ }, total))) : /*#__PURE__*/React__default['default'].createElement(Loader, {
38805
+ width: 60,
38806
+ height: 100
38807
+ }));
38758
38808
  };
38759
38809
 
38760
38810
  const OrderCreateView = props => {
@@ -38933,10 +38983,16 @@ const OrderConfirmModal = props => {
38933
38983
  className: "plc-w-1/5 plc-text-center pelcro-summary-product-price"
38934
38984
  }, calcAndFormatItemsTotal([item], latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency)));
38935
38985
  }), /*#__PURE__*/React__default['default'].createElement("div", {
38936
- className: "plc-flex plc-items-center plc-justify-end plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-summary-total-wrapper"
38937
- }, /*#__PURE__*/React__default['default'].createElement("p", {
38986
+ className: "plc-flex plc-items-center plc-justify-between plc-pt-2 plc-mt-2 plc-font-bold"
38987
+ }, /*#__PURE__*/React__default['default'].createElement("dt", {
38938
38988
  className: "plc-mr-1 pelcro-summary-total-text"
38939
- }, t("labels.total")), /*#__PURE__*/React__default['default'].createElement("p", {
38989
+ }, t("labels.shippingRate")), /*#__PURE__*/React__default['default'].createElement("dd", {
38990
+ className: "pelcro-summary-total"
38991
+ }, getFormattedPriceByLocal(latestOrder.shipping_rate, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage()))), /*#__PURE__*/React__default['default'].createElement("div", {
38992
+ className: "plc-flex plc-items-center plc-justify-between plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-summary-total-wrapper"
38993
+ }, /*#__PURE__*/React__default['default'].createElement("dt", {
38994
+ className: "plc-mr-1 pelcro-summary-total-text"
38995
+ }, t("labels.total")), /*#__PURE__*/React__default['default'].createElement("dd", {
38940
38996
  className: "pelcro-summary-total"
38941
38997
  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("div", {
38942
38998
  className: "plc-flex plc-justify-center plc-mt-6"
package/dist/index.esm.js CHANGED
@@ -3751,7 +3751,9 @@ var messages$Y = {
3751
3751
  };
3752
3752
  var labels$X = {
3753
3753
  summary: "Order summary",
3754
- total: "total"
3754
+ total: "Total",
3755
+ subtotal: "Subtotal",
3756
+ shippingRate: "Shipping Rate"
3755
3757
  };
3756
3758
  var shop_en = {
3757
3759
  buttons: buttons$h,
@@ -38667,21 +38669,54 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
38667
38669
  const OrderCreateSummary = ({
38668
38670
  order
38669
38671
  }) => {
38672
+ const {
38673
+ t
38674
+ } = useTranslation("shop");
38670
38675
  const [items, setItems] = useState([]);
38671
- const [orderTotal, setOrderTotal] = useState("");
38676
+ const [paymentInfo, setPaymentInfo] = useState({});
38677
+ useEffect(() => {
38678
+ if (!(order !== null && order !== void 0 && order.length) || paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.total) {
38679
+ return;
38680
+ }
38681
+ window.Pelcro.ecommerce.order.createSummary({
38682
+ items: order.map(item => {
38683
+ return {
38684
+ sku_id: item.id,
38685
+ quantity: item.quantity
38686
+ };
38687
+ })
38688
+ }, (err, res) => {
38689
+ if (err) {
38690
+ console.error(err);
38691
+ }
38692
+ setPaymentInfo({
38693
+ total: res.data.total,
38694
+ shippingRate: res.data.shipping_rate,
38695
+ subtotal: res.data.subtotal
38696
+ });
38697
+ });
38698
+ }, [order, paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total]);
38672
38699
  useEffect(() => {
38673
38700
  const isQuickPurchase = !Array.isArray(order);
38674
38701
  if (isQuickPurchase) {
38675
- var _calcAndFormatItemsTo, _order$;
38676
38702
  setItems([order]);
38677
- 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()));
38678
38703
  }
38679
38704
  if ((order === null || order === void 0 ? void 0 : order.length) > 0) {
38680
- var _calcAndFormatItemsTo2, _order$2;
38681
38705
  setItems(order);
38682
- setOrderTotal((_calcAndFormatItemsTo2 = calcAndFormatItemsTotal(order, (_order$2 = order[0]) === null || _order$2 === void 0 ? void 0 : _order$2.currency)) !== null && _calcAndFormatItemsTo2 !== void 0 ? _calcAndFormatItemsTo2 : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage()));
38683
38706
  }
38684
- }, []);
38707
+ }, [order]);
38708
+ const subtotal = useMemo(() => {
38709
+ var _order$;
38710
+ return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.subtotal) || 0, order === null || order === void 0 ? void 0 : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency, getPageOrDefaultLanguage());
38711
+ }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.subtotal, order]);
38712
+ const shippingRate = useMemo(() => {
38713
+ var _order$2;
38714
+ return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.shippingRate) || 0, order === null || order === void 0 ? void 0 : (_order$2 = order[0]) === null || _order$2 === void 0 ? void 0 : _order$2.currency, getPageOrDefaultLanguage());
38715
+ }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.shippingRate, order]);
38716
+ const total = useMemo(() => {
38717
+ var _order$3;
38718
+ return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total) || 0, order === null || order === void 0 ? void 0 : (_order$3 = order[0]) === null || _order$3 === void 0 ? void 0 : _order$3.currency, getPageOrDefaultLanguage());
38719
+ }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total, order]);
38685
38720
  return /*#__PURE__*/React__default.createElement("div", {
38686
38721
  className: "plc-px-8 md:plc-px-0"
38687
38722
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -38716,15 +38751,30 @@ const OrderCreateSummary = ({
38716
38751
  }, /*#__PURE__*/React__default.createElement("p", {
38717
38752
  className: "plc-text-gray-900"
38718
38753
  }, item && item.currency && calcAndFormatItemsTotal([item], item === null || item === void 0 ? void 0 : item.currency))))));
38719
- })))), /*#__PURE__*/React__default.createElement("dl", {
38754
+ })))), paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.total ? /*#__PURE__*/React__default.createElement("dl", {
38720
38755
  className: "plc-mt-6 plc-space-y-6 plc-text-sm plc-font-medium plc-text-gray-500"
38721
38756
  }, /*#__PURE__*/React__default.createElement("div", {
38722
38757
  className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
38723
38758
  }, /*#__PURE__*/React__default.createElement("dt", {
38724
38759
  className: "plc-text-base"
38725
- }, "Total"), /*#__PURE__*/React__default.createElement("dd", {
38760
+ }, t("labels.subtotal")), /*#__PURE__*/React__default.createElement("dd", {
38761
+ className: "plc-text-base"
38762
+ }, subtotal)), /*#__PURE__*/React__default.createElement("div", {
38763
+ className: "plc-flex plc-justify-between plc-text-gray-900"
38764
+ }, /*#__PURE__*/React__default.createElement("dt", {
38765
+ className: "plc-text-base"
38766
+ }, t("labels.shippingRate")), /*#__PURE__*/React__default.createElement("dd", {
38767
+ className: "plc-text-base"
38768
+ }, shippingRate)), /*#__PURE__*/React__default.createElement("div", {
38769
+ className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
38770
+ }, /*#__PURE__*/React__default.createElement("dt", {
38771
+ className: "plc-text-base"
38772
+ }, t("labels.total")), /*#__PURE__*/React__default.createElement("dd", {
38726
38773
  className: "plc-text-base"
38727
- }, orderTotal))));
38774
+ }, total))) : /*#__PURE__*/React__default.createElement(Loader, {
38775
+ width: 60,
38776
+ height: 100
38777
+ }));
38728
38778
  };
38729
38779
 
38730
38780
  const OrderCreateView = props => {
@@ -38903,10 +38953,16 @@ const OrderConfirmModal = props => {
38903
38953
  className: "plc-w-1/5 plc-text-center pelcro-summary-product-price"
38904
38954
  }, calcAndFormatItemsTotal([item], latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency)));
38905
38955
  }), /*#__PURE__*/React__default.createElement("div", {
38906
- className: "plc-flex plc-items-center plc-justify-end plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-summary-total-wrapper"
38907
- }, /*#__PURE__*/React__default.createElement("p", {
38956
+ className: "plc-flex plc-items-center plc-justify-between plc-pt-2 plc-mt-2 plc-font-bold"
38957
+ }, /*#__PURE__*/React__default.createElement("dt", {
38908
38958
  className: "plc-mr-1 pelcro-summary-total-text"
38909
- }, t("labels.total")), /*#__PURE__*/React__default.createElement("p", {
38959
+ }, t("labels.shippingRate")), /*#__PURE__*/React__default.createElement("dd", {
38960
+ className: "pelcro-summary-total"
38961
+ }, getFormattedPriceByLocal(latestOrder.shipping_rate, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage()))), /*#__PURE__*/React__default.createElement("div", {
38962
+ className: "plc-flex plc-items-center plc-justify-between plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-summary-total-wrapper"
38963
+ }, /*#__PURE__*/React__default.createElement("dt", {
38964
+ className: "plc-mr-1 pelcro-summary-total-text"
38965
+ }, t("labels.total")), /*#__PURE__*/React__default.createElement("dd", {
38910
38966
  className: "pelcro-summary-total"
38911
38967
  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default.createElement("div", {
38912
38968
  className: "plc-flex plc-justify-center plc-mt-6"
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.100",
4
+ "version": "4.0.0-alpha.102",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",