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

package/dist/index.cjs.js

@@ -3453,7 +3453,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,
@@ -4397,7 +4398,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,
@@ -5288,7 +5290,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -6228,7 +6231,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,
@@ -8865,7 +8869,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());
@@ -11478,6 +11482,10 @@ const initViewFromURL = () => {
         return showSubscriptionManageMembersFromUrl();
       }
 
+      if (view === "payment-method-update") {
+        return showPaymentMethodUpdateFromUrl();
+      }
+
       switchView(view);
     });
   }
@@ -11713,6 +11721,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,
@@ -13670,7 +13719,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();
@@ -18985,6 +19034,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 React.Component {
@@ -19029,19 +19101,50 @@ class SelectModal extends React.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");
       }
     });
 
@@ -19199,15 +19302,6 @@ class SelectModal extends React.Component {
       }), /*#__PURE__*/React__default['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", () => {
@@ -21541,6 +21635,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] = React.useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = React.useState("");
   const {
     t
   } = useTranslation("payment");
@@ -21584,7 +21680,7 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
   /*====== Start Tap integration ========*/
 
-  const submitUsingTap = () => {
+  const submitUsingTap = state => {
     var _ref, _ref2, _ref3, _state$updatedPrice;
 
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -21639,7 +21735,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,
@@ -21648,7 +21744,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
@@ -21689,7 +21786,7 @@ const PaymentMethodContainerWithoutStripe = ({
                       content: null
                     }
                   });
-                  handleTapPayment(tapID);
+                  handleTapPayment(tapID, state);
                 }
               }; // listen to injected iframe for authentication complete message
 
@@ -21704,7 +21801,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleTapPayment(paymentRequest) {
+  function handleTapPayment(paymentRequest, state) {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (type === "createPayment") {
@@ -21731,6 +21828,7 @@ const PaymentMethodContainerWithoutStripe = ({
           type: LOADING,
           payload: false
         });
+        toggleAuthenticationSuccessPendingView(false);
 
         if (err) {
           onFailure(err);
@@ -21751,7 +21849,8 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
         onSuccess(res);
-      });
+      } //
+      );
     }
 
     function handleTapSubscription() {
@@ -21886,7 +21985,7 @@ const PaymentMethodContainerWithoutStripe = ({
   /*====== End Tap integration ========*/
 
 
-  const submitUsingVantiv = () => {
+  const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (isUsingExistingPaymentMethod) {
@@ -21909,7 +22008,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleVantivPayment(paymentRequest) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
 
@@ -21983,9 +22082,6 @@ const PaymentMethodContainerWithoutStripe = ({
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const {
-        couponCode
-      } = state;
 
       if (renewGift) {
         return payment.execute({
@@ -22065,6 +22161,8 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
   React.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;
 
@@ -22077,7 +22175,7 @@ const PaymentMethodContainerWithoutStripe = ({
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -22091,9 +22189,17 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, [selectedPaymentMethodId]);
+  }, [selectedPaymentMethodId]); //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+
+  React.useEffect(() => {
+    if (vantivPaymentRequest) {
+      handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
+    }
+  }, [vantivPaymentRequest]);
   React.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");
@@ -22109,7 +22215,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({
@@ -22182,7 +22288,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") {
@@ -22229,7 +22335,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)
@@ -22289,7 +22397,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}%`
@@ -22364,7 +22474,9 @@ const PaymentMethodContainerWithoutStripe = ({
   const debouncedApplyCouponCode = React.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: ""
@@ -22821,6 +22933,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(({
@@ -23085,12 +23222,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) {
@@ -23219,10 +23360,14 @@ const PaymentMethodContainerWithoutStripe = ({
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$l,
-    key: i
-  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        store: store$l,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
     store: store$l
   })));
 };
@@ -23253,11 +23398,13 @@ const PaymentMethodContainer = props => {
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
       store: store$l
     }, props))));
-  } else {
+  } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
       store: store$l
     }, props));
   }
+
+  return null;
 };
 
 const StripeInputStyle = {
@@ -24093,6 +24240,41 @@ const BankAuthenticationSuccess = () => {
   }));
 };
 
+const OrderCreateFreeButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = React.useContext(store$l);
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const [isDisabled, setDisabled] = React.useState(true);
+  React.useEffect(() => {
+    setDisabled(disableSubmit);
+  }, [disableSubmit]);
+  return /*#__PURE__*/React__default['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"));
+};
+
 /**
  *
  */
@@ -24104,9 +24286,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
@@ -24119,7 +24303,17 @@ function PaymentMethodView({
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default['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['default'].createElement("div", {
+  }, order && /*#__PURE__*/React__default['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['default'].createElement("p", {
+    className: "plc-text-gray-600"
+  }, !Array.isArray(order) ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, t("labels.freeItems")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['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['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['default'].createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -24135,10 +24329,11 @@ function PaymentMethodView({
     type: type,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
-    onFailure: onFailure
+    onFailure: onFailure,
+    freeOrders: showOrderButton
   }, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton ? /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null) : /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default['default'].createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -26014,6 +26209,19 @@ function SubscriptionManageMembersList(props) {
       icon: /*#__PURE__*/React__default['default'].createElement(SvgCheckMark, null)
     };
   }, []);
+  const showMemberData = React.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['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -26058,10 +26266,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['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['default'].createElement("span", {
     className: "plc-font-semibold plc-text-gray-500"
-  }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default['default'].createElement("td", {
+  }, showMemberData(member))), /*#__PURE__*/React__default['default'].createElement("td", {
     className: "plc-py-2"
   }, /*#__PURE__*/React__default['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`
@@ -29738,6 +29946,14 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
 }, 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['default'].createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -29746,7 +29962,9 @@ const OrderCreateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false
+    showExternalPaymentMethods: false,
+    showOrderButton: showOrderButton,
+    order: order
   }, props))));
 };
 
@@ -31029,17 +31247,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;
   React.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();
     }
   }, []);
@@ -32397,254 +32616,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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement("svg", _extends$5({
-    width: 24,
-    height: 24,
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -32773,23 +32752,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__namespace.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__namespace.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__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
+  })));
+}
+
 const AddNew = ({
   title,
   onClick
@@ -33448,6 +33465,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__namespace.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__namespace.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
@@ -33929,6 +33965,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;
 
@@ -35635,24 +35687,8 @@ const PasswordChangeMenu = () => {
   }, /*#__PURE__*/React__default['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: {
@@ -35878,147 +35914,656 @@ const DashboardContent = props => {
     className: "plc-fill-current"
   }))))), /*#__PURE__*/React__default['default'].createElement("section", {
     className: "plc-mt-6 plc-shadow-sm"
-  }, /*#__PURE__*/React__default['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['default'].cloneElement(child, {
+    store: store$4,
+    key: i
+  })) : /*#__PURE__*/React__default['default'].cloneElement(props === null || props === void 0 ? void 0 : props.children, {
+    store: store$4
+  })), /*#__PURE__*/React__default['default'].createElement(DashboardLink, {
+    name: SUB_MENUS.LOGOUT,
+    icon: /*#__PURE__*/React__default['default'].createElement(SvgExit, null),
+    title: t("labels.logout"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  }))), activeDashboardLink && isOpen && /*#__PURE__*/React__default['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['default'].createElement(ProfileMenu, null), activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default['default'].createElement(QRCodeMenu, null), activeDashboardLink === SUB_MENUS.PASSWORDCHANGE && /*#__PURE__*/React__default['default'].createElement(PasswordChangeMenu, null), activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default['default'].createElement(SavedItemsMenu, null), activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default['default'].createElement(PaymentCardsMenu, null), activeDashboardLink === SUB_MENUS.ADDRESSES && /*#__PURE__*/React__default['default'].createElement(AddressesMenu, null), activeDashboardLink === SUB_MENUS.SUBSCRIPTIONS && /*#__PURE__*/React__default['default'].createElement(SubscriptionsMenu, {
+    displayProductSelect: displayProductSelect,
+    setProductAndPlan: setProductAndPlan,
+    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.MEMBERSHIPS && /*#__PURE__*/React__default['default'].createElement(MembershipsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.NEWSLETTERS && /*#__PURE__*/React__default['default'].createElement(NewslettersMenu, null), activeDashboardLink === SUB_MENUS.DONATIONS && /*#__PURE__*/React__default['default'].createElement(DonationsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.GIFTS && /*#__PURE__*/React__default['default'].createElement(GiftsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus,
+    displayProductSelect: displayProductSelect,
+    setProductAndPlan: setProductAndPlan,
+    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
+    disableSubmit: disableSubmit
+  }), activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default['default'].createElement(OrdersMenu, null), activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default['default'].createElement(InvoicesMenu, null), activeDashboardLink === SUB_MENUS.LOGOUT && logout(), /*#__PURE__*/React__default['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['default'].createElement(SvgXIcon, {
+    className: "plc-fill-current"
+  }))));
+};
+
+const DashboardHeading = ({
+  title
+}) => {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, title && /*#__PURE__*/React__default['default'].createElement("header", {
+    className: "plc-pl-4 plc-my-2 sm:plc-pl-8"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-  }, t("labels.mySettings"))), /*#__PURE__*/React__default['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.PROFILE,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgUser, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['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['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.QRCODE,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgQrcode, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['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['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.PASSWORDCHANGE,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgKey, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['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['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.SAVED_ITEMS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
-    title: t("labels.savedItems.label"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
+    title: title !== null && title !== void 0 ? title : t("labels.savedItems.label"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default['default'].createElement("header", {
-    className: "plc-pl-4 plc-mb-2 sm:plc-pl-8"
-  }, /*#__PURE__*/React__default['default'].createElement("p", {
-    className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-  }, t("labels.accountSettings"))), /*#__PURE__*/React__default['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.PAYMENT_CARDS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgPaymentCard, null),
-    title: t("labels.paymentSource"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['default'].createElement(SvgPaymentCard, null),
+    title: title !== null && title !== void 0 ? title : t("labels.paymentSource"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default['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__namespace.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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.ADDRESSES,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgLocationPin, null),
-    title: t("labels.addresses"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['default'].createElement(SvgLocationPin, null),
+    title: title !== null && title !== void 0 ? title : t("labels.addresses"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default['default'].createElement("header", {
-    className: "plc-pl-4 plc-my-2 sm:plc-pl-8"
-  }, /*#__PURE__*/React__default['default'].createElement("p", {
-    className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-  }, t("labels.purchases"))), /*#__PURE__*/React__default['default'].createElement(DashboardLink, {
+  });
+};
+
+const DashboardSubscriptions = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.SUBSCRIPTIONS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgSubscription, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['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['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     show: showNewsletters(),
     name: SUB_MENUS.NEWSLETTERS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgNewsletter, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['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['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     show: hasActiveMemberships(),
     name: SUB_MENUS.MEMBERSHIPS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgMemberships, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['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['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__namespace.createElement("svg", _extends$2({
+    width: 24,
+    height: 24,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     show: hasDonationSubs(),
     name: SUB_MENUS.DONATIONS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgDonate, {
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['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['default'].createElement(DashboardLink, {
+  });
+};
+
+const DashboardGifts = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = React.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['default'].createElement(DashboardLink, {
     name: SUB_MENUS.GIFTS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgGift, null),
-    title: t("labels.gifts"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['default'].createElement(SvgGift, null),
+    title: title !== null && title !== void 0 ? title : t("labels.gifts"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default['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__namespace.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__namespace.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
+  } = React.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['default'].createElement(DashboardLink, {
     show: window.Pelcro.site.read().ecommerce_enabled,
     name: SUB_MENUS.ORDERS,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgShopping, null),
-    title: t("labels.orders.label"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['default'].createElement(SvgShopping, null),
+    title: title !== null && title !== void 0 ? title : t("labels.orders.label"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }), /*#__PURE__*/React__default['default'].createElement(DashboardLink, {
+  });
+};
+
+const DashboardInvoices = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = React.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['default'].createElement(DashboardLink, {
     show: hasInvoices(),
     name: SUB_MENUS.INVOICES,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgDocument, null),
-    title: t("labels.invoices"),
-    setActiveDashboardLink: setActiveDashboardLink,
-    activeDashboardLink: activeDashboardLink
-  })), /*#__PURE__*/React__default['default'].createElement(DashboardLink, {
-    name: SUB_MENUS.LOGOUT,
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgExit, null),
-    title: t("labels.logout"),
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default['default'].createElement(SvgDocument, null),
+    title: title !== null && title !== void 0 ? title : t("labels.invoices"),
     setActiveDashboardLink: setActiveDashboardLink,
     activeDashboardLink: activeDashboardLink
-  }))), activeDashboardLink && isOpen && /*#__PURE__*/React__default['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['default'].createElement(ProfileMenu, null), activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default['default'].createElement(QRCodeMenu, null), activeDashboardLink === SUB_MENUS.PASSWORDCHANGE && /*#__PURE__*/React__default['default'].createElement(PasswordChangeMenu, null), activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default['default'].createElement(SavedItemsMenu, null), activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default['default'].createElement(PaymentCardsMenu, null), activeDashboardLink === SUB_MENUS.ADDRESSES && /*#__PURE__*/React__default['default'].createElement(AddressesMenu, null), activeDashboardLink === SUB_MENUS.SUBSCRIPTIONS && /*#__PURE__*/React__default['default'].createElement(SubscriptionsMenu, {
-    displayProductSelect: displayProductSelect,
-    setProductAndPlan: setProductAndPlan,
-    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
-    getSubscriptionStatus: getSubscriptionStatus
-  }), activeDashboardLink === SUB_MENUS.MEMBERSHIPS && /*#__PURE__*/React__default['default'].createElement(MembershipsMenu, {
-    getSubscriptionStatus: getSubscriptionStatus
-  }), activeDashboardLink === SUB_MENUS.NEWSLETTERS && /*#__PURE__*/React__default['default'].createElement(NewslettersMenu, null), activeDashboardLink === SUB_MENUS.DONATIONS && /*#__PURE__*/React__default['default'].createElement(DonationsMenu, {
-    getSubscriptionStatus: getSubscriptionStatus
-  }), activeDashboardLink === SUB_MENUS.GIFTS && /*#__PURE__*/React__default['default'].createElement(GiftsMenu, {
-    getSubscriptionStatus: getSubscriptionStatus,
-    displayProductSelect: displayProductSelect,
-    setProductAndPlan: setProductAndPlan,
-    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
-    disableSubmit: disableSubmit
-  }), activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default['default'].createElement(OrdersMenu, null), activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default['default'].createElement(InvoicesMenu, null), activeDashboardLink === SUB_MENUS.LOGOUT && logout(), /*#__PURE__*/React__default['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['default'].createElement(SvgXIcon, {
-    className: "plc-fill-current"
-  }))));
+  });
 };
 
 /**
@@ -36034,6 +36579,9 @@ function Dashboard(props) {
   const {
     resetView
   } = usePelcro();
+  const {
+    t
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement(DashboardContainer, props, /*#__PURE__*/React__default['default'].createElement(DashboardContent, Object.assign({
     onClose: () => {
       var _props$onClose;
@@ -36041,7 +36589,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['default'].createElement(DashboardHeading, {
+    title: t("labels.mySettings")
+  }), /*#__PURE__*/React__default['default'].createElement(DashboardProfile, null), /*#__PURE__*/React__default['default'].createElement(DashboardQRCode, null), /*#__PURE__*/React__default['default'].createElement(DashboardPasswordChange, null), /*#__PURE__*/React__default['default'].createElement(DashboardSavedItems, null), /*#__PURE__*/React__default['default'].createElement(DashboardHeading, {
+    title: t("labels.accountSettings")
+  }), /*#__PURE__*/React__default['default'].createElement(DashboardPaymentCards, null), /*#__PURE__*/React__default['default'].createElement(DashboardAddresses, null), /*#__PURE__*/React__default['default'].createElement(DashboardHeading, {
+    title: t("labels.purchases")
+  }), /*#__PURE__*/React__default['default'].createElement(DashboardSubscriptions, null), /*#__PURE__*/React__default['default'].createElement(DashboardNewsletters, null), /*#__PURE__*/React__default['default'].createElement(DashboardMemberships, null), /*#__PURE__*/React__default['default'].createElement(DashboardDonations, null), /*#__PURE__*/React__default['default'].createElement(DashboardGifts, null), /*#__PURE__*/React__default['default'].createElement(DashboardOrders, null), /*#__PURE__*/React__default['default'].createElement(DashboardInvoices, null)));
 }
 Dashboard.viewId = "dashboard";
 
@@ -38534,7 +39088,6 @@ exports.AddressUpdateStateSelect = AddressUpdateStateSelect;
 exports.AddressUpdateSubmit = AddressUpdateSubmit;
 exports.AddressUpdateTextInput = AddressUpdateTextInput;
 exports.AddressUpdateView = AddressUpdateView;
-exports.AddressesMenu = AddressesMenu;
 exports.Alert = AlertWithContext;
 exports.AlertElement = Alert;
 exports.ApplyCouponButton = ApplyCouponButton;
@@ -38555,13 +39108,26 @@ exports.ConfirmPassword = ConfirmPassword;
 exports.CouponCode = CouponCode;
 exports.CouponCodeField = CouponCodeField;
 exports.Dashboard = Dashboard;
+exports.DashboardAddresses = DashboardAddresses;
 exports.DashboardContainer = DashboardContainer;
 exports.DashboardContent = DashboardContent;
+exports.DashboardDonations = DashboardDonations;
+exports.DashboardGifts = DashboardGifts;
+exports.DashboardHeading = DashboardHeading;
+exports.DashboardInvoices = DashboardInvoices;
 exports.DashboardLink = DashboardLink;
+exports.DashboardMemberships = DashboardMemberships;
+exports.DashboardNewsletters = DashboardNewsletters;
 exports.DashboardOpenButton = DashboardOpenButton;
+exports.DashboardOrders = DashboardOrders;
+exports.DashboardPasswordChange = DashboardPasswordChange;
+exports.DashboardPaymentCards = DashboardPaymentCards;
+exports.DashboardProfile = DashboardProfile;
+exports.DashboardQRCode = DashboardQRCode;
+exports.DashboardSavedItems = DashboardSavedItems;
+exports.DashboardSubscriptions = DashboardSubscriptions;
 exports.DatePicker = DatePicker;
 exports.DiscountedPrice = DiscountedPrice;
-exports.DonationsMenu = DonationsMenu;
 exports.Email = Email;
 exports.EmailVerifyContainer = EmailVerifyContainer;
 exports.EmailVerifyModal = EmailVerifyModal;
@@ -38582,7 +39148,6 @@ exports.GiftRedeemContainer = GiftRedeemContainer;
 exports.GiftRedeemModal = GiftRedeemModal;
 exports.GiftRedeemSubmitButton = GiftRedeemSubmitButton;
 exports.GiftRedeemView = GiftRedeemView;
-exports.GiftsMenu = GiftsMenu;
 exports.GoogleLoginButton = GoogleLoginButton;
 exports.Input = Input;
 exports.InvoiceDetailsContainer = InvoiceDetailsContainer;
@@ -38593,7 +39158,6 @@ exports.InvoiceDetailsView = InvoiceDetailsView;
 exports.InvoicePaymentContainer = InvoicePaymentContainer;
 exports.InvoicePaymentModal = InvoicePaymentModal;
 exports.InvoicePaymentView = InvoicePaymentView;
-exports.InvoicesMenu = InvoicesMenu;
 exports.Link = Link;
 exports.LoginButton = LoginButton;
 exports.LoginContainer = LoginContainer;
@@ -38604,7 +39168,6 @@ exports.LoginRequestLoginToken = LoginRequestLoginToken;
 exports.LoginUsername = LoginUsername;
 exports.LoginView = LoginView;
 exports.Logout = Logout;
-exports.MembershipsMenu = MembershipsMenu;
 exports.MeterModal = MeterModal;
 exports.MeterView = MeterView;
 exports.Modal = Modal;
@@ -38617,20 +39180,18 @@ exports.NewsletterUpdateContainer = NewsletterUpdateContainer;
 exports.NewsletterUpdateList = NewsletterUpdateList;
 exports.NewsletterUpdateModal = NewsletterUpdateModal;
 exports.NewsletterUpdateView = NewsletterUpdateView;
-exports.NewslettersMenu = NewslettersMenu;
 exports.Notification = Notification;
 exports.OrderConfirmModal = OrderConfirmModal;
 exports.OrderCreateContainer = OrderCreateContainer;
+exports.OrderCreateFreeButton = OrderCreateFreeButton;
 exports.OrderCreateModal = OrderCreateModal;
 exports.OrderCreateSubmitButton = OrderCreateSubmitButton;
 exports.OrderCreateView = OrderCreateView;
-exports.OrderItems = OrderItems;
 exports.Password = Password;
 exports.PasswordChangeButton = PasswordChangeButton;
 exports.PasswordChangeConfirmNewPassword = PasswordChangeConfirmNewPassword;
 exports.PasswordChangeContainer = PasswordChangeContainer;
 exports.PasswordChangeCurrentPassword = PasswordChangeCurrentPassword;
-exports.PasswordChangeMenu = PasswordChangeMenu;
 exports.PasswordChangeModal = PasswordChangeModal;
 exports.PasswordChangeNewPassword = PasswordChangeNewPassword;
 exports.PasswordChangeView = PasswordChangeView;
@@ -38651,7 +39212,6 @@ exports.PasswordlessRequestEmail = PasswordlessRequestEmail;
 exports.PasswordlessRequestModal = PasswordlessRequestModal;
 exports.PasswordlessRequestView = PasswordlessRequestView;
 exports.PasswordlessRequestViewButton = PasswordlessRequestViewButton;
-exports.PaymentCardsMenu = PaymentCardsMenu;
 exports.PaymentCreateContainer = PaymentCreateContainer;
 exports.PaymentCreateView = PaymentCreateView;
 exports.PaymentMethodContainer = PaymentMethodContainer;
@@ -38672,7 +39232,6 @@ exports.PelcroCardExpiry = PelcroCardExpiry;
 exports.PelcroCardNumber = PelcroCardNumber;
 exports.PelcroModalController = PelcroModalController;
 exports.PelcroPaymentRequestButton = PelcroPaymentRequestButton;
-exports.ProfileMenu = ProfileMenu;
 exports.ProfilePicChangeButton = ProfilePicChangeButton;
 exports.ProfilePicChangeContainer = ProfilePicChangeContainer;
 exports.ProfilePicChangeCropper = ProfilePicChangeCropper;
@@ -38681,7 +39240,6 @@ exports.ProfilePicChangeRemoveButton = ProfilePicChangeRemoveButton;
 exports.ProfilePicChangeSelectButton = ProfilePicChangeSelectButton;
 exports.ProfilePicChangeView = ProfilePicChangeView;
 exports.ProfilePicChangeZoom = ProfilePicChangeZoom;
-exports.QRCodeMenu = QRCodeMenu;
 exports.QrCodeModal = QrCodeModal;
 exports.QrCodeView = QrCodeView;
 exports.Radio = Radio;
@@ -38695,7 +39253,6 @@ exports.RegisterLastName = RegisterLastName;
 exports.RegisterModal = RegisterModal;
 exports.RegisterPassword = RegisterPassword;
 exports.RegisterView = RegisterView;
-exports.SavedItems = SavedItems;
 exports.Select = Select;
 exports.SelectModal = SelectModalWithHook;
 exports.SelectedPaymentMethod = SelectedPaymentMethod;
@@ -38720,7 +39277,6 @@ exports.SubscriptionRenewView = SubscriptionRenewView;
 exports.SubscriptionSuspendContainer = SubscriptionSuspendContainer;
 exports.SubscriptionSuspendModal = SubscriptionSuspendModal;
 exports.SubscriptionSuspendView = SubscriptionSuspendView;
-exports.SubscriptionsItems = SubscriptionsItems;
 exports.TaxAmount = TaxAmount;
 exports.TextArea = TextArea;
 exports.Tooltip = Tooltip;