@pelcro/react-pelcro-js 2.7.0-beta.7 → 2.7.0-beta.8

package/dist/index.cjs.js

@@ -3620,7 +3620,8 @@ var labels$h = {
 	"for": "for",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Tax"
+	tax: "+ Tax",
+	removeCoupon: "REMOVE"
 };
 var checkoutForm_en = {
 	messages: messages$j,
@@ -3646,7 +3647,8 @@ var labels$g = {
 	"for": "pour",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Taxe"
+	tax: "+ Taxe",
+	removeCoupon: "RETIRER"
 };
 var checkoutForm_fr = {
 	messages: messages$i,
@@ -9144,6 +9146,7 @@ const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
 const DISABLE_COUPON_BUTTON = "DISABLE_COUPON_BUTTON";
 const APPLY_COUPON_CODE = "APPLY_COUPON_CODE";
+const REMOVE_APPLIED_COUPON = "REMOVE_APPLIED_COUPON";
 const SET_PERCENT_OFF = "SET_PERCENT_OFF";
 const SET_COUPON = "SET_COUPON";
 const SET_COUPON_ERROR = "SET_COUPON_ERROR";
@@ -13017,10 +13020,6 @@ const PaymentMethodContainerWithoutStripe = ({
       });
 
       if (err) {
-        dispatch({
-          type: SET_PERCENT_OFF,
-          payload: ""
-        });
         onFailure(err);
         return dispatch({
           type: SET_COUPON_ERROR,
@@ -13115,6 +13114,54 @@ const PaymentMethodContainerWithoutStripe = ({
 
   const debouncedApplyCouponCode = React.useRef(debounce(onApplyCouponCode, 1000)).current;
 
+  const removeAppliedCoupon = state => {
+    state.couponCode = "";
+    dispatch({
+      type: SET_COUPON_ERROR,
+      payload: ""
+    });
+    dispatch({
+      type: SHOW_COUPON_FIELD,
+      payload: false
+    });
+    dispatch({
+      type: SET_COUPON,
+      payload: null
+    });
+    dispatch({
+      type: SET_PERCENT_OFF,
+      payload: ""
+    });
+    dispatch({
+      type: SET_UPDATED_PRICE,
+      payload: null
+    });
+    dispatch({
+      type: SET_TAX_AMOUNT,
+      payload: null
+    });
+    const {
+      currentPlan
+    } = state;
+
+    if (currentPlan) {
+      var _currentPlan$quantity;
+
+      const quantity = (_currentPlan$quantity = currentPlan.quantity) !== null && _currentPlan$quantity !== void 0 ? _currentPlan$quantity : 1;
+      const price = currentPlan.amount;
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        // set original plan price
+        payload: price * quantity
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      }); // update the new amount with taxes if site has taxes enabled
+
+      updateTotalAmountWithTax();
+    }
+  };
+
   const subscribe = (stripeSource, state, dispatch) => {
     const {
       couponCode
@@ -13732,6 +13779,9 @@ const PaymentMethodContainerWithoutStripe = ({
           disableCouponButton: true
         }, (state, dispatch) => onApplyCouponCode(state, dispatch));
 
+      case REMOVE_APPLIED_COUPON:
+        return lib_5(state, () => removeAppliedCoupon(state));
+
       case SET_COUPON:
         return lib_7({ ...state,
           couponObject: action.payload
@@ -13900,6 +13950,10 @@ const DiscountedPrice = props => {
   var _order$currency, _order$, _plan$quantity;
 
   const {
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    dispatch,
     state: {
       updatedPrice,
       taxAmount,
@@ -13915,12 +13969,22 @@ const DiscountedPrice = props => {
   const discountedPriceWithoutTax = updatedPrice - taxAmount;
   const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
+  const onCouponRemove = () => {
+    dispatch({
+      type: REMOVE_APPLIED_COUPON
+    });
+  };
+
   if (percentOff) {
     return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
-      className: "plc-flex plc-justify-center plc-mt-2 pelcro-discount"
-    }, props), "(-", percentOff, ")", " ", /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-font-bold pelcro-discounted-price"
-    }, priceFormatted));
+      className: "plc-flex plc-items-center plc-justify-center plc-mt-2 pelcro-discount"
+    }, props), "(-", percentOff, ")", /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-ml-1 plc-font-bold pelcro-discounted-price"
+    }, priceFormatted), /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-ml-2 plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
+      onClick: onCouponRemove
+    }, "\u2715 ", t("labels.removeCoupon")));
   }
 
   return "";

package/dist/index.esm.js

@@ -3590,7 +3590,8 @@ var labels$h = {
 	"for": "for",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Tax"
+	tax: "+ Tax",
+	removeCoupon: "REMOVE"
 };
 var checkoutForm_en = {
 	messages: messages$j,
@@ -3616,7 +3617,8 @@ var labels$g = {
 	"for": "pour",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Taxe"
+	tax: "+ Taxe",
+	removeCoupon: "RETIRER"
 };
 var checkoutForm_fr = {
 	messages: messages$i,
@@ -9114,6 +9116,7 @@ const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
 const DISABLE_COUPON_BUTTON = "DISABLE_COUPON_BUTTON";
 const APPLY_COUPON_CODE = "APPLY_COUPON_CODE";
+const REMOVE_APPLIED_COUPON = "REMOVE_APPLIED_COUPON";
 const SET_PERCENT_OFF = "SET_PERCENT_OFF";
 const SET_COUPON = "SET_COUPON";
 const SET_COUPON_ERROR = "SET_COUPON_ERROR";
@@ -12987,10 +12990,6 @@ const PaymentMethodContainerWithoutStripe = ({
       });
 
       if (err) {
-        dispatch({
-          type: SET_PERCENT_OFF,
-          payload: ""
-        });
         onFailure(err);
         return dispatch({
           type: SET_COUPON_ERROR,
@@ -13085,6 +13084,54 @@ const PaymentMethodContainerWithoutStripe = ({
 
   const debouncedApplyCouponCode = useRef(debounce(onApplyCouponCode, 1000)).current;
 
+  const removeAppliedCoupon = state => {
+    state.couponCode = "";
+    dispatch({
+      type: SET_COUPON_ERROR,
+      payload: ""
+    });
+    dispatch({
+      type: SHOW_COUPON_FIELD,
+      payload: false
+    });
+    dispatch({
+      type: SET_COUPON,
+      payload: null
+    });
+    dispatch({
+      type: SET_PERCENT_OFF,
+      payload: ""
+    });
+    dispatch({
+      type: SET_UPDATED_PRICE,
+      payload: null
+    });
+    dispatch({
+      type: SET_TAX_AMOUNT,
+      payload: null
+    });
+    const {
+      currentPlan
+    } = state;
+
+    if (currentPlan) {
+      var _currentPlan$quantity;
+
+      const quantity = (_currentPlan$quantity = currentPlan.quantity) !== null && _currentPlan$quantity !== void 0 ? _currentPlan$quantity : 1;
+      const price = currentPlan.amount;
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        // set original plan price
+        payload: price * quantity
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      }); // update the new amount with taxes if site has taxes enabled
+
+      updateTotalAmountWithTax();
+    }
+  };
+
   const subscribe = (stripeSource, state, dispatch) => {
     const {
       couponCode
@@ -13702,6 +13749,9 @@ const PaymentMethodContainerWithoutStripe = ({
           disableCouponButton: true
         }, (state, dispatch) => onApplyCouponCode(state, dispatch));
 
+      case REMOVE_APPLIED_COUPON:
+        return lib_5(state, () => removeAppliedCoupon(state));
+
       case SET_COUPON:
         return lib_7({ ...state,
           couponObject: action.payload
@@ -13870,6 +13920,10 @@ const DiscountedPrice = props => {
   var _order$currency, _order$, _plan$quantity;
 
   const {
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    dispatch,
     state: {
       updatedPrice,
       taxAmount,
@@ -13885,12 +13939,22 @@ const DiscountedPrice = props => {
   const discountedPriceWithoutTax = updatedPrice - taxAmount;
   const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
+  const onCouponRemove = () => {
+    dispatch({
+      type: REMOVE_APPLIED_COUPON
+    });
+  };
+
   if (percentOff) {
     return /*#__PURE__*/React__default.createElement("div", Object.assign({
-      className: "plc-flex plc-justify-center plc-mt-2 pelcro-discount"
-    }, props), "(-", percentOff, ")", " ", /*#__PURE__*/React__default.createElement("span", {
-      className: "plc-font-bold pelcro-discounted-price"
-    }, priceFormatted));
+      className: "plc-flex plc-items-center plc-justify-center plc-mt-2 pelcro-discount"
+    }, props), "(-", percentOff, ")", /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-ml-1 plc-font-bold pelcro-discounted-price"
+    }, priceFormatted), /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      className: "plc-ml-2 plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
+      onClick: onCouponRemove
+    }, "\u2715 ", t("labels.removeCoupon")));
   }
 
   return "";

package/package.json

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