@pelcro/react-pelcro-js 4.0.0-alpha.34 → 4.0.0-alpha.36

package/dist/index.esm.js

@@ -3423,7 +3423,8 @@ var labels$10 = {
 	removeCoupon: "REMOVE",
 	firstName: "First name",
 	lastName: "Last name",
-	phone: "Phone"
+	phone: "Phone",
+	freeItems: "Free Items"
 };
 var checkoutForm_en = {
 	messages: messages$14,
@@ -4367,7 +4368,8 @@ var labels$H = {
 	removeCoupon: "RETIRER",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
-	phone: "Téléphoner"
+	phone: "Téléphoner",
+	freeItems: "Articles gratuits"
 };
 var checkoutForm_fr = {
 	messages: messages$M,
@@ -5258,7 +5260,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -6198,7 +6201,8 @@ var labels$d = {
 	removeCoupon: "ELIMINAR",
 	firstName: "Nombre",
 	lastName: "Apellido",
-	phone: "Teléfono"
+	phone: "Teléfono",
+	freeItems: "Artículos gratis"
 };
 var checkoutForm_es = {
 	messages: messages$e,
@@ -8835,7 +8839,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
   let totalWithoutDividingBy100 = 0;
 
   for (const item of items) {
-    totalWithoutDividingBy100 += parseFloat(item.price ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
+    totalWithoutDividingBy100 += parseFloat(item !== null && item !== void 0 && item.price || (item === null || item === void 0 ? void 0 : item.price) === 0 ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
   }
 
   return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
@@ -11448,6 +11452,10 @@ const initViewFromURL = () => {
         return showSubscriptionManageMembersFromUrl();
       }
 
+      if (view === "payment-method-update") {
+        return showPaymentMethodUpdateFromUrl();
+      }
+
       switchView(view);
     });
   }
@@ -11683,6 +11691,47 @@ const showPasswordlessRequestFromUrl = () => {
   return switchView("passwordless-request");
 };
 
+const showPaymentMethodUpdateFromUrl = () => {
+  const {
+    isAuthenticated,
+    whenSiteReady,
+    whenUserReady,
+    switchView
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    if (!isAuthenticated()) {
+      return switchView("login");
+    }
+
+    whenUserReady(() => {
+      const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
+      const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+
+      if (!window.Stripe && !supportsVantiv && !supportsTap) {
+        document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      } //vantiv
+
+
+      if (supportsVantiv) {
+        document.querySelector("#vantiv-eprotect-sdk").addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      } //Tap
+
+
+      if (supportsTap && document.querySelector("#tap-sdk")) {
+        return switchView("payment-method-update");
+      }
+
+      return switchView("payment-method-update");
+    });
+  });
+};
+
 const showInvoiceDetailsFromUrl = () => {
   const {
     isAuthenticated,
@@ -13640,7 +13689,7 @@ function LoginModal({
 
     resetView();
     const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
-    const viewsURLs = ["invoice-details", "gift-redeem", "plan-select"];
+    const viewsURLs = ["invoice-details", "gift-redeem", "plan-select", "payment-method-update"];
 
     if (viewsURLs.includes(viewFromURL)) {
       initViewFromURL();
@@ -18955,6 +19004,29 @@ function SelectModalWithHook(props) {
     matchingEntitlements: view === "_plan-select-entitlements" ? entitlements : null
   });
 }
+
+function productsWithMatchedTaggedFirst() {
+  var _window$Pelcro$produc;
+
+  const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
+  const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
+  const allProductsMinusMatched = allProducts.filter(product => !productsThatMatchArticleTag.some(matchedProduct => matchedProduct.id === product.id));
+  return [productsThatMatchArticleTag, allProductsMinusMatched];
+}
+
+function productMatchPageLanguage(product) {
+  if (!product) {
+    return false;
+  }
+
+  if (product.language === null) {
+    return true;
+  }
+
+  const siteLanguage = window.Pelcro.helpers.getHtmlLanguageAttribute();
+  return product.language === siteLanguage;
+}
+
 SelectModalWithHook.viewId = "plan-select";
 
 class SelectModal extends Component {
@@ -18999,19 +19071,50 @@ class SelectModal extends Component {
       document.addEventListener("keydown", this.handleSubmit);
 
       if (!document.querySelector("#pelcro-selection-view") || !document.querySelector(".pelcro-select-product-wrapper")) {
+        var _window$Pelcro, _window$Pelcro$user, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro3, _window$Pelcro3$user, _window$Pelcro4, _window$Pelcro4$site;
+
+        const userCurrency = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read().currency;
+        const userCountry = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.location.countryCode;
+        const userLanguage = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.read().language;
+        const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.filter(product => {
+          const filteredPlans = product.plans.filter(plan => plan.currency === userCurrency || !userCurrency);
+          if (filteredPlans.length) return filteredPlans;
+        });
+        const productsMatchingUserCountry = productsMatchingUserCurrency.filter(product => {
+          const filteredPlans = product.plans.filter(plan => {
+            var _plan$countries;
+
+            return plan.countries && ((_plan$countries = plan.countries) === null || _plan$countries === void 0 ? void 0 : _plan$countries.includes(userCountry)) || !plan.countries || !plan.countries.length;
+          });
+          if (filteredPlans.length) return filteredPlans;
+        });
         notifyBugsnag(() => {
           Bugsnag.notify("SelectModal - No data viewed", event => {
-            var _window$Pelcro, _window$Pelcro$site, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro4;
+            var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
 
             event.addMetadata("MetaData", {
-              site: (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$site = _window$Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : _window$Pelcro$site.read(),
-              user: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.read(),
-              uiVersion: (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.uiVersion,
-              environment: (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : _window$Pelcro4.environment
+              site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
+              user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
+              uiVersion: (_window$Pelcro7 = window.Pelcro) === null || _window$Pelcro7 === void 0 ? void 0 : (_window$Pelcro7$uiSet = _window$Pelcro7.uiSettings) === null || _window$Pelcro7$uiSet === void 0 ? void 0 : _window$Pelcro7$uiSet.uiVersion,
+              environment: (_window$Pelcro8 = window.Pelcro) === null || _window$Pelcro8 === void 0 ? void 0 : _window$Pelcro8.environment,
+              matchingEntitlementsProps: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.matchingEntitlements,
+              productListState: this.state.productList,
+              methods: {
+                productsWithMatchedTaggedFirst: productsWithMatchedTaggedFirst(),
+                pelcroSDKProductsListMethod: window.Pelcro.product.list(),
+                pelcroSDKGetByEntitlements: this.props.matchingEntitlements ? window.Pelcro.product.getByEntitlements(this.props.matchingEntitlements) : null
+              },
+              userCurrency: userCurrency,
+              userCountry: userCountry,
+              userLanguage: userLanguage,
+              siteLanguage: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$helpe = _window$Pelcro9.helpers) === null || _window$Pelcro9$helpe === void 0 ? void 0 : _window$Pelcro9$helpe.getHtmlLanguageAttribute(),
+              products: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$site = _window$Pelcro10.site) === null || _window$Pelcro10$site === void 0 ? void 0 : _window$Pelcro10$site.read().products.length,
+              currency_matching_filter: `${productsMatchingUserCurrency.length} Products Passed`,
+              country_matching_filter: `${productsMatchingUserCountry.length} Products Passed`,
+              language_matching_filter: `${productsMatchingUserCountry.filter(productMatchPageLanguage).length} Products Passed`
             });
           });
         });
-        console.log("bugsnag Triggered");
       }
     });
 
@@ -19169,15 +19272,6 @@ class SelectModal extends Component {
       }), /*#__PURE__*/React__default.createElement("h3", {
         className: "plc-text-sm plc-font-semibold"
       }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
-
-      function productsWithMatchedTaggedFirst() {
-        var _window$Pelcro$produc;
-
-        const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
-        const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
-        const allProductsMinusMatched = allProducts.filter(product => !productsThatMatchArticleTag.some(matchedProduct => matchedProduct.id === product.id));
-        return [productsThatMatchArticleTag, allProductsMinusMatched];
-      }
     });
 
     _defineProperty$3(this, "renderPlans", () => {
@@ -21511,6 +21605,8 @@ const PaymentMethodContainerWithoutStripe = ({
 }) => {
   var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett;
 
+  const [vantivPaymentRequest, setVantivPaymentRequest] = useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = useState("");
   const {
     t
   } = useTranslation("payment");
@@ -21554,7 +21650,7 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
   /*====== Start Tap integration ========*/
 
-  const submitUsingTap = () => {
+  const submitUsingTap = state => {
     var _ref, _ref2, _ref3, _state$updatedPrice;
 
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -21609,7 +21705,7 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
       } else {
-        window.Pelcro.payment.authorize({
+        window.Pelcro.payment.verify({
           auth_token: window.Pelcro.user.read().auth_token,
           first_name: window.Pelcro.user.read().first_name || state.firstName,
           last_name: window.Pelcro.user.read().last_name || state.lastName,
@@ -21618,7 +21714,8 @@ const PaymentMethodContainerWithoutStripe = ({
           amount: totalAmount,
           currency: (plan === null || plan === void 0 ? void 0 : plan.currency) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency) || window.Pelcro.site.read().default_currency,
           tap_token: result.id,
-          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}`
+          funding: result.card.funding,
+          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}&type=verify_card&site_id=${window.Pelcro.siteid}`
         }, (err, res) => {
           if (err) {
             // Inform the user if there was an error
@@ -21659,7 +21756,7 @@ const PaymentMethodContainerWithoutStripe = ({
                       content: null
                     }
                   });
-                  handleTapPayment(tapID);
+                  handleTapPayment(tapID, state);
                 }
               }; // listen to injected iframe for authentication complete message
 
@@ -21674,7 +21771,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleTapPayment(paymentRequest) {
+  function handleTapPayment(paymentRequest, state) {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (type === "createPayment") {
@@ -21701,6 +21798,7 @@ const PaymentMethodContainerWithoutStripe = ({
           type: LOADING,
           payload: false
         });
+        toggleAuthenticationSuccessPendingView(false);
 
         if (err) {
           onFailure(err);
@@ -21721,7 +21819,8 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
         onSuccess(res);
-      });
+      } //
+      );
     }
 
     function handleTapSubscription() {
@@ -21856,7 +21955,7 @@ const PaymentMethodContainerWithoutStripe = ({
   /*====== End Tap integration ========*/
 
 
-  const submitUsingVantiv = () => {
+  const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (isUsingExistingPaymentMethod) {
@@ -21879,7 +21978,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleVantivPayment(paymentRequest) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
 
@@ -21953,9 +22052,6 @@ const PaymentMethodContainerWithoutStripe = ({
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const {
-        couponCode
-      } = state;
 
       if (renewGift) {
         return payment.execute({
@@ -22035,6 +22131,8 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default.useRef(null);
   const tapInstanceCard = React__default.useRef(null);
   useEffect(() => {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
+
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
       var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
@@ -22047,7 +22145,7 @@ const PaymentMethodContainerWithoutStripe = ({
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -22061,9 +22159,17 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, [selectedPaymentMethodId]);
+  }, [selectedPaymentMethodId]); //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+
+  useEffect(() => {
+    if (vantivPaymentRequest) {
+      handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
+    }
+  }, [vantivPaymentRequest]);
   useEffect(() => {
     whenUserReady(() => {
+      if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
+
       if (cardProcessor === "tap" && !window.Tapjsli) {
         window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
         window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
@@ -22079,7 +22185,7 @@ const PaymentMethodContainerWithoutStripe = ({
   }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
 
     try {
       const paymentRequest = stripe.paymentRequest({
@@ -22152,7 +22258,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const updateTotalAmountWithTax = () => {
     var _window$Pelcro$site$r4;
 
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
@@ -22199,7 +22305,9 @@ const PaymentMethodContainerWithoutStripe = ({
       });
 
       if (err) {
-        onFailure(err);
+        onFailure(err); //reset the coupon code in local state
+
+        setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -22259,7 +22367,9 @@ const PaymentMethodContainerWithoutStripe = ({
       dispatch({
         type: SET_COUPON,
         payload: res.data.coupon
-      });
+      }); //set the coupon code in local state to be able to use with Vantiv
+
+      setUpdatedCouponCode(res.data.coupon.code);
       dispatch({
         type: SET_PERCENT_OFF,
         payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
@@ -22334,7 +22444,9 @@ const PaymentMethodContainerWithoutStripe = ({
   const debouncedApplyCouponCode = useRef(debounce$1(onApplyCouponCode, 1000)).current;
 
   const removeAppliedCoupon = state => {
-    state.couponCode = "";
+    state.couponCode = ""; //reset the coupon code in local state
+
+    setUpdatedCouponCode("");
     dispatch({
       type: SET_COUPON_ERROR,
       payload: ""
@@ -22791,6 +22903,31 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   const submitPayment = (state, dispatch) => {
+    if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
+      const isQuickPurchase = !Array.isArray(order);
+      const mappedOrderItems = isQuickPurchase ? [{
+        sku_id: order.id,
+        quantity: order.quantity
+      }] : order.map(item => ({
+        sku_id: item.id,
+        quantity: item.quantity
+      }));
+      window.Pelcro.ecommerce.order.create({
+        items: mappedOrderItems,
+        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+        ...(selectedAddressId && {
+          address_id: selectedAddressId
+        })
+      }, (err, res) => {
+        if (err) {
+          return handlePaymentError(err);
+        }
+
+        return onSuccess(res);
+      });
+      return;
+    }
+
     stripe.createSource({
       type: "card"
     }).then(({
@@ -23055,12 +23192,16 @@ const PaymentMethodContainerWithoutStripe = ({
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
+          if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
+            return submitPayment(state);
+          }
+
           if (getSiteCardProcessor() === "vantiv") {
             return submitUsingVantiv();
           }
 
           if (getSiteCardProcessor() === "tap") {
-            return submitUsingTap();
+            return submitUsingTap(state);
           }
 
           if (selectedPaymentMethodId) {
@@ -23189,10 +23330,14 @@ const PaymentMethodContainerWithoutStripe = ({
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$l,
-    key: i
-  })) : /*#__PURE__*/React__default.cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        store: store$l,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default.cloneElement(children, {
     store: store$l
   })));
 };
@@ -23223,11 +23368,13 @@ const PaymentMethodContainer = props => {
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
       store: store$l
     }, props))));
-  } else {
+  } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
       store: store$l
     }, props));
   }
+
+  return null;
 };
 
 const StripeInputStyle = {
@@ -24063,6 +24210,41 @@ const BankAuthenticationSuccess = () => {
   }));
 };
 
+const OrderCreateFreeButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = useContext(store$l);
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const [isDisabled, setDisabled] = useState(true);
+  useEffect(() => {
+    setDisabled(disableSubmit);
+  }, [disableSubmit]);
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    className: "plc-w-full",
+    onClick: () => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      dispatch({
+        type: SUBMIT_PAYMENT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isDisabled,
+    isLoading: disableSubmit
+  }, otherProps), t("labels.submit"));
+};
+
 /**
  *
  */
@@ -24074,9 +24256,11 @@ function PaymentMethodView({
   type,
   showCoupon,
   showExternalPaymentMethods,
-  showSubscriptionButton
+  showSubscriptionButton,
+  showOrderButton,
+  order
 }) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _calcAndFormatItemsTo, _order$;
 
   const {
     t
@@ -24089,7 +24273,17 @@ function PaymentMethodView({
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
-  }, cardProcessor === "stripe" && !showSubscriptionButton && /*#__PURE__*/React__default.createElement("div", {
+  }, order && /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-gray-600"
+  }, !Array.isArray(order) ? /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, t("labels.freeItems")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-xl plc-font-semibold plc-text-primary-600"
+  }, (_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())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default.createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -24105,10 +24299,11 @@ function PaymentMethodView({
     type: type,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
-    onFailure: onFailure
+    onFailure: onFailure,
+    freeOrders: showOrderButton
   }, /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton ? /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default.createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -25984,6 +26179,19 @@ function SubscriptionManageMembersList(props) {
       icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
     };
   }, []);
+  const showMemberData = useCallback(member => {
+    var _member$customer, _member$customer2, _member$customer3, _member$customer4;
+
+    let data;
+
+    if ((member === null || member === void 0 ? void 0 : member.status) !== "active") {
+      data = member === null || member === void 0 ? void 0 : member.invitation_email;
+      return data;
+    }
+
+    data = (member === null || member === void 0 ? void 0 : (_member$customer = member.customer) === null || _member$customer === void 0 ? void 0 : _member$customer.email) || (member === null || member === void 0 ? void 0 : (_member$customer2 = member.customer) === null || _member$customer2 === void 0 ? void 0 : _member$customer2.first_name) + " " + (member === null || member === void 0 ? void 0 : (_member$customer3 = member.customer) === null || _member$customer3 === void 0 ? void 0 : _member$customer3.last_name) || (member === null || member === void 0 ? void 0 : (_member$customer4 = member.customer) === null || _member$customer4 === void 0 ? void 0 : _member$customer4.username) || "-----";
+    return data;
+  }, []);
 
   if (loading) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("div", {
@@ -26028,10 +26236,10 @@ function SubscriptionManageMembersList(props) {
     className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50 plc-text-center`
   }, /*#__PURE__*/React__default.createElement("td", {
     className: "plc-truncate plc-text-left",
-    title: member === null || member === void 0 ? void 0 : member.invitation_email
+    title: showMemberData(member)
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "plc-font-semibold plc-text-gray-500"
-  }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default.createElement("td", {
+  }, showMemberData(member))), /*#__PURE__*/React__default.createElement("td", {
     className: "plc-py-2"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getMemberStatus(member).bgColor} plc-uppercase ${getMemberStatus(member).textColor} plc-rounded-lg`
@@ -29708,6 +29916,14 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
 }, props));
 
 const OrderCreateView = props => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
+
+  useTranslation("payment");
+  const {
+    order
+  } = usePelcro();
+  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
+  const showOrderButton = skipPayment && ((order === null || order === void 0 ? void 0 : order.price) === 0 || (order === null || order === void 0 ? void 0 : order.length) > 0 && order.every(item => (item === null || item === void 0 ? void 0 : item.price) === 0));
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -29716,7 +29932,9 @@ const OrderCreateView = props => {
   }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false
+    showExternalPaymentMethods: false,
+    showOrderButton: showOrderButton,
+    order: order
   }, props))));
 };
 
@@ -30999,17 +31217,18 @@ const PaymentMethodSelectModal = ({
 }) => {
   var _window$Pelcro, _window$Pelcro$uiSett;
 
+  const {
+    t
+  } = useTranslation("paymentMethod");
   const {
     switchToCheckoutForm,
     set,
-    plan
+    plan,
+    order
   } = usePelcro();
-  const {
-    t
-  } = useTranslation("paymentMethod");
   const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
   useEffect(() => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
       switchToCheckoutForm();
     }
   }, []);
@@ -32367,254 +32586,14 @@ var _path$f;
 
 function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 
-function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-  })));
-}
-
-var _path$e;
-
-function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
-
-function SvgNewsletter(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-5 plc-w-5",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
-  })));
-}
-
-var _path$d;
-
-function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
-
-function SvgRefresh(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
-    className: "plc-w-4 plc-h-4 plc-mr-1",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-  })));
-}
-
-var _path$c;
-
-function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
-
-function SvgDocument(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-6 plc-w-6 plc-mr-2",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-  })));
-}
-
-var _path$b;
-
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
-
-function SvgPaymentCard(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-  })));
-}
-
-var _path$a, _path2;
-
-function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
-
-function SvgLocationPin(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-  })));
-}
-
-var _path$9;
-
-function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
-
-function SvgShopping(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-  })));
-}
-
-var _path$8;
-
-function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
-
-function SvgBookmark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
-  })));
-}
-
-var _path$7;
-
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
-
-function SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
-    className: "plc-w-5 plc-h-5",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
-  })));
-}
-
-var _path$6;
-
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
-
-function SvgKey(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
-    clipRule: "evenodd"
-  })));
-}
-
-var _path$5;
-
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-
-function SvgDonate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
-    width: 24,
-    height: 24,
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
-    d: "M4 21h9.62a3.995 3.995 0 003.037-1.397l5.102-5.952a1 1 0 00-.442-1.6l-1.968-.656a3.043 3.043 0 00-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 009.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 00.442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 00.11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 01-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 001.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0016.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0111.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 01.701.292c.189.189.293.44.293.707z"
-  })));
-}
-
-var _path$4;
-
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-
-function SvgMemberships(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    strokeWidth: 1.5,
-    stroke: "currentColor",
-    width: 24,
-    height: 24
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"
-  })));
-}
-
-var _path$3;
-
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
-function SvgQrcode(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 682.667,
-    height: 682.667,
-    viewBox: "0 0 512 512"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    d: "M93.5 62.4c-15.7 3.9-28 16.6-31.4 32.4-.7 3.3-1.1 17.2-1.1 36.4 0 29.1.1 31.4 2 35.3 5.3 11 21.2 11.1 26.4.1 1.4-2.9 1.6-7.9 1.6-34.6 0-34.4.1-35.3 6.3-39 3-1.9 5.2-2 34.5-2 26.9 0 31.9-.2 34.8-1.6 11-5.2 10.9-21.1-.1-26.4-3.9-1.9-6.1-2-36.1-1.9-21.8 0-33.5.5-36.9 1.3zM345.4 63c-10.9 5.4-10.9 21.2 0 26.4 2.9 1.4 7.9 1.6 34.8 1.6 29.3 0 31.5.1 34.5 2 6.2 3.7 6.3 4.6 6.3 39 0 26.7.2 31.7 1.6 34.6 5.2 11 21.1 10.9 26.4-.1 1.9-3.9 2-6.2 2-35.3 0-19.2-.4-33.1-1.1-36.4-3.5-16.2-16.5-29.2-32.7-32.7-3.3-.7-17.2-1.1-36.5-1.1-29.3 0-31.5.1-35.3 2zM146 128.9c-6.9 2.1-12.1 6.5-15.6 13.1-1.8 3.2-1.9 6.3-1.9 38.5 0 34.2 0 35.1 2.2 39.1 2.8 5.3 9.1 10.7 14.2 12.2 2.5.8 14.4 1.2 35.8 1.2 36.3 0 38.3-.3 45.2-7.2 6.8-6.9 7.1-8.9 7.1-45.1 0-22.2-.4-33.2-1.2-36.1-1.8-6-10-13.9-16-15.4-5.3-1.3-65.5-1.6-69.8-.3zm57 51.6V203h-45v-45h45v22.5zM297 128.9c-8 2.5-14.9 9.2-16.9 16.4-.9 2.9-1.1 14.3-.9 37.7.3 37.2.2 36.2 7.4 43.3 6.6 6.4 8.8 6.7 45 6.7 35.6 0 38-.3 44.2-6.3 1.9-1.8 4.3-5 5.5-7.2 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-2.5-4.7-6.4-8.5-11.3-11.1-3.2-1.7-6.4-1.9-37-2.1-18.4-.1-34.6.2-36 .6zm57 51.6V203h-45v-45h45v22.5zM144.1 280.3c-4.8 1.8-10.8 7.2-13.4 12-2.2 4.1-2.2 4.9-2.2 39.2 0 34 .1 35.1 2.2 39 2.5 4.7 6.4 8.5 11.3 11.1 3.2 1.7 6.6 1.9 35.5 2.2 38.9.4 40.7.2 48-7.2 3.2-3.2 5.5-6.6 6.3-9.2.8-2.9 1.2-13.9 1.2-36.1 0-35.8-.4-38.3-6.6-44.7-7-7.2-6-7.1-44.4-7.3-25.4-.1-35.4.1-37.9 1zm58.9 51.2V354h-45v-45h45v22.5zM294.8 280.4c-6.8 2.4-12.9 8.9-14.8 15.7-1.5 5-1.3 66.2.2 71 1.5 5.1 6.9 11.4 12.2 14.2 4 2.2 4.9 2.2 39.1 2.2 32.2 0 35.3-.1 38.5-1.9 4.9-2.6 8.8-6.4 11.3-11.1 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-3-5.6-8-10.1-13.2-12-5.9-2-67.5-2.2-73.3-.1zm59.2 51.1V354h-45v-45h45v22.5zM68.7 339.2c-2.2 1.3-4.5 3.8-5.7 6.3-1.9 3.9-2 6.2-2 35.3 0 19.2.4 33.1 1.1 36.4 3.4 16.1 16.6 29.3 32.7 32.7 3.3.7 17.2 1.1 36.4 1.1 29.1 0 31.4-.1 35.3-2 11-5.3 11.1-21.2.1-26.4-2.9-1.4-7.9-1.6-34.6-1.6-34.4 0-35.3-.1-39-6.3-1.9-3-2-5.2-2-34.5 0-26.9-.2-31.9-1.6-34.8-3.6-7.5-13.5-10.5-20.7-6.2zM429.2 338.7c-1.8.9-4.3 3-5.5 4.7-2.1 3-2.2 4-2.7 36.1-.5 35.8-.6 36.1-6.3 39.5-3 1.9-5.3 2-34.5 2-34.5 0-36.1.2-40.2 6-5.4 7.5-2.8 18 5.5 22 3.9 1.9 6.2 2 35.3 2 19.2 0 33.1-.4 36.4-1.1 16.2-3.5 29.2-16.5 32.7-32.7.7-3.3 1.1-17.2 1.1-36.4 0-29.1-.1-31.4-2-35.3-3.6-7.4-12.5-10.4-19.8-6.8z"
-  })));
-}
-
-var _path$2;
-
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
 function SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -32743,23 +32722,61 @@ const SavedItems = ({
   });
 };
 
-var _path$1;
+var _path$e;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+
+function SvgRefresh(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
+    className: "plc-w-4 plc-h-4 plc-mr-1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+  })));
+}
+
+var _path$d;
+
+function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 
 function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-4 plc-w-4 plc-mr-1",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z",
     clipRule: "evenodd"
   })));
 }
 
+var _path$c;
+
+function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+
+function SvgPlus(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
+    className: "plc-w-5 plc-h-5",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
+  })));
+}
+
 const AddNew = ({
   title,
   onClick
@@ -33418,6 +33435,25 @@ function formatStartDate(date) {
   return new Intl.DateTimeFormat("en-CA").format(startDate);
 }
 
+var _path$b;
+
+function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+
+function SvgDocument(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-6 plc-w-6 plc-mr-2",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+  })));
+}
+
 const InvoicesMenu = props => {
   const {
     t
@@ -33899,6 +33935,22 @@ const AddressesItems = props => {
   })));
 };
 
+const SUB_MENUS = {
+  PROFILE: "profile",
+  QRCODE: "qr-code",
+  PASSWORDCHANGE: "passwordChange",
+  SUBSCRIPTIONS: "subscriptions",
+  DONATIONS: "donations",
+  MEMBERSHIPS: "memberships",
+  NEWSLETTERS: "Newsletters",
+  PAYMENT_CARDS: "payment-cards",
+  ADDRESSES: "addresses",
+  GIFTS: "gifts",
+  ORDERS: "orders",
+  INVOICES: "invoices",
+  LOGOUT: "logout",
+  SAVED_ITEMS: "saved-items"
+};
 const getPaymentCardIcon = name => {
   var _icons$name$toLowerCa;
 
@@ -35605,24 +35657,8 @@ const PasswordChangeMenu = () => {
   }, /*#__PURE__*/React__default.createElement(PasswordChangeView, null));
 };
 
-const SUB_MENUS = {
-  PROFILE: "profile",
-  QRCODE: "qr-code",
-  PASSWORDCHANGE: "passwordChange",
-  SUBSCRIPTIONS: "subscriptions",
-  DONATIONS: "donations",
-  MEMBERSHIPS: "memberships",
-  NEWSLETTERS: "Newsletters",
-  PAYMENT_CARDS: "payment-cards",
-  ADDRESSES: "addresses",
-  GIFTS: "gifts",
-  ORDERS: "orders",
-  INVOICES: "invoices",
-  LOGOUT: "logout",
-  SAVED_ITEMS: "saved-items"
-};
 const DashboardContent = props => {
-  var _window$Pelcro$user$r, _window$Pelcro, _window$Pelcro$uiSett;
+  var _window$Pelcro$user$r, _window$Pelcro, _window$Pelcro$uiSett, _props$children;
 
   const {
     state: {
@@ -35848,147 +35884,656 @@ const DashboardContent = props => {
     className: "plc-fill-current"
   }))))), /*#__PURE__*/React__default.createElement("section", {
     className: "plc-mt-6 plc-shadow-sm"
-  }, /*#__PURE__*/React__default.createElement("header", {
-    className: "plc-pl-4 plc-mb-2 sm:plc-pl-8"
+  }, props !== null && props !== void 0 && (_props$children = props.children) !== null && _props$children !== void 0 && _props$children.length ? props === null || props === void 0 ? void 0 : props.children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store: store$4,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(props === null || props === void 0 ? void 0 : props.children, {
+    store: store$4
+  })), /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.LOGOUT,
+    icon: /*#__PURE__*/React__default.createElement(SvgExit, null),
+    title: t("labels.logout"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  }))), activeDashboardLink && isOpen && /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-view-dashboard-submenus",
+    className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full lg:plc-w-9/12 plc-w-full plc-bg-gray-100 plc-z-max plc-overflow-auto"
+  }, activeDashboardLink === SUB_MENUS.PROFILE && /*#__PURE__*/React__default.createElement(ProfileMenu, null), activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default.createElement(QRCodeMenu, null), activeDashboardLink === SUB_MENUS.PASSWORDCHANGE && /*#__PURE__*/React__default.createElement(PasswordChangeMenu, null), activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default.createElement(SavedItemsMenu, null), activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default.createElement(PaymentCardsMenu, null), activeDashboardLink === SUB_MENUS.ADDRESSES && /*#__PURE__*/React__default.createElement(AddressesMenu, null), activeDashboardLink === SUB_MENUS.SUBSCRIPTIONS && /*#__PURE__*/React__default.createElement(SubscriptionsMenu, {
+    displayProductSelect: displayProductSelect,
+    setProductAndPlan: setProductAndPlan,
+    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.MEMBERSHIPS && /*#__PURE__*/React__default.createElement(MembershipsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.NEWSLETTERS && /*#__PURE__*/React__default.createElement(NewslettersMenu, null), activeDashboardLink === SUB_MENUS.DONATIONS && /*#__PURE__*/React__default.createElement(DonationsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.GIFTS && /*#__PURE__*/React__default.createElement(GiftsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus,
+    displayProductSelect: displayProductSelect,
+    setProductAndPlan: setProductAndPlan,
+    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
+    disableSubmit: disableSubmit
+  }), activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default.createElement(OrdersMenu, null), activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default.createElement(InvoicesMenu, null), activeDashboardLink === SUB_MENUS.LOGOUT && logout(), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "ghost",
+    type: "button",
+    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 plc-right-2 md:plc-top-5 md:plc-right-10",
+    onClick: closeDashboard
+  }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
+    className: "plc-fill-current"
+  }))));
+};
+
+const DashboardHeading = ({
+  title
+}) => {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && /*#__PURE__*/React__default.createElement("header", {
+    className: "plc-pl-4 plc-my-2 sm:plc-pl-8"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-  }, t("labels.mySettings"))), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  }, title)));
+};
+
+var _path$a;
+
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+
+function SvgUser(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+  })));
+}
+
+const DashboardProfile = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.PROFILE,
-    icon: /*#__PURE__*/React__default.createElement(SvgUser, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgUser, {
       className: "plc-w-6 plc-h-6 plc-mr-2"
     }),
-    title: t("labels.profile"),
+    title: title !== null && title !== void 0 ? title : t("labels.profile"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$9;
+
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+
+function SvgQrcode(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 682.667,
+    height: 682.667,
+    viewBox: "0 0 512 512"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    d: "M93.5 62.4c-15.7 3.9-28 16.6-31.4 32.4-.7 3.3-1.1 17.2-1.1 36.4 0 29.1.1 31.4 2 35.3 5.3 11 21.2 11.1 26.4.1 1.4-2.9 1.6-7.9 1.6-34.6 0-34.4.1-35.3 6.3-39 3-1.9 5.2-2 34.5-2 26.9 0 31.9-.2 34.8-1.6 11-5.2 10.9-21.1-.1-26.4-3.9-1.9-6.1-2-36.1-1.9-21.8 0-33.5.5-36.9 1.3zM345.4 63c-10.9 5.4-10.9 21.2 0 26.4 2.9 1.4 7.9 1.6 34.8 1.6 29.3 0 31.5.1 34.5 2 6.2 3.7 6.3 4.6 6.3 39 0 26.7.2 31.7 1.6 34.6 5.2 11 21.1 10.9 26.4-.1 1.9-3.9 2-6.2 2-35.3 0-19.2-.4-33.1-1.1-36.4-3.5-16.2-16.5-29.2-32.7-32.7-3.3-.7-17.2-1.1-36.5-1.1-29.3 0-31.5.1-35.3 2zM146 128.9c-6.9 2.1-12.1 6.5-15.6 13.1-1.8 3.2-1.9 6.3-1.9 38.5 0 34.2 0 35.1 2.2 39.1 2.8 5.3 9.1 10.7 14.2 12.2 2.5.8 14.4 1.2 35.8 1.2 36.3 0 38.3-.3 45.2-7.2 6.8-6.9 7.1-8.9 7.1-45.1 0-22.2-.4-33.2-1.2-36.1-1.8-6-10-13.9-16-15.4-5.3-1.3-65.5-1.6-69.8-.3zm57 51.6V203h-45v-45h45v22.5zM297 128.9c-8 2.5-14.9 9.2-16.9 16.4-.9 2.9-1.1 14.3-.9 37.7.3 37.2.2 36.2 7.4 43.3 6.6 6.4 8.8 6.7 45 6.7 35.6 0 38-.3 44.2-6.3 1.9-1.8 4.3-5 5.5-7.2 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-2.5-4.7-6.4-8.5-11.3-11.1-3.2-1.7-6.4-1.9-37-2.1-18.4-.1-34.6.2-36 .6zm57 51.6V203h-45v-45h45v22.5zM144.1 280.3c-4.8 1.8-10.8 7.2-13.4 12-2.2 4.1-2.2 4.9-2.2 39.2 0 34 .1 35.1 2.2 39 2.5 4.7 6.4 8.5 11.3 11.1 3.2 1.7 6.6 1.9 35.5 2.2 38.9.4 40.7.2 48-7.2 3.2-3.2 5.5-6.6 6.3-9.2.8-2.9 1.2-13.9 1.2-36.1 0-35.8-.4-38.3-6.6-44.7-7-7.2-6-7.1-44.4-7.3-25.4-.1-35.4.1-37.9 1zm58.9 51.2V354h-45v-45h45v22.5zM294.8 280.4c-6.8 2.4-12.9 8.9-14.8 15.7-1.5 5-1.3 66.2.2 71 1.5 5.1 6.9 11.4 12.2 14.2 4 2.2 4.9 2.2 39.1 2.2 32.2 0 35.3-.1 38.5-1.9 4.9-2.6 8.8-6.4 11.3-11.1 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-3-5.6-8-10.1-13.2-12-5.9-2-67.5-2.2-73.3-.1zm59.2 51.1V354h-45v-45h45v22.5zM68.7 339.2c-2.2 1.3-4.5 3.8-5.7 6.3-1.9 3.9-2 6.2-2 35.3 0 19.2.4 33.1 1.1 36.4 3.4 16.1 16.6 29.3 32.7 32.7 3.3.7 17.2 1.1 36.4 1.1 29.1 0 31.4-.1 35.3-2 11-5.3 11.1-21.2.1-26.4-2.9-1.4-7.9-1.6-34.6-1.6-34.4 0-35.3-.1-39-6.3-1.9-3-2-5.2-2-34.5 0-26.9-.2-31.9-1.6-34.8-3.6-7.5-13.5-10.5-20.7-6.2zM429.2 338.7c-1.8.9-4.3 3-5.5 4.7-2.1 3-2.2 4-2.7 36.1-.5 35.8-.6 36.1-6.3 39.5-3 1.9-5.3 2-34.5 2-34.5 0-36.1.2-40.2 6-5.4 7.5-2.8 18 5.5 22 3.9 1.9 6.2 2 35.3 2 19.2 0 33.1-.4 36.4-1.1 16.2-3.5 29.2-16.5 32.7-32.7.7-3.3 1.1-17.2 1.1-36.4 0-29.1-.1-31.4-2-35.3-3.6-7.4-12.5-10.4-19.8-6.8z"
+  })));
+}
+
+const DashboardQRCode = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.QRCODE,
-    icon: /*#__PURE__*/React__default.createElement(SvgQrcode, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgQrcode, {
       className: "plc-w-6 plc-h-6 plc-mr-2"
     }),
-    title: "My QR code",
+    title: title !== null && title !== void 0 ? title : "My QR code",
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$8;
+
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+
+function SvgKey(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
+    clipRule: "evenodd"
+  })));
+}
+
+const DashboardPasswordChange = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.PASSWORDCHANGE,
-    icon: /*#__PURE__*/React__default.createElement(SvgKey, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgKey, {
       className: "plc-w-6 plc-h-6 plc-mr-2"
     }),
-    title: t("labels.changePassword"),
+    title: title !== null && title !== void 0 ? title : t("labels.changePassword"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$7;
+
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+
+function SvgBookmark(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+  })));
+}
+
+const DashboardSavedItems = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.SAVED_ITEMS,
-    icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
-    title: t("labels.savedItems.label"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgBookmark, null),
+    title: title !== null && title !== void 0 ? title : t("labels.savedItems.label"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement("header", {
-    className: "plc-pl-4 plc-mb-2 sm:plc-pl-8"
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-  }, t("labels.accountSettings"))), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$6;
+
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+
+function SvgPaymentCard(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+  })));
+}
+
+const DashboardPaymentCards = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.PAYMENT_CARDS,
-    icon: /*#__PURE__*/React__default.createElement(SvgPaymentCard, null),
-    title: t("labels.paymentSource"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgPaymentCard, null),
+    title: title !== null && title !== void 0 ? title : t("labels.paymentSource"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$5, _path2;
+
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+
+function SvgLocationPin(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+  })));
+}
+
+const DashboardAddresses = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.ADDRESSES,
-    icon: /*#__PURE__*/React__default.createElement(SvgLocationPin, null),
-    title: t("labels.addresses"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgLocationPin, null),
+    title: title !== null && title !== void 0 ? title : t("labels.addresses"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement("header", {
-    className: "plc-pl-4 plc-my-2 sm:plc-pl-8"
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-  }, t("labels.purchases"))), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+const DashboardSubscriptions = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.SUBSCRIPTIONS,
-    icon: /*#__PURE__*/React__default.createElement(SvgSubscription, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgSubscription, {
       className: "plc-w-10 plc-h-10 plc-pt-2 plc-pr-1 plc--ml-2"
     }),
-    title: t("labels.subscriptions"),
+    title: title !== null && title !== void 0 ? title : t("labels.subscriptions"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$4;
+
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+
+function SvgNewsletter(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-5 plc-w-5",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+  })));
+}
+
+const DashboardNewsletters = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     show: showNewsletters(),
     name: SUB_MENUS.NEWSLETTERS,
-    icon: /*#__PURE__*/React__default.createElement(SvgNewsletter, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgNewsletter, {
       className: "plc-transform plc--translate-x-1 plc-scale-105 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
     }),
-    title: t("labels.Newsletters"),
+    title: title !== null && title !== void 0 ? title : t("labels.Newsletters"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$3;
+
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+
+function SvgMemberships(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    width: 24,
+    height: 24
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"
+  })));
+}
+
+const DashboardMemberships = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     show: hasActiveMemberships(),
     name: SUB_MENUS.MEMBERSHIPS,
-    icon: /*#__PURE__*/React__default.createElement(SvgMemberships, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgMemberships, {
       className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
     }),
-    title: t("labels.memberships"),
+    title: title !== null && title !== void 0 ? title : t("labels.memberships"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$2;
+
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+function SvgDonate(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    width: 24,
+    height: 24,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    d: "M4 21h9.62a3.995 3.995 0 003.037-1.397l5.102-5.952a1 1 0 00-.442-1.6l-1.968-.656a3.043 3.043 0 00-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 009.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 00.442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 00.11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 01-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 001.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0016.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0111.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 01.701.292c.189.189.293.44.293.707z"
+  })));
+}
+
+const DashboardDonations = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     show: hasDonationSubs(),
     name: SUB_MENUS.DONATIONS,
-    icon: /*#__PURE__*/React__default.createElement(SvgDonate, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgDonate, {
       className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
     }),
-    title: t("labels.donations"),
+    title: title !== null && title !== void 0 ? title : t("labels.donations"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+const DashboardGifts = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     name: SUB_MENUS.GIFTS,
-    icon: /*#__PURE__*/React__default.createElement(SvgGift, null),
-    title: t("labels.gifts"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgGift, null),
+    title: title !== null && title !== void 0 ? title : t("labels.gifts"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+var _path$1;
+
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+
+function SvgShopping(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+  })));
+}
+
+const DashboardOrders = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     show: window.Pelcro.site.read().ecommerce_enabled,
     name: SUB_MENUS.ORDERS,
-    icon: /*#__PURE__*/React__default.createElement(SvgShopping, null),
-    title: t("labels.orders.label"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgShopping, null),
+    title: title !== null && title !== void 0 ? title : t("labels.orders.label"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+  });
+};
+
+const DashboardInvoices = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
     show: hasInvoices(),
     name: SUB_MENUS.INVOICES,
-    icon: /*#__PURE__*/React__default.createElement(SvgDocument, null),
-    title: t("labels.invoices"),
-    setActiveDashboardLink: setActiveDashboardLink,
-    activeDashboardLink: activeDashboardLink
-  })), /*#__PURE__*/React__default.createElement(DashboardLink, {
-    name: SUB_MENUS.LOGOUT,
-    icon: /*#__PURE__*/React__default.createElement(SvgExit, null),
-    title: t("labels.logout"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgDocument, null),
+    title: title !== null && title !== void 0 ? title : t("labels.invoices"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }))), activeDashboardLink && isOpen && /*#__PURE__*/React__default.createElement("div", {
-    id: "pelcro-view-dashboard-submenus",
-    className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full lg:plc-w-9/12 plc-w-full plc-bg-gray-100 plc-z-max plc-overflow-auto"
-  }, activeDashboardLink === SUB_MENUS.PROFILE && /*#__PURE__*/React__default.createElement(ProfileMenu, null), activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default.createElement(QRCodeMenu, null), activeDashboardLink === SUB_MENUS.PASSWORDCHANGE && /*#__PURE__*/React__default.createElement(PasswordChangeMenu, null), activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default.createElement(SavedItemsMenu, null), activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default.createElement(PaymentCardsMenu, null), activeDashboardLink === SUB_MENUS.ADDRESSES && /*#__PURE__*/React__default.createElement(AddressesMenu, null), activeDashboardLink === SUB_MENUS.SUBSCRIPTIONS && /*#__PURE__*/React__default.createElement(SubscriptionsMenu, {
-    displayProductSelect: displayProductSelect,
-    setProductAndPlan: setProductAndPlan,
-    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
-    getSubscriptionStatus: getSubscriptionStatus
-  }), activeDashboardLink === SUB_MENUS.MEMBERSHIPS && /*#__PURE__*/React__default.createElement(MembershipsMenu, {
-    getSubscriptionStatus: getSubscriptionStatus
-  }), activeDashboardLink === SUB_MENUS.NEWSLETTERS && /*#__PURE__*/React__default.createElement(NewslettersMenu, null), activeDashboardLink === SUB_MENUS.DONATIONS && /*#__PURE__*/React__default.createElement(DonationsMenu, {
-    getSubscriptionStatus: getSubscriptionStatus
-  }), activeDashboardLink === SUB_MENUS.GIFTS && /*#__PURE__*/React__default.createElement(GiftsMenu, {
-    getSubscriptionStatus: getSubscriptionStatus,
-    displayProductSelect: displayProductSelect,
-    setProductAndPlan: setProductAndPlan,
-    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
-    disableSubmit: disableSubmit
-  }), activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default.createElement(OrdersMenu, null), activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default.createElement(InvoicesMenu, null), activeDashboardLink === SUB_MENUS.LOGOUT && logout(), /*#__PURE__*/React__default.createElement(Button, {
-    variant: "ghost",
-    type: "button",
-    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 plc-right-2 md:plc-top-5 md:plc-right-10",
-    onClick: closeDashboard
-  }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
-    className: "plc-fill-current"
-  }))));
+  });
 };
 
 /**
@@ -36004,6 +36549,9 @@ function Dashboard(props) {
   const {
     resetView
   } = usePelcro();
+  const {
+    t
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default.createElement(DashboardContainer, props, /*#__PURE__*/React__default.createElement(DashboardContent, Object.assign({
     onClose: () => {
       var _props$onClose;
@@ -36011,7 +36559,13 @@ function Dashboard(props) {
       (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
       resetView();
     }
-  }, props)));
+  }, props), /*#__PURE__*/React__default.createElement(DashboardHeading, {
+    title: t("labels.mySettings")
+  }), /*#__PURE__*/React__default.createElement(DashboardProfile, null), /*#__PURE__*/React__default.createElement(DashboardQRCode, null), /*#__PURE__*/React__default.createElement(DashboardPasswordChange, null), /*#__PURE__*/React__default.createElement(DashboardSavedItems, null), /*#__PURE__*/React__default.createElement(DashboardHeading, {
+    title: t("labels.accountSettings")
+  }), /*#__PURE__*/React__default.createElement(DashboardPaymentCards, null), /*#__PURE__*/React__default.createElement(DashboardAddresses, null), /*#__PURE__*/React__default.createElement(DashboardHeading, {
+    title: t("labels.purchases")
+  }), /*#__PURE__*/React__default.createElement(DashboardSubscriptions, null), /*#__PURE__*/React__default.createElement(DashboardNewsletters, null), /*#__PURE__*/React__default.createElement(DashboardMemberships, null), /*#__PURE__*/React__default.createElement(DashboardDonations, null), /*#__PURE__*/React__default.createElement(DashboardGifts, null), /*#__PURE__*/React__default.createElement(DashboardOrders, null), /*#__PURE__*/React__default.createElement(DashboardInvoices, null)));
 }
 Dashboard.viewId = "dashboard";
 
@@ -38470,4 +39024,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AddressesMenu, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardContainer, DashboardContent, DashboardLink, DashboardOpenButton, DatePicker, DiscountedPrice, DonationsMenu, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GiftsMenu, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, InvoicesMenu, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MembershipsMenu, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, NewslettersMenu, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, OrderItems, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeMenu, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCardsMenu, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfileMenu, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QRCodeMenu, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, SavedItems, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, SubscriptionsItems, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };