@pelcro/react-pelcro-js 4.0.0-alpha.107 → 4.0.0-alpha.109

package/dist/index.cjs.js

@@ -3783,7 +3783,8 @@ var labels$X = {
 	summary: "Order summary",
 	total: "Total",
 	subtotal: "Subtotal",
-	shippingRate: "Shipping Rate"
+	shippingRate: "Shipping Rate",
+	tax: "Tax"
 };
 var shop_en = {
 	buttons: buttons$h,
@@ -9552,7 +9553,7 @@ const trackSubscriptionOnGA = () => {
     couponCode
   } = usePelcro.getStore();
 
-  /*   
+  /*
   getting the latest subscription id from invoices instead of subscriptions
   to handle gifted subs which are not added to subs list
   */
@@ -9763,6 +9764,10 @@ const refreshUser = () => {
     }
   });
 };
+const isStagingEnvironment = () => {
+  var _window$Pelcro$enviro2;
+  return (_window$Pelcro$enviro2 = window.Pelcro.environment) === null || _window$Pelcro$enviro2 === void 0 ? void 0 : _window$Pelcro$enviro2.domain.includes("staging");
+};
 
 const resources = {
   en: {
@@ -25978,6 +25983,9 @@ const ImageSelect = ({
     components: {
       Option: customOption,
       SingleValue: customSingleValue
+    },
+    classNames: {
+      menuList: () => "menu-list"
     }
   }, props, {
     menuPortalTarget: document.body,
@@ -38724,28 +38732,56 @@ const OrderCreateSummary = ({
   } = useTranslation("shop");
   const [items, setItems] = React.useState([]);
   const [paymentInfo, setPaymentInfo] = React.useState({});
+  const {
+    selectedAddressId
+  } = usePelcro();
+  async function fetchOrderSummary(orderSummaryPaylod) {
+    try {
+      const domain = isStagingEnvironment() ? "https://staging.pelcro.com" : "https://www.pelcro.com";
+      const url = `${domain}/api/v1/sdk/ecommerce/order-summary`;
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${window.Pelcro.user.read().auth_token}`
+        },
+        body: JSON.stringify(orderSummaryPaylod)
+      });
+      if (response.ok) {
+        var _data$data;
+        const data = await response.json();
+        console.log("data", data);
+        setPaymentInfo({
+          total: data === null || data === void 0 ? void 0 : data.data.total,
+          shippingRate: data === null || data === void 0 ? void 0 : data.data.shipping_rate,
+          subtotal: data === null || data === void 0 ? void 0 : data.data.subtotal,
+          taxes: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.tax_rate
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
   React.useEffect(() => {
+    var _window$Pelcro$site$r;
     if (!(order !== null && order !== void 0 && order.length) || paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.total) {
       return;
     }
-    window.Pelcro.ecommerce.order.createSummary({
+    const orderSummaryPaylod = {
       items: order.map(item => {
         return {
           sku_id: item.id,
           quantity: item.quantity
         };
       })
-    }, (err, res) => {
-      if (err) {
-        console.error(err);
-      }
-      setPaymentInfo({
-        total: res.data.total,
-        shippingRate: res.data.shipping_rate,
-        subtotal: res.data.subtotal
-      });
-    });
-  }, [order, paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total]);
+    };
+    if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.taxes_enabled) {
+      orderSummaryPaylod.address_id = selectedAddressId;
+    }
+    orderSummaryPaylod.site_id = window.Pelcro.siteid;
+    console.log("orderSummaryPaylod", orderSummaryPaylod);
+    fetchOrderSummary(orderSummaryPaylod);
+  }, [order, paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total, selectedAddressId]);
   React.useEffect(() => {
     const isQuickPurchase = !Array.isArray(order);
     if (isQuickPurchase) {
@@ -38763,9 +38799,16 @@ const OrderCreateSummary = ({
     var _order$2;
     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());
   }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.shippingRate, order]);
-  const total = React.useMemo(() => {
+  const taxRate = React.useMemo(() => {
     var _order$3;
-    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());
+    if (!(paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.taxes)) {
+      return "0";
+    }
+    return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.taxes) || 0, order === null || order === void 0 ? void 0 : (_order$3 = order[0]) === null || _order$3 === void 0 ? void 0 : _order$3.currency, getPageOrDefaultLanguage());
+  }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.taxes, order]);
+  const total = React.useMemo(() => {
+    var _order$4;
+    return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total) || 0, order === null || order === void 0 ? void 0 : (_order$4 = order[0]) === null || _order$4 === void 0 ? void 0 : _order$4.currency, getPageOrDefaultLanguage());
   }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total, order]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-px-8 md:plc-px-0"
@@ -38815,7 +38858,13 @@ const OrderCreateSummary = ({
     className: "plc-text-base"
   }, t("labels.shippingRate")), /*#__PURE__*/React__default['default'].createElement("dd", {
     className: "plc-text-base"
-  }, shippingRate)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, shippingRate)), taxRate !== "0" && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-justify-between plc-text-gray-900"
+  }, /*#__PURE__*/React__default['default'].createElement("dt", {
+    className: "plc-text-base"
+  }, t("labels.tax")), /*#__PURE__*/React__default['default'].createElement("dd", {
+    className: "plc-text-base"
+  }, taxRate)), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
   }, /*#__PURE__*/React__default['default'].createElement("dt", {
     className: "plc-text-base"
@@ -40098,7 +40147,7 @@ BillingAddressSelectModal.viewId = "billing-address-select";
 const moveDefaultPaymentMethodToStart = paymentMethods => {
   const defaultPaymentMethod = getDefaultPaymentMethod(paymentMethods);
   const paymentMethodsWithoutDefault = paymentMethods.filter(paymentMethod => paymentMethod.id !== defaultPaymentMethod.id);
-  if (defaultPaymentMethod.status !== "chargeable") {
+  if ((defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.status) !== "chargeable") {
     return paymentMethodsWithoutDefault;
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];

package/dist/index.esm.js

@@ -3753,7 +3753,8 @@ var labels$X = {
 	summary: "Order summary",
 	total: "Total",
 	subtotal: "Subtotal",
-	shippingRate: "Shipping Rate"
+	shippingRate: "Shipping Rate",
+	tax: "Tax"
 };
 var shop_en = {
 	buttons: buttons$h,
@@ -9522,7 +9523,7 @@ const trackSubscriptionOnGA = () => {
     couponCode
   } = usePelcro.getStore();
 
-  /*   
+  /*
   getting the latest subscription id from invoices instead of subscriptions
   to handle gifted subs which are not added to subs list
   */
@@ -9733,6 +9734,10 @@ const refreshUser = () => {
     }
   });
 };
+const isStagingEnvironment = () => {
+  var _window$Pelcro$enviro2;
+  return (_window$Pelcro$enviro2 = window.Pelcro.environment) === null || _window$Pelcro$enviro2 === void 0 ? void 0 : _window$Pelcro$enviro2.domain.includes("staging");
+};
 
 const resources = {
   en: {
@@ -25948,6 +25953,9 @@ const ImageSelect = ({
     components: {
       Option: customOption,
       SingleValue: customSingleValue
+    },
+    classNames: {
+      menuList: () => "menu-list"
     }
   }, props, {
     menuPortalTarget: document.body,
@@ -38694,28 +38702,56 @@ const OrderCreateSummary = ({
   } = useTranslation("shop");
   const [items, setItems] = useState([]);
   const [paymentInfo, setPaymentInfo] = useState({});
+  const {
+    selectedAddressId
+  } = usePelcro();
+  async function fetchOrderSummary(orderSummaryPaylod) {
+    try {
+      const domain = isStagingEnvironment() ? "https://staging.pelcro.com" : "https://www.pelcro.com";
+      const url = `${domain}/api/v1/sdk/ecommerce/order-summary`;
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${window.Pelcro.user.read().auth_token}`
+        },
+        body: JSON.stringify(orderSummaryPaylod)
+      });
+      if (response.ok) {
+        var _data$data;
+        const data = await response.json();
+        console.log("data", data);
+        setPaymentInfo({
+          total: data === null || data === void 0 ? void 0 : data.data.total,
+          shippingRate: data === null || data === void 0 ? void 0 : data.data.shipping_rate,
+          subtotal: data === null || data === void 0 ? void 0 : data.data.subtotal,
+          taxes: data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.tax_rate
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
   useEffect(() => {
+    var _window$Pelcro$site$r;
     if (!(order !== null && order !== void 0 && order.length) || paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.total) {
       return;
     }
-    window.Pelcro.ecommerce.order.createSummary({
+    const orderSummaryPaylod = {
       items: order.map(item => {
         return {
           sku_id: item.id,
           quantity: item.quantity
         };
       })
-    }, (err, res) => {
-      if (err) {
-        console.error(err);
-      }
-      setPaymentInfo({
-        total: res.data.total,
-        shippingRate: res.data.shipping_rate,
-        subtotal: res.data.subtotal
-      });
-    });
-  }, [order, paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total]);
+    };
+    if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.taxes_enabled) {
+      orderSummaryPaylod.address_id = selectedAddressId;
+    }
+    orderSummaryPaylod.site_id = window.Pelcro.siteid;
+    console.log("orderSummaryPaylod", orderSummaryPaylod);
+    fetchOrderSummary(orderSummaryPaylod);
+  }, [order, paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total, selectedAddressId]);
   useEffect(() => {
     const isQuickPurchase = !Array.isArray(order);
     if (isQuickPurchase) {
@@ -38733,9 +38769,16 @@ const OrderCreateSummary = ({
     var _order$2;
     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());
   }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.shippingRate, order]);
-  const total = useMemo(() => {
+  const taxRate = useMemo(() => {
     var _order$3;
-    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());
+    if (!(paymentInfo !== null && paymentInfo !== void 0 && paymentInfo.taxes)) {
+      return "0";
+    }
+    return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.taxes) || 0, order === null || order === void 0 ? void 0 : (_order$3 = order[0]) === null || _order$3 === void 0 ? void 0 : _order$3.currency, getPageOrDefaultLanguage());
+  }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.taxes, order]);
+  const total = useMemo(() => {
+    var _order$4;
+    return getFormattedPriceByLocal((paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total) || 0, order === null || order === void 0 ? void 0 : (_order$4 = order[0]) === null || _order$4 === void 0 ? void 0 : _order$4.currency, getPageOrDefaultLanguage());
   }, [paymentInfo === null || paymentInfo === void 0 ? void 0 : paymentInfo.total, order]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-px-8 md:plc-px-0"
@@ -38785,7 +38828,13 @@ const OrderCreateSummary = ({
     className: "plc-text-base"
   }, t("labels.shippingRate")), /*#__PURE__*/React__default.createElement("dd", {
     className: "plc-text-base"
-  }, shippingRate)), /*#__PURE__*/React__default.createElement("div", {
+  }, shippingRate)), taxRate !== "0" && /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-justify-between plc-text-gray-900"
+  }, /*#__PURE__*/React__default.createElement("dt", {
+    className: "plc-text-base"
+  }, t("labels.tax")), /*#__PURE__*/React__default.createElement("dd", {
+    className: "plc-text-base"
+  }, taxRate)), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
   }, /*#__PURE__*/React__default.createElement("dt", {
     className: "plc-text-base"
@@ -40068,7 +40117,7 @@ BillingAddressSelectModal.viewId = "billing-address-select";
 const moveDefaultPaymentMethodToStart = paymentMethods => {
   const defaultPaymentMethod = getDefaultPaymentMethod(paymentMethods);
   const paymentMethodsWithoutDefault = paymentMethods.filter(paymentMethod => paymentMethod.id !== defaultPaymentMethod.id);
-  if (defaultPaymentMethod.status !== "chargeable") {
+  if ((defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.status) !== "chargeable") {
     return paymentMethodsWithoutDefault;
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];

package/dist/pelcro.css

@@ -1959,6 +1959,14 @@ Add the correct display in Chrome and Safari.
   align-items: center;
 }
 
+.menu-list {
+  font-family: "Lato", system-ui, -apple-system,
+    /* Firefox supports this but not yet `system-ui` */
+    "Segoe UI",
+    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji";
+}
+
 /* 
 styling is copied from react-easy-crop/react-easy-crop.css 
 in order to scope selectors under pelcro-root
@@ -4138,6 +4146,14 @@ apple-pay-button {
   align-items: center;
 }
 
+.menu-list {
+  font-family: "Lato", system-ui, -apple-system,
+    /* Firefox supports this but not yet `system-ui` */
+    "Segoe UI",
+    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji";
+}
+
 /* purgecss end ignore */
 
 /* purgecss start ignore */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.107",
+  "version": "4.0.0-alpha.109",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",