@pelcro/react-pelcro-js 4.0.0-alpha.33 → 4.0.0-alpha.35

package/dist/index.esm.js

@@ -8242,7 +8242,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$n;
+      } = initialState$o;
       this.set(otherStateFields);
     });
 
@@ -8648,7 +8648,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$n = {
+const initialState$o = {
   // View
   view: null,
   // Plans
@@ -8683,7 +8683,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$n,
+    ...initialState$o,
     // State actions
     ...actions,
     // Callbacks
@@ -12104,9 +12104,18 @@ const HANDLE_INVITE_MEMBERS = "HANDLE_INVITE_MEMBERS";
 const HANDLE_REMOVE_MEMBER = "HANDLE_REMOVE_MEMBER";
 const UPDATE_INVITE_BUTTON = "UPDATE_INVITE_BUTTON";
 const UPDATE_MEMBERS = "UPDATE_MEMBERS";
-const UPDATE_REMOVE_MEMBER_ID = "UPDATE_REMOVE_MEMBER_ID";
+const UPDATE_REMOVE_MEMBER_ID = "UPDATE_REMOVE_MEMBER_ID"; //Dashboard
 
-const initialState$m = {
+const SET_IS_OPEN = "SET_IS_OPEN";
+const SET_ADDRESSES = "SET_ADDRESSES";
+const CLOSE_DASHBOARD = "CLOSE_DASHBOARD";
+const SET_ACTIVE_DASHBOARD_LINK = "SET_ACTIVE_DASHBOARD_LINK";
+const SET_DISABLESUBMIT = "SET_DISABLESUBMIT";
+const CANCEL_SUBSCRIPTION = "CANCEL_SUBSCRIPTION";
+const UNSUSPEND_SUBSCRIPTION = "UNSUSPEND_SUBSCRIPTION";
+const REACTIVATE_SUBSCRIPTION = "REACTIVATE_SUBSCRIPTION"; //========
+
+const initialState$n = {
   email: "",
   username: "",
   password: "",
@@ -12119,10 +12128,10 @@ const initialState$m = {
     content: ""
   }
 };
-const store$m = /*#__PURE__*/createContext(initialState$m);
+const store$n = /*#__PURE__*/createContext(initialState$n);
 const {
-  Provider: Provider$m
-} = store$m;
+  Provider: Provider$n
+} = store$n;
 
 const LoginContainer = ({
   style,
@@ -12246,7 +12255,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$m;
+        return initialState$n;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -12264,12 +12273,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$m);
+  }, initialState$n);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$m, {
+  }, /*#__PURE__*/React__default.createElement(Provider$n, {
     value: {
       state,
       dispatch
@@ -12277,12 +12286,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$m,
+        store: store$n,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$m
+    store: store$n
   })));
 };
 
@@ -12590,7 +12599,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     t
   } = useTranslation("login");
@@ -12649,15 +12658,15 @@ const LoginRequestLoginToken = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginUsername = props => /*#__PURE__*/React__default.createElement(UserNameInput, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 var _path$t;
@@ -12734,7 +12743,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$l = {
+const initialState$m = {
   email: "",
   password: "",
   emailError: null,
@@ -12751,10 +12760,10 @@ const initialState$l = {
     content: ""
   }
 };
-const store$l = /*#__PURE__*/createContext(initialState$l);
+const store$m = /*#__PURE__*/createContext(initialState$m);
 const {
-  Provider: Provider$l
-} = store$l;
+  Provider: Provider$m
+} = store$m;
 
 const RegisterContainer = ({
   style,
@@ -12945,7 +12954,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$l;
+        return initialState$m;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -12963,12 +12972,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$l);
+  }, initialState$m);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$l, {
+  }, /*#__PURE__*/React__default.createElement(Provider$m, {
     value: {
       state,
       dispatch
@@ -12976,12 +12985,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$l,
+        store: store$m,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$l
+    store: store$m
   })));
 };
 /**
@@ -13021,10 +13030,10 @@ const FacebookLoginButton = ({
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -13190,10 +13199,10 @@ const GoogleLoginButton = ({
   const googleClientId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
   useEffect(() => {
     gapi.load("client:auth2", () => {
       gapi.auth2.init({
@@ -13297,10 +13306,10 @@ const Auth0LoginButton = ({
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = useContext(store$m);
+  } = useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
@@ -13675,11 +13684,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterButton = ({
@@ -13699,7 +13708,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$l);
+  } = useContext(store$m);
   const {
     t
   } = useTranslation("register");
@@ -13837,7 +13846,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 function LastName({
@@ -13868,7 +13877,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 /**
@@ -13991,7 +14000,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$l
+    store: store$m
   }));
 };
 
@@ -21459,7 +21468,7 @@ class TapGateway {
 
 /** @type {PaymentStateType} */
 
-const initialState$k = {
+const initialState$l = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -21484,10 +21493,10 @@ const initialState$k = {
     content: ""
   }
 };
-const store$k = /*#__PURE__*/createContext(initialState$k);
+const store$l = /*#__PURE__*/createContext(initialState$l);
 const {
-  Provider: Provider$k
-} = store$k;
+  Provider: Provider$l
+} = store$l;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -23170,21 +23179,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$k);
+  }, initialState$l);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$k, {
+  }, /*#__PURE__*/React__default.createElement(Provider$l, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$k,
+    store: store$l,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$k
+    store: store$l
   })));
 };
 
@@ -23212,11 +23221,11 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
-      store: store$k
+      store: store$l
     }, props))));
   } else {
     return /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
-      store: store$k
+      store: store$l
     }, props));
   }
 };
@@ -23267,7 +23276,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -23349,7 +23358,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     order,
     plan
@@ -23399,7 +23408,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
   const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -23431,7 +23440,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -23465,7 +23474,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -23521,7 +23530,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -23778,7 +23787,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     product,
     plan,
@@ -23911,7 +23920,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     switchView,
     selectedPaymentMethodId
@@ -23953,7 +23962,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     plan
   } = usePelcro();
@@ -23972,11 +23981,11 @@ const TaxAmount = () => {
 };
 
 const IncludeFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const IncludeLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 function Phone({
@@ -24005,7 +24014,7 @@ function Phone({
 }
 
 const IncludePhone = props => /*#__PURE__*/React__default.createElement(Phone, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const SubscriptionCreateFreePlanButton = ({
@@ -24018,7 +24027,7 @@ const SubscriptionCreateFreePlanButton = ({
       disableSubmit
     },
     dispatch
-  } = useContext(store$k);
+  } = useContext(store$l);
   const {
     t
   } = useTranslation("common");
@@ -24234,13 +24243,13 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-const initialState$j = {
+const initialState$k = {
   cancelationReason: ""
 };
-const store$j = /*#__PURE__*/createContext(initialState$j);
+const store$k = /*#__PURE__*/createContext(initialState$k);
 const {
-  Provider: Provider$j
-} = store$j;
+  Provider: Provider$k
+} = store$k;
 
 const SubscriptionCancelContainer = ({
   style,
@@ -24261,21 +24270,21 @@ const SubscriptionCancelContainer = ({
       default:
         return state;
     }
-  }, initialState$j);
+  }, initialState$k);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-subscription-cancel-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$j, {
+  }, /*#__PURE__*/React__default.createElement(Provider$k, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$j,
+    store: store$k,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$j
+    store: store$k
   })));
 };
 
@@ -24360,7 +24369,7 @@ const SubscriptionCancelReason = props => {
   const {
     dispatch,
     state
-  } = useContext(store$j);
+  } = useContext(store$k);
 
   const handleOnTextAreaBlur = e => {
     dispatch({
@@ -24408,7 +24417,7 @@ const SubscriptionCancelNowButton = ({
       cancelationReason
     },
     dispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -24480,7 +24489,7 @@ const SubscriptionCancelLaterButton = ({
       cancelationReason
     },
     dispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -24591,14 +24600,14 @@ const SubscriptionCancelModal = ({
 };
 SubscriptionCancelModal.viewId = "subscription-cancel";
 
-const initialState$i = {
+const initialState$j = {
   suspendDate: null,
   buttonDisabled: false
 };
-const store$i = /*#__PURE__*/createContext(initialState$i);
+const store$j = /*#__PURE__*/createContext(initialState$j);
 const {
-  Provider: Provider$i
-} = store$i;
+  Provider: Provider$j
+} = store$j;
 
 const SubscriptionSuspendContainer = ({
   style,
@@ -24624,21 +24633,21 @@ const SubscriptionSuspendContainer = ({
       default:
         return state;
     }
-  }, initialState$i);
+  }, initialState$j);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-subscription-suspend-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$i, {
+  }, /*#__PURE__*/React__default.createElement(Provider$j, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$i,
+    store: store$j,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$i
+    store: store$j
   })));
 };
 
@@ -24687,7 +24696,7 @@ const SubscriptionSuspendDate = props => {
   const {
     dispatch,
     state
-  } = useContext(store$i);
+  } = useContext(store$j);
 
   const handleInputChange = value => {
     if (value) {
@@ -24729,7 +24738,7 @@ const SubscriptionSuspendButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -25199,7 +25208,7 @@ class DefaultNewsLetter extends Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$h = {
+const initialState$i = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -25209,10 +25218,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/createContext(initialState$h);
+const store$i = /*#__PURE__*/createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 
 const NewsletterUpdateContainer = ({
   style,
@@ -25325,7 +25334,7 @@ const NewsletterUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -25369,7 +25378,7 @@ const NewsletterUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$h, {
+  }, /*#__PURE__*/React__default.createElement(Provider$i, {
     value: {
       state,
       dispatch
@@ -25377,12 +25386,12 @@ const NewsletterUpdateContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$h,
+        store: store$i,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -25397,7 +25406,7 @@ const NewsletterUpdateButton = ({
       isSubmitting,
       isListLoading
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     t
   } = useTranslation("newsletter");
@@ -25427,7 +25436,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
 
   if (isListLoading) {
     return /*#__PURE__*/React__default.createElement(Loader, {
@@ -25640,7 +25649,7 @@ function SubscriptionCreateModal({
 }
 SubscriptionCreateModal.viewId = "subscription-create";
 
-const initialState$g = {
+const initialState$h = {
   emails: "",
   emailsError: null,
   buttonDisabled: false,
@@ -25652,10 +25661,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/createContext(initialState$g);
+const store$h = /*#__PURE__*/createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 
 const SubscriptionManageMembersContainer = ({
   style,
@@ -25827,7 +25836,7 @@ const SubscriptionManageMembersContainer = ({
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   useEffect(() => {
     dispatch({
       type: HANDLE_LIST_MEMBERS
@@ -25837,7 +25846,7 @@ const SubscriptionManageMembersContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-manage-members-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$g, {
+  }, /*#__PURE__*/React__default.createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -25845,12 +25854,12 @@ const SubscriptionManageMembersContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 
@@ -25866,7 +25875,7 @@ const SubscriptionManageMembersButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
   const {
     t
   } = useTranslation("subscriptionManageMembers");
@@ -25896,7 +25905,7 @@ function SubscriptionManageMembersEmails(props) {
       emails: stateEmails,
       emailsError
     }
-  } = useContext(store$g);
+  } = useContext(store$h);
   const [emails, setEmails] = useState(stateEmails);
   const [finishedTyping, setFinishedTyping] = useState(false);
   const handleInputChange = useCallback(value => {
@@ -25955,7 +25964,7 @@ function SubscriptionManageMembersList(props) {
       removeMemberId,
       loading
     }
-  } = useContext(store$g);
+  } = useContext(store$h);
   const getMemberStatus = useCallback(sub => {
     if (sub.status === "pending") {
       return {
@@ -26118,11 +26127,11 @@ function SubscriptionManageMembersModal({
 }
 SubscriptionManageMembersModal.viewId = "manage-members";
 
-var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
-const initialState$f = {
-  email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
+var _window$Pelcro$user$r$1, _window$Pelcro$user$r2$1, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
+const initialState$g = {
+  email: (_window$Pelcro$user$r$1 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r$1 === void 0 ? void 0 : _window$Pelcro$user$r$1.email,
   emailError: null,
-  firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
+  firstName: (_window$Pelcro$user$r2$1 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2$1 === void 0 ? void 0 : _window$Pelcro$user$r2$1.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   lastNameError: null,
   username: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.username,
@@ -26136,10 +26145,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/createContext(initialState$f);
+const store$g = /*#__PURE__*/createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 
 const UserUpdateContainer = ({
   style,
@@ -26306,12 +26315,12 @@ const UserUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$f, {
+  }, /*#__PURE__*/React__default.createElement(Provider$g, {
     value: {
       state,
       dispatch
@@ -26319,12 +26328,12 @@ const UserUpdateContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$f,
+        store: store$g,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$f
+    store: store$g
   })));
 };
 
@@ -26350,7 +26359,7 @@ const UserUpdateEmail = props => {
       email,
       emailError
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
   const [enableEmailEdit, setEnableEmailEdit] = useState(false);
   const {
     t
@@ -26376,7 +26385,7 @@ const UserUpdateEmail = props => {
     className: "plc-flex plc-items-start plc-relative"
   }, /*#__PURE__*/React__default.createElement(Email, Object.assign({
     disabled: !enableEmailEdit,
-    store: store$f,
+    store: store$g,
     label: t("labels.email"),
     enableEmailEdit: enableEmailEdit
   }, props)), /*#__PURE__*/React__default.createElement(Button, {
@@ -26401,7 +26410,7 @@ const UserUpdateButton = ({
       emailError
     },
     dispatch
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     t
   } = useTranslation("userEdit");
@@ -26492,19 +26501,19 @@ function UpdateUserNameInput({
 }
 
 const UserUpdateUsername = props => /*#__PURE__*/React__default.createElement(UpdateUserNameInput, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdatePhone = props => /*#__PURE__*/React__default.createElement(Phone, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
@@ -26591,7 +26600,7 @@ function Tin({
 }
 
 const UserUpdateTin = props => /*#__PURE__*/React__default.createElement(Tin, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 function DisplayName({
@@ -26622,7 +26631,7 @@ function DisplayName({
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default.createElement(DisplayName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateView = props => {
@@ -26717,11 +26726,11 @@ UserUpdateModal.viewId = "user-edit";
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$f
+    store: store$g
   }));
 };
 
-const initialState$e = {
+const initialState$f = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -26747,10 +26756,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/createContext(initialState$e);
+const store$f = /*#__PURE__*/createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const getNewlyCreatedAddress = addresses => addresses[addresses.length - 1];
 
@@ -26997,7 +27006,7 @@ const AddressCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -27029,16 +27038,16 @@ const AddressCreateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$e, {
+  }, /*#__PURE__*/React__default.createElement(Provider$f, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$e,
+    store: store$f,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -27049,7 +27058,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const handleInputChange = value => {
     dispatch({
@@ -27085,7 +27094,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const handleInputChange = value => {
     dispatch({
@@ -27120,7 +27129,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const handleBlur = () => {
     return dispatch({
@@ -27163,7 +27172,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const handleInputChange = value => {
     dispatch({
@@ -27198,7 +27207,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const handleInputChange = value => {
     dispatch({
@@ -27236,7 +27245,7 @@ const AddressCreateSubmit = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     t
   } = useTranslation("address");
@@ -27349,7 +27358,7 @@ function CountrySelect({
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 function StateSelect({
@@ -27438,14 +27447,14 @@ function StateSelect({
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 const AddressCreateSetDefault = props => {
   const {
     dispatch,
     state
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   const handleCheckboxChange = e => {
     dispatch({
@@ -27580,18 +27589,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$e
+    store: store$f
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$e
+    store: store$f
   }, props));
 };
 
-const initialState$d = {
+const initialState$e = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -27617,10 +27626,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/createContext(initialState$d);
+const store$e = /*#__PURE__*/createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 
 const AddressUpdateContainer = ({
   style,
@@ -27672,7 +27681,7 @@ const AddressUpdateContainer = ({
       const thisAddress = addresses[address];
 
       if (+thisAddress.id === +addressId) {
-        const newState = { ...initialState$d,
+        const newState = { ...initialState$e,
           firstName: thisAddress.first_name,
           lastName: thisAddress.last_name,
           line1: thisAddress.line1,
@@ -27813,7 +27822,7 @@ const AddressUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -27845,21 +27854,21 @@ const AddressUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$d, {
+  }, /*#__PURE__*/React__default.createElement(Provider$e, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$d,
+    store: store$e,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -27869,7 +27878,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const handleBlur = () => {
     return dispatch({
@@ -27912,7 +27921,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const handleBlur = () => {
     return dispatch({
@@ -27955,7 +27964,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const handleBlur = () => {
     return dispatch({
@@ -27995,7 +28004,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -28006,7 +28015,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const handleBlur = () => {
     return dispatch({
@@ -28049,7 +28058,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const handleBlur = () => {
     return dispatch({
@@ -28095,7 +28104,7 @@ const AddressUpdateSubmit = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
   const {
     t
   } = useTranslation("address");
@@ -28111,7 +28120,7 @@ const AddressUpdateSubmit = ({
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateSetDefault(props) {
@@ -28120,7 +28129,7 @@ function AddressUpdateSetDefault(props) {
     state: {
       isDefault
     }
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const handleCheckboxChange = e => {
     dispatch({
@@ -28228,7 +28237,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -28310,7 +28319,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$c = {
+const initialState$d = {
   email: "",
   password: "",
   passwordError: null,
@@ -28323,10 +28332,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/createContext(initialState$c);
+const store$d = /*#__PURE__*/createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const PasswordResetContainer = ({
   style,
@@ -28383,7 +28392,7 @@ const PasswordResetContainer = ({
       type: SET_EMAIL,
       payload: window.Pelcro.helpers.getURLParameter("email")
     });
-    initialState$c.email = window.Pelcro.helpers.getURLParameter("email");
+    initialState$d.email = window.Pelcro.helpers.getURLParameter("email");
     dispatch({
       type: SET_TOKEN,
       payload: window.Pelcro.helpers.getURLParameter("token")
@@ -28443,26 +28452,26 @@ const PasswordResetContainer = ({
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$c, {
+  }, /*#__PURE__*/React__default.createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetButton = ({
@@ -28475,7 +28484,7 @@ const PasswordResetButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     t
   } = useTranslation("passwordReset");
@@ -28492,14 +28501,14 @@ const PasswordResetButton = ({
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$c
+  store: store$d
 }, props, {
   value: window.Pelcro.helpers.getURLParameter("email"),
   disabled: true
 }));
 
 const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default.createElement(ConfirmPassword, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetView = props => {
@@ -28554,7 +28563,7 @@ const PasswordResetModal = ({
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$b = {
+const initialState$c = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -28563,10 +28572,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/createContext(initialState$b);
+const store$c = /*#__PURE__*/createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 
 const PasswordForgotContainer = ({
   style,
@@ -28644,21 +28653,21 @@ const PasswordForgotContainer = ({
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$b, {
+  }, /*#__PURE__*/React__default.createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
@@ -28674,7 +28683,7 @@ const PasswordForgotButton = ({
       emailError
     },
     dispatch
-  } = useContext(store$b);
+  } = useContext(store$c);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -28695,7 +28704,7 @@ const PasswordForgotButton = ({
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const PasswordForgotView = props => {
@@ -28749,7 +28758,7 @@ const PasswordForgotModal = ({
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$a = {
+const initialState$b = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -28758,10 +28767,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/createContext(initialState$a);
+const store$b = /*#__PURE__*/createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 
 const PasswordlessRequestContainer = ({
   style,
@@ -28839,21 +28848,21 @@ const PasswordlessRequestContainer = ({
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$a, {
+  }, /*#__PURE__*/React__default.createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
@@ -28869,7 +28878,7 @@ const PasswordlessRequestViewButton = ({
       emailError
     },
     dispatch
-  } = useContext(store$a);
+  } = useContext(store$b);
   const {
     t
   } = useTranslation("passwordlessRequest");
@@ -28890,7 +28899,7 @@ const PasswordlessRequestViewButton = ({
 };
 
 const PasswordlessRequestEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordlessRequestView = props => {
@@ -28934,7 +28943,7 @@ const PasswordlessRequestModal = ({
 };
 PasswordlessRequestModal.viewId = "passwordless-request";
 
-const initialState$9 = {
+const initialState$a = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -28948,10 +28957,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/createContext(initialState$9);
+const store$a = /*#__PURE__*/createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 const PasswordChangeContainer = ({
   style,
   className = "",
@@ -29103,21 +29112,21 @@ const PasswordChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$9, {
+  }, /*#__PURE__*/React__default.createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
@@ -29128,7 +29137,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = useContext(store$9);
+  } = useContext(store$a);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -29162,7 +29171,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = useContext(store$9);
+  } = useContext(store$a);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -29196,7 +29205,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = useContext(store$9);
+  } = useContext(store$a);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -29237,7 +29246,7 @@ const PasswordChangeButton = ({
       confirmNewPasswordError
     },
     dispatch
-  } = useContext(store$9);
+  } = useContext(store$a);
   const {
     t
   } = useTranslation("passwordChange");
@@ -29306,17 +29315,17 @@ const PasswordChangeModal = ({
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$8 = {
+const initialState$9 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/createContext(initialState$8);
+const store$9 = /*#__PURE__*/createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 
 const CartContainer = ({
   style,
@@ -29407,21 +29416,21 @@ const CartContainer = ({
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$8, {
+  }, /*#__PURE__*/React__default.createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -29460,7 +29469,7 @@ const CartSubmit = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$8);
+  } = useContext(store$9);
   const {
     t
   } = useTranslation("cart");
@@ -29494,7 +29503,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = useContext(store$8);
+  } = useContext(store$9);
   const {
     cartItems
   } = usePelcro();
@@ -29818,7 +29827,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$7 = {
+const initialState$8 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -29830,10 +29839,10 @@ const initialState$7 = {
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/createContext(initialState$7);
+const store$8 = /*#__PURE__*/createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 
 const GiftCreateContainer = ({
   style,
@@ -29937,21 +29946,21 @@ const GiftCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$7, {
+  }, /*#__PURE__*/React__default.createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -29965,7 +29974,7 @@ const GiftCreateSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = useContext(store$7);
+  } = useContext(store$8);
   const {
     t
   } = useTranslation("register");
@@ -29982,15 +29991,15 @@ const GiftCreateSubmitButton = ({
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$7
+  store: store$8
 }, props));
 
 const nowDate = new Date();
@@ -30005,7 +30014,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = useContext(store$7);
+  } = useContext(store$8);
 
   const handleInputChange = value => {
     dispatch({
@@ -30040,7 +30049,7 @@ function GiftCreateMessage(props) {
   const {
     dispatch,
     state
-  } = useContext(store$7);
+  } = useContext(store$8);
   const MAX_CHARS_COUNT = 200;
   const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
 
@@ -30170,7 +30179,7 @@ const GiftCreateModal = ({
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$6 = {
+const initialState$7 = {
   isSubmitting: false,
   giftCode: "",
   buttonDisabled: true,
@@ -30179,10 +30188,10 @@ const initialState$6 = {
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/createContext(initialState$6);
+const store$7 = /*#__PURE__*/createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 
 const GiftRedeemContainer = ({
   style,
@@ -30296,21 +30305,21 @@ const GiftRedeemContainer = ({
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$6, {
+  }, /*#__PURE__*/React__default.createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -30347,7 +30356,7 @@ function GiftCode({
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default.createElement(GiftCode, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftRedeemSubmitButton = ({
@@ -30361,7 +30370,7 @@ const GiftRedeemSubmitButton = ({
       disableSubmit,
       isSubmitting
     }
-  } = useContext(store$6);
+  } = useContext(store$7);
   const {
     t
   } = useTranslation("register");
@@ -30456,7 +30465,7 @@ const moveDefaultAddressToStart = addresses => {
   return [defaultAddress, ...addressesWithoutDefault];
 };
 
-const initialState$5 = {
+const initialState$6 = {
   addresses: [],
   selectedAddressId: null,
   isSubmitting: false,
@@ -30465,10 +30474,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/createContext(initialState$5);
+const store$6 = /*#__PURE__*/createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 
 const AddressSelectContainer = ({
   style,
@@ -30605,7 +30614,7 @@ const AddressSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   useEffect(() => {
     var _window$Pelcro$user$r;
 
@@ -30618,16 +30627,16 @@ const AddressSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$5, {
+  }, /*#__PURE__*/React__default.createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -30638,7 +30647,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = useContext(store$5);
+  } = useContext(store$6);
 
   const handleAddressSelect = event => {
     dispatch({
@@ -30682,7 +30691,7 @@ const AddressSelectSubmit = ({
       selectedAddressId,
       isSubmitting
     }
-  } = useContext(store$5);
+  } = useContext(store$6);
   const {
     t
   } = useTranslation("address");
@@ -30792,7 +30801,7 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
 
-const initialState$4 = {
+const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -30801,10 +30810,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/createContext(initialState$4);
+const store$5 = /*#__PURE__*/createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 
 const PaymentMethodSelectContainer = ({
   style,
@@ -30863,7 +30872,7 @@ const PaymentMethodSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   useEffect(() => {
     var _window$Pelcro$user$r3;
 
@@ -30876,16 +30885,16 @@ const PaymentMethodSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$4, {
+  }, /*#__PURE__*/React__default.createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -30899,7 +30908,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = useContext(store$4);
+  } = useContext(store$5);
 
   const handlePaymentMethodSelect = event => {
     dispatch({
@@ -30949,7 +30958,7 @@ const PaymentMethodSelectSubmit = ({
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = useContext(store$4);
+  } = useContext(store$5);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -31035,23 +31044,234 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+const initialState$4 = {
+  isOpen: false,
+  activeDashboardLink: null,
+  subscriptions: window.Pelcro.subscription.list(),
+  giftRecipients: (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.gift_recipients) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [],
+  disableSubmit: false,
+  addresses: []
+};
+const store$4 = /*#__PURE__*/createContext(initialState$4);
+const {
+  Provider: Provider$4
+} = store$4;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
+const DashboardContainer = ({
+  onClose,
+  style,
+  className = "",
+  children,
+  ...props
+}) => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  useEffect(() => {
+    var _ReactGA$event;
 
-    return target;
-  };
+    dispatch({
+      type: SET_IS_OPEN,
+      payload: true
+    });
+    window.Pelcro.insight.track("Modal Displayed", {
+      name: "dashboard"
+    });
+    ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+      category: "VIEWS",
+      action: "Dashboard Modal Viewed",
+      nonInteraction: true
+    });
+    const {
+      addresses
+    } = window.Pelcro.user.read();
+    if (addresses) dispatch({
+      type: SET_ADDRESSES,
+      payload: addresses
+    });
+    return () => {};
+  }, []);
+  /**
+   * 
+   * @param {*} payload 
+   * @param {*} dispatch 
+   */
 
-  return _extends$h.apply(this, arguments);
-}
+  const cancelSubscription = ({
+    subscription_id,
+    onSuccess,
+    onFailure
+  }, dispatch) => {
+    window.Pelcro.subscription.cancel({
+      auth_token: window.Pelcro.user.read().auth_token,
+      subscription_id: subscription_id
+    }, (err, res) => {
+      var _ReactGA$event2;
+
+      dispatch({
+        type: SET_DISABLESUBMIT,
+        payload: false
+      });
+
+      if (err) {
+        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+      }
+
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event2 = ReactGA.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Canceled",
+        nonInteraction: true
+      });
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+    });
+  };
+  /**
+   * 
+   * @param {*} payload 
+   * @param {*} dispatch 
+   */
+
+
+  const unSuspendSubscription = ({
+    subscription_id,
+    onSuccess,
+    onFailure
+  }, dispatch) => {
+    window.Pelcro.subscription.update({
+      auth_token: window.Pelcro.user.read().auth_token,
+      subscription_id: subscription_id,
+      suspend: 0
+    }, (err, res) => {
+      var _ReactGA$event3;
+
+      dispatch({
+        type: SET_DISABLESUBMIT,
+        payload: false
+      });
+
+      if (err) {
+        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+      }
+
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event3 = ReactGA.event) === null || _ReactGA$event3 === void 0 ? void 0 : _ReactGA$event3.call(ReactGA, {
+        category: "ACTIONS",
+        action: "UnSuspended",
+        nonInteraction: true
+      });
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+    });
+  };
+  /**
+   * 
+   * @param {*} payload 
+   * @param {*} dispatch 
+   */
+
+
+  const reactivateSubscription = ({
+    subscription_id,
+    onSuccess,
+    onFailure
+  }, dispatch) => {
+    window.Pelcro.subscription.reactivate({
+      auth_token: window.Pelcro.user.read().auth_token,
+      subscription_id: subscription_id
+    }, (err, res) => {
+      dispatch({
+        type: SET_DISABLESUBMIT,
+        payload: false
+      });
+      onClose();
+
+      if (err) {
+        onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        return notify.error(t("messages.subReactivation.error"));
+      }
+
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+      return notify.success(t("messages.subReactivation.success"));
+    });
+  };
+
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case SET_IS_OPEN:
+        return lib_7({ ...state,
+          isOpen: action.payload
+        });
+
+      case CLOSE_DASHBOARD:
+        return lib_7({ ...state,
+          isOpen: false,
+          activeDashboardLink: null
+        });
+
+      case SET_ACTIVE_DASHBOARD_LINK:
+        return lib_7({ ...state,
+          activeDashboardLink: action.payload
+        });
+
+      case SET_DISABLESUBMIT:
+        {
+          return lib_7({ ...state,
+            disableSubmit: action.payload
+          });
+        }
+
+      case CANCEL_SUBSCRIPTION:
+        return lib_5({ ...state,
+          disableSubmit: true
+        }, (state, dispatch) => cancelSubscription(action.payload, dispatch));
+
+      case UNSUSPEND_SUBSCRIPTION:
+        return lib_5({ ...state,
+          disableSubmit: true
+        }, (state, dispatch) => unSuspendSubscription(action.payload, dispatch));
+
+      case REACTIVATE_SUBSCRIPTION:
+        return lib_5({ ...state,
+          disableSubmit: true
+        }, (state, dispatch) => reactivateSubscription(action.payload, dispatch));
+
+      default:
+        return state;
+    }
+  }, initialState$4);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-dashboard-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider$4, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store: store$4,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(children, {
+    store: store$4
+  })));
+};
+
+function _extends$h() {
+  _extends$h = 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$h.apply(this, arguments);
+}
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -32147,8 +32367,9 @@ 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) {
+function SvgChevronRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$f({
+    className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -32157,18 +32378,139 @@ function SvgUser(props) {
     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"
+    d: "M9 5l7 7-7 7"
   })));
 }
 
+const Card = ({
+  children,
+  className = "",
+  title,
+  requestStates,
+  ...restProps
+}) => {
+  useTranslation("dashboard");
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `plc-bg-white plc-border-2 plc-p-6 plc-rounded plc-my-11 md:plc-my-20 ${className}`,
+    id: "plc-dashboard-card"
+  }, title && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-end plc-justify-between"
+  }, /*#__PURE__*/React__default.createElement("h3", {
+    className: "plc-font-medium plc-text-xl"
+  }, title), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.loading) && /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-blue-500"
+  }, "Loading..."), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.success) && /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-green-500"
+  }, "Saved"), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.failed) && /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-red-500"
+  }, "Failed")), /*#__PURE__*/React__default.createElement("hr", {
+    className: "plc-border-t-2 plc-my-4"
+  })), children);
+};
+
+const SavedItemsMenu = () => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const [userMetadata, setUserMetadata] = useState(window.Pelcro.user.read().metadata);
+  const userSavedItems = userMetadata ? Object.entries(userMetadata) // only get metadata related to saved items
+  .filter(([categoryTitle, value]) => categoryTitle.startsWith("metadata_saved_") && (value === null || value === void 0 ? void 0 : value.length)) // drop the "metadata_saved_" from the category title
+  .map(([categoryTitle, value]) => [categoryTitle.replace("metadata_saved_", ""), value]) : null;
+  return /*#__PURE__*/React__default.createElement(Card, {
+    id: "pelcro-dashboard-saved-menu",
+    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    title: t("labels.savedItems.label")
+  }, /*#__PURE__*/React__default.createElement(SavedItems, {
+    items: userSavedItems,
+    setItems: setUserMetadata
+  }));
+};
+const SavedItems = ({
+  items,
+  setItems
+}) => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const [isLoading, setLoading] = useState(false);
+  const {
+    isAuthenticated
+  } = usePelcro();
+
+  const removeItemFromMetadata = (category, title) => {
+    const user = window.Pelcro.user.read();
+    const oldValue = user.metadata[`metadata_saved_${category}`];
+    const newMetadataValue = oldValue.filter(metadata => !((metadata === null || metadata === void 0 ? void 0 : metadata.title) === title));
+
+    if (isAuthenticated()) {
+      setLoading(true);
+      window.Pelcro.user.saveToMetaData({
+        key: `saved_${category}`,
+        value: newMetadataValue,
+        auth_token: window.Pelcro.user.read().auth_token
+      }, (error, response) => {
+        var _response$data, _ReactGA$event;
+
+        setLoading(false);
+
+        if (error) {
+          return;
+        }
+
+        setItems(response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.metadata);
+        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+          category: "ACTIONS",
+          action: "Unsave/Unfollow",
+          label: title
+        });
+      });
+    }
+  };
+
+  return !(items !== null && items !== void 0 && items.length) ? /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: "2",
+    className: "plc-text-center plc-text-gray-500"
+  }, t("labels.savedItems.noSavedItems")))) : items.map(([categoryTitle, item]) => {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: categoryTitle
+    }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.map(item => {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: item.title,
+        className: `plc-py-2 plc-px-4 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-text-gray-900 plc-bg-white plc-border-b-2`
+      }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Link, {
+        className: "plc-text-gray-700 plc-no-underline",
+        href: item.link,
+        isButton: true,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-flex plc-items-center plc-py-2 plc-space-x-2 sm:plc-p-2"
+      }, (item === null || item === void 0 ? void 0 : item.image) && /*#__PURE__*/React__default.createElement("img", {
+        className: "plc-w-12 plc-h-12 pelcro-saved-item-image",
+        alt: `image of ${item.title}`,
+        src: item === null || item === void 0 ? void 0 : item.image
+      }), /*#__PURE__*/React__default.createElement("span", {
+        className: "plc-font-semibold"
+      }, item.title)))), /*#__PURE__*/React__default.createElement(Button, {
+        variant: "ghost",
+        type: "button",
+        className: "plc-text-gray-500 plc-rounded-2xl",
+        onClick: () => removeItemFromMetadata(categoryTitle, item.title)
+      }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
+        className: "plc-fill-current"
+      })));
+    })));
+  });
+};
+
 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) {
+function SvgRefresh(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$e({
+    className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -32176,7 +32518,7 @@ function SvgNewsletter(props) {
     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"
+    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"
   })));
 }
 
@@ -32184,18 +32526,16 @@ 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) {
+function SvgCalendar(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$d({
-    className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
+    className: "plc-h-4 plc-w-4 plc-mr-1",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
   }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+    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"
   })));
 }
 
@@ -32203,10 +32543,10 @@ 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) {
+function SvgPlus(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$c({
+    className: "plc-w-5 plc-h-5",
     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"
@@ -32214,480 +32554,179 @@ function SvgDocument(props) {
     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"
+    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
   })));
 }
 
-var _path$b;
+const AddNew = ({
+  title,
+  onClick
+}) => {
+  const handleClick = () => {
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  };
 
-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); }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mt-5 plc-relative plc-text-primary-500"
+  }, /*#__PURE__*/React__default.createElement("hr", {
+    className: "plc-absolute plc-border-t-2 plc-my-4 plc-top-1.5 plc-w-full"
+  }), /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleClick,
+    className: "plc-bg-white plc-flex plc-items-center plc-mx-auto plc-p-2 plc-relative focus-within:plc-outline-none"
+  }, /*#__PURE__*/React__default.createElement(SvgPlus, {
+    className: "plc-w-4 plc-h-4 plc-mr-1"
+  }), /*#__PURE__*/React__default.createElement("span", null, title))));
+};
 
-function SvgPaymentCard(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-  })));
-}
+const SubscriptionsMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const {
+    switchView
+  } = usePelcro();
 
-var _path$a, _path2;
+  const displayRedeem = () => {
+    return switchView("gift-redeem");
+  };
 
-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); }
+  return /*#__PURE__*/React__default.createElement(Card, {
+    id: "pelcro-dashboard-subscriptions-menu",
+    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    title: t("labels.subscriptions")
+  }, /*#__PURE__*/React__default.createElement("table", {
+    className: "plc-w-full plc-table-fixed pelcro-subscriptions-table plc-text-left"
+  }, /*#__PURE__*/React__default.createElement("thead", {
+    className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
+  }, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-hidden md:plc-table-cell plc-w-2/12"
+  }, t("labels.product")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-1/3 md:plc-w-3/12"
+  }, t("labels.plan")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-hidden md:plc-table-cell plc-w-2/12"
+  }, t("labels.price")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-1/3 md:plc-w-2/12"
+  }, t("labels.status.title")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-1/3 md:plc-w-2/12"
+  }, t("labels.actions")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-1/3 md:plc-w-1/12"
+  }))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
+    className: "plc-h-4"
+  })), /*#__PURE__*/React__default.createElement(Accordion, null, /*#__PURE__*/React__default.createElement(SubscriptionsItems, props))), /*#__PURE__*/React__default.createElement(AddNew, {
+    title: t("labels.addSubscription"),
+    onClick: () => props === null || props === void 0 ? void 0 : props.displayProductSelect({
+      isGift: false
+    })
+  }), /*#__PURE__*/React__default.createElement("table", {
+    className: "plc-w-full plc-table-fixed pelcro-subscriptions-table plc-text-left"
+  }, /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: "5",
+    className: "plc-p-1"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "ghost",
+    icon: /*#__PURE__*/React__default.createElement(SvgGift, {
+      className: "plc-w-4 plc-h-4 plc-mr-1"
+    }),
+    className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase plc-rounded-none hover:plc-bg-gray-100",
+    onClick: displayRedeem
+  }, t("labels.redeemGift")))))));
+};
+const SubscriptionsItems = ({
+  onClose,
+  setProductAndPlan,
+  setSubscriptionIdToRenew,
+  getSubscriptionStatus,
+  activeMenu,
+  toggleActiveMenu
+}) => {
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = useContext(store$4);
+  const {
+    t
+  } = useTranslation("dashboard");
+  const {
+    switchView,
+    setSubscriptionToCancel,
+    setSubscriptionToSuspend,
+    set
+  } = usePelcro();
+  const subs = getNonDonationSubs();
+  if (subs.length === 0) return null;
+  return subs.sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
+    var _sub$plan;
 
-function SvgLocationPin(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-  })));
-}
+    const isActive = activeMenu === sub.id; // Cancel button click handlers
 
-var _path$9;
+    const onCancelClick = () => {
+      const isImmediateCancelationEnabled = window.Pelcro.site.read().cancel_settings.status;
 
-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); }
+      if (isImmediateCancelationEnabled) {
+        setSubscriptionToCancel(sub.id);
+        return switchView("subscription-cancel");
+      }
 
-function SvgShopping(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-  })));
-}
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
 
-var _path$8;
+      switchView(null);
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      notify.confirm((onSuccess, onFailure) => {
+        dispatch({
+          type: CANCEL_SUBSCRIPTION,
+          payload: {
+            subscription_id: sub.id,
+            onSuccess,
+            onFailure
+          }
+        });
+      }, {
+        confirmMessage: t("messages.subCancellation.isSureToCancel"),
+        loadingMessage: t("messages.subCancellation.loading"),
+        successMessage: t("messages.subCancellation.success"),
+        errorMessage: t("messages.subCancellation.error")
+      }, {
+        closeButtonLabel: t("labels.subCancellation.goBack")
+      });
+    }; // Reactivate button click handlers
 
-function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 
-function SvgBookmark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
-  })));
-}
+    const onReactivateClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
 
-var _path$7;
+      dispatch({
+        type: REACTIVATE_SUBSCRIPTION,
+        payload: {
+          subscription_id: sub.id
+        }
+      });
+    }; // Renew click
 
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 
-function SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
-    className: "plc-w-5 plc-h-5",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
-  })));
-}
+    const onRenewClick = () => {
+      const product_id = sub.plan.product.id;
+      const plan_id = sub.plan.id;
+      const product = window.Pelcro.product.getById(product_id);
+      const plan = window.Pelcro.plan.getById(plan_id);
+      setProductAndPlan(product, plan);
+      setSubscriptionIdToRenew(sub.id);
+      switchView("plan-select");
+    }; // Manage members click
 
-var _path$6;
 
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
-
-function SvgKey(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
-    clipRule: "evenodd"
-  })));
-}
-
-var _path$5;
-
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-
-function SvgDonate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
-    width: 24,
-    height: 24,
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
-    d: "M4 21h9.62a3.995 3.995 0 003.037-1.397l5.102-5.952a1 1 0 00-.442-1.6l-1.968-.656a3.043 3.043 0 00-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 009.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 00.442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 00.11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 01-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 001.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0016.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0111.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 01.701.292c.189.189.293.44.293.707z"
-  })));
-}
-
-var _path$4;
-
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-
-function SvgMemberships(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    strokeWidth: 1.5,
-    stroke: "currentColor",
-    width: 24,
-    height: 24
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"
-  })));
-}
-
-var _path$3;
-
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
-function SvgQrcode(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 682.667,
-    height: 682.667,
-    viewBox: "0 0 512 512"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    d: "M93.5 62.4c-15.7 3.9-28 16.6-31.4 32.4-.7 3.3-1.1 17.2-1.1 36.4 0 29.1.1 31.4 2 35.3 5.3 11 21.2 11.1 26.4.1 1.4-2.9 1.6-7.9 1.6-34.6 0-34.4.1-35.3 6.3-39 3-1.9 5.2-2 34.5-2 26.9 0 31.9-.2 34.8-1.6 11-5.2 10.9-21.1-.1-26.4-3.9-1.9-6.1-2-36.1-1.9-21.8 0-33.5.5-36.9 1.3zM345.4 63c-10.9 5.4-10.9 21.2 0 26.4 2.9 1.4 7.9 1.6 34.8 1.6 29.3 0 31.5.1 34.5 2 6.2 3.7 6.3 4.6 6.3 39 0 26.7.2 31.7 1.6 34.6 5.2 11 21.1 10.9 26.4-.1 1.9-3.9 2-6.2 2-35.3 0-19.2-.4-33.1-1.1-36.4-3.5-16.2-16.5-29.2-32.7-32.7-3.3-.7-17.2-1.1-36.5-1.1-29.3 0-31.5.1-35.3 2zM146 128.9c-6.9 2.1-12.1 6.5-15.6 13.1-1.8 3.2-1.9 6.3-1.9 38.5 0 34.2 0 35.1 2.2 39.1 2.8 5.3 9.1 10.7 14.2 12.2 2.5.8 14.4 1.2 35.8 1.2 36.3 0 38.3-.3 45.2-7.2 6.8-6.9 7.1-8.9 7.1-45.1 0-22.2-.4-33.2-1.2-36.1-1.8-6-10-13.9-16-15.4-5.3-1.3-65.5-1.6-69.8-.3zm57 51.6V203h-45v-45h45v22.5zM297 128.9c-8 2.5-14.9 9.2-16.9 16.4-.9 2.9-1.1 14.3-.9 37.7.3 37.2.2 36.2 7.4 43.3 6.6 6.4 8.8 6.7 45 6.7 35.6 0 38-.3 44.2-6.3 1.9-1.8 4.3-5 5.5-7.2 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-2.5-4.7-6.4-8.5-11.3-11.1-3.2-1.7-6.4-1.9-37-2.1-18.4-.1-34.6.2-36 .6zm57 51.6V203h-45v-45h45v22.5zM144.1 280.3c-4.8 1.8-10.8 7.2-13.4 12-2.2 4.1-2.2 4.9-2.2 39.2 0 34 .1 35.1 2.2 39 2.5 4.7 6.4 8.5 11.3 11.1 3.2 1.7 6.6 1.9 35.5 2.2 38.9.4 40.7.2 48-7.2 3.2-3.2 5.5-6.6 6.3-9.2.8-2.9 1.2-13.9 1.2-36.1 0-35.8-.4-38.3-6.6-44.7-7-7.2-6-7.1-44.4-7.3-25.4-.1-35.4.1-37.9 1zm58.9 51.2V354h-45v-45h45v22.5zM294.8 280.4c-6.8 2.4-12.9 8.9-14.8 15.7-1.5 5-1.3 66.2.2 71 1.5 5.1 6.9 11.4 12.2 14.2 4 2.2 4.9 2.2 39.1 2.2 32.2 0 35.3-.1 38.5-1.9 4.9-2.6 8.8-6.4 11.3-11.1 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-3-5.6-8-10.1-13.2-12-5.9-2-67.5-2.2-73.3-.1zm59.2 51.1V354h-45v-45h45v22.5zM68.7 339.2c-2.2 1.3-4.5 3.8-5.7 6.3-1.9 3.9-2 6.2-2 35.3 0 19.2.4 33.1 1.1 36.4 3.4 16.1 16.6 29.3 32.7 32.7 3.3.7 17.2 1.1 36.4 1.1 29.1 0 31.4-.1 35.3-2 11-5.3 11.1-21.2.1-26.4-2.9-1.4-7.9-1.6-34.6-1.6-34.4 0-35.3-.1-39-6.3-1.9-3-2-5.2-2-34.5 0-26.9-.2-31.9-1.6-34.8-3.6-7.5-13.5-10.5-20.7-6.2zM429.2 338.7c-1.8.9-4.3 3-5.5 4.7-2.1 3-2.2 4-2.7 36.1-.5 35.8-.6 36.1-6.3 39.5-3 1.9-5.3 2-34.5 2-34.5 0-36.1.2-40.2 6-5.4 7.5-2.8 18 5.5 22 3.9 1.9 6.2 2 35.3 2 19.2 0 33.1-.4 36.4-1.1 16.2-3.5 29.2-16.5 32.7-32.7.7-3.3 1.1-17.2 1.1-36.4 0-29.1-.1-31.4-2-35.3-3.6-7.4-12.5-10.4-19.8-6.8z"
-  })));
-}
-
-var _path$2;
-
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
-function SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    className: "plc-w-6 plc-h-6",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M9 5l7 7-7 7"
-  })));
-}
-
-const Card = ({
-  children,
-  className = "",
-  title,
-  requestStates,
-  ...restProps
-}) => {
-  useTranslation("dashboard");
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `plc-bg-white plc-border-2 plc-p-6 plc-rounded plc-my-11 md:plc-my-20 ${className}`,
-    id: "plc-dashboard-card"
-  }, title && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-items-end plc-justify-between"
-  }, /*#__PURE__*/React__default.createElement("h3", {
-    className: "plc-font-medium plc-text-xl"
-  }, title), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.loading) && /*#__PURE__*/React__default.createElement("span", {
-    className: "plc-text-blue-500"
-  }, "Loading..."), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.success) && /*#__PURE__*/React__default.createElement("span", {
-    className: "plc-text-green-500"
-  }, "Saved"), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.failed) && /*#__PURE__*/React__default.createElement("span", {
-    className: "plc-text-red-500"
-  }, "Failed")), /*#__PURE__*/React__default.createElement("hr", {
-    className: "plc-border-t-2 plc-my-4"
-  })), children);
-};
-
-const SavedItemsMenu = () => {
-  const {
-    t
-  } = useTranslation("dashboard");
-  const [userMetadata, setUserMetadata] = useState(window.Pelcro.user.read().metadata);
-  const userSavedItems = userMetadata ? Object.entries(userMetadata) // only get metadata related to saved items
-  .filter(([categoryTitle, value]) => categoryTitle.startsWith("metadata_saved_") && (value === null || value === void 0 ? void 0 : value.length)) // drop the "metadata_saved_" from the category title
-  .map(([categoryTitle, value]) => [categoryTitle.replace("metadata_saved_", ""), value]) : null;
-  return /*#__PURE__*/React__default.createElement(Card, {
-    id: "pelcro-dashboard-saved-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
-    title: t("labels.savedItems.label")
-  }, /*#__PURE__*/React__default.createElement(SavedItems, {
-    items: userSavedItems,
-    setItems: setUserMetadata
-  }));
-};
-const SavedItems = ({
-  items,
-  setItems
-}) => {
-  const {
-    t
-  } = useTranslation("dashboard");
-  const [isLoading, setLoading] = useState(false);
-  const {
-    isAuthenticated
-  } = usePelcro();
-
-  const removeItemFromMetadata = (category, title) => {
-    const user = window.Pelcro.user.read();
-    const oldValue = user.metadata[`metadata_saved_${category}`];
-    const newMetadataValue = oldValue.filter(metadata => !((metadata === null || metadata === void 0 ? void 0 : metadata.title) === title));
-
-    if (isAuthenticated()) {
-      setLoading(true);
-      window.Pelcro.user.saveToMetaData({
-        key: `saved_${category}`,
-        value: newMetadataValue,
-        auth_token: window.Pelcro.user.read().auth_token
-      }, (error, response) => {
-        var _response$data, _ReactGA$event;
-
-        setLoading(false);
-
-        if (error) {
-          return;
-        }
-
-        setItems(response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.metadata);
-        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
-          category: "ACTIONS",
-          action: "Unsave/Unfollow",
-          label: title
-        });
-      });
-    }
-  };
-
-  return !(items !== null && items !== void 0 && items.length) ? /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    colSpan: "2",
-    className: "plc-text-center plc-text-gray-500"
-  }, t("labels.savedItems.noSavedItems")))) : items.map(([categoryTitle, item]) => {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: categoryTitle
-    }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.map(item => {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: item.title,
-        className: `plc-py-2 plc-px-4 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-text-gray-900 plc-bg-white plc-border-b-2`
-      }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Link, {
-        className: "plc-text-gray-700 plc-no-underline",
-        href: item.link,
-        isButton: true,
-        target: "_blank",
-        rel: "noopener noreferrer"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "plc-flex plc-items-center plc-py-2 plc-space-x-2 sm:plc-p-2"
-      }, (item === null || item === void 0 ? void 0 : item.image) && /*#__PURE__*/React__default.createElement("img", {
-        className: "plc-w-12 plc-h-12 pelcro-saved-item-image",
-        alt: `image of ${item.title}`,
-        src: item === null || item === void 0 ? void 0 : item.image
-      }), /*#__PURE__*/React__default.createElement("span", {
-        className: "plc-font-semibold"
-      }, item.title)))), /*#__PURE__*/React__default.createElement(Button, {
-        variant: "ghost",
-        type: "button",
-        className: "plc-text-gray-500 plc-rounded-2xl",
-        onClick: () => removeItemFromMetadata(categoryTitle, item.title)
-      }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
-        className: "plc-fill-current"
-      })));
-    })));
-  });
-};
-
-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 SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-4 plc-w-4 plc-mr-1",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    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"
-  })));
-}
-
-const AddNew = ({
-  title,
-  onClick
-}) => {
-  const handleClick = () => {
-    onClick === null || onClick === void 0 ? void 0 : onClick();
-  };
-
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-mt-5 plc-relative plc-text-primary-500"
-  }, /*#__PURE__*/React__default.createElement("hr", {
-    className: "plc-absolute plc-border-t-2 plc-my-4 plc-top-1.5 plc-w-full"
-  }), /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleClick,
-    className: "plc-bg-white plc-flex plc-items-center plc-mx-auto plc-p-2 plc-relative focus-within:plc-outline-none"
-  }, /*#__PURE__*/React__default.createElement(SvgPlus, {
-    className: "plc-w-4 plc-h-4 plc-mr-1"
-  }), /*#__PURE__*/React__default.createElement("span", null, title))));
-};
-
-const SubscriptionsMenu = props => {
-  const {
-    t
-  } = useTranslation("dashboard");
-  return /*#__PURE__*/React__default.createElement(Card, {
-    id: "pelcro-dashboard-subscriptions-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
-    title: t("labels.subscriptions")
-  }, /*#__PURE__*/React__default.createElement("table", {
-    className: "plc-w-full plc-table-fixed pelcro-subscriptions-table plc-text-left"
-  }, /*#__PURE__*/React__default.createElement("thead", {
-    className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
-  }, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-hidden md:plc-table-cell plc-w-2/12"
-  }, t("labels.product")), /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-w-1/3 md:plc-w-3/12"
-  }, t("labels.plan")), /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-hidden md:plc-table-cell plc-w-2/12"
-  }, t("labels.price")), /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-w-1/3 md:plc-w-2/12"
-  }, t("labels.status.title")), /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-w-1/3 md:plc-w-2/12"
-  }, t("labels.actions")), /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-w-1/3 md:plc-w-1/12"
-  }))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
-    className: "plc-h-4"
-  })), /*#__PURE__*/React__default.createElement(Accordion, null, /*#__PURE__*/React__default.createElement(SubscriptionsItems, props))), /*#__PURE__*/React__default.createElement(AddNew, {
-    title: t("labels.addSubscription"),
-    onClick: () => props === null || props === void 0 ? void 0 : props.displayProductSelect({
-      isGift: false
-    })
-  }), /*#__PURE__*/React__default.createElement("table", {
-    className: "plc-w-full plc-table-fixed pelcro-subscriptions-table plc-text-left"
-  }, /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    colSpan: "5",
-    className: "plc-p-1"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    variant: "ghost",
-    icon: /*#__PURE__*/React__default.createElement(SvgGift, {
-      className: "plc-w-4 plc-h-4 plc-mr-1"
-    }),
-    className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase plc-rounded-none hover:plc-bg-gray-100",
-    onClick: props.displayRedeem
-  }, t("labels.redeemGift")))))));
-};
-const SubscriptionsItems = ({
-  onClose,
-  cancelSubscription,
-  unSuspendSubscription,
-  reactivateSubscription,
-  setProductAndPlan,
-  setSubscriptionIdToRenew,
-  setView,
-  getSubscriptionStatus,
-  disableSubmit,
-  activeMenu,
-  toggleActiveMenu
-}) => {
-  const {
-    t
-  } = useTranslation("dashboard");
-  const {
-    switchView,
-    setSubscriptionToCancel,
-    setSubscriptionToSuspend,
-    set
-  } = usePelcro();
-  const subs = getNonDonationSubs();
-  if (subs.length === 0) return null;
-  return subs.sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
-    var _sub$plan;
-
-    const isActive = activeMenu === sub.id; // Cancel button click handlers
-
-    const onCancelClick = () => {
-      const isImmediateCancelationEnabled = window.Pelcro.site.read().cancel_settings.status;
-
-      if (isImmediateCancelationEnabled) {
-        setSubscriptionToCancel(sub.id);
-        return switchView("subscription-cancel");
-      }
-
-      if (userMustVerifyEmail()) {
-        return switchView("email-verify");
-      }
-
-      switchView(null);
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-      notify.confirm((onSuccess, onFailure) => {
-        cancelSubscription(sub.id, onSuccess, onFailure);
-      }, {
-        confirmMessage: t("messages.subCancellation.isSureToCancel"),
-        loadingMessage: t("messages.subCancellation.loading"),
-        successMessage: t("messages.subCancellation.success"),
-        errorMessage: t("messages.subCancellation.error")
-      }, {
-        closeButtonLabel: t("labels.subCancellation.goBack")
-      });
-    }; // Reactivate button click handlers
-
-
-    const onReactivateClick = () => {
-      if (userMustVerifyEmail()) {
-        return switchView("email-verify");
-      }
-
-      reactivateSubscription(sub.id);
-    }; // Renew click
-
-
-    const onRenewClick = () => {
-      const product_id = sub.plan.product.id;
-      const plan_id = sub.plan.id;
-      const product = window.Pelcro.product.getById(product_id);
-      const plan = window.Pelcro.plan.getById(plan_id);
-      setProductAndPlan(product, plan);
-      setSubscriptionIdToRenew(sub.id);
-      setView("plan-select");
-    }; // Manage members click
-
-
-    const onManageMembersClick = () => {
-      const subscriptionToManageMembers = sub;
-      set({
-        subscriptionToManageMembers
-      });
-      setView("manage-members");
-    }; // Suspend click
+    const onManageMembersClick = () => {
+      const subscriptionToManageMembers = sub;
+      set({
+        subscriptionToManageMembers
+      });
+      switchView("manage-members");
+    }; // Suspend click
 
 
     const onSuspendClick = () => {
@@ -32696,7 +32735,7 @@ const SubscriptionsItems = ({
       }
 
       setSubscriptionToSuspend(sub.id);
-      return setView("subscription-suspend");
+      return switchView("subscription-suspend");
     }; // UnSuspend click
 
 
@@ -32707,7 +32746,14 @@ const SubscriptionsItems = ({
 
       onClose === null || onClose === void 0 ? void 0 : onClose();
       notify.confirm((onSuccess, onFailure) => {
-        unSuspendSubscription(sub.id, onSuccess, onFailure);
+        dispatch({
+          type: UNSUSPEND_SUBSCRIPTION,
+          payload: {
+            subscription_id: sub.id,
+            onSuccess,
+            onFailure
+          }
+        });
       }, {
         confirmMessage: t("messages.subUnSuspend.isSureToUnSuspend"),
         loadingMessage: t("messages.subUnSuspend.loading"),
@@ -33038,9 +33084,6 @@ const OrderItems = ({
 };
 
 const DonationsMenu = ({
-  reactivateSubscription,
-  disableSubmit,
-  cancelSubscription,
   getSubscriptionStatus,
   onClose
 }) => {
@@ -33051,6 +33094,12 @@ const DonationsMenu = ({
     switchView,
     setSubscriptionToCancel
   } = usePelcro();
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = useContext(store$4);
   const subscriptions = getDonationSubs().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
     // Cancel button click handlers
     const onCancelClick = () => {
@@ -33068,7 +33117,14 @@ const DonationsMenu = ({
       switchView(null);
       onClose === null || onClose === void 0 ? void 0 : onClose();
       notify.confirm((onSuccess, onFailure) => {
-        cancelSubscription(sub.id, onSuccess, onFailure);
+        dispatch({
+          type: CANCEL_SUBSCRIPTION,
+          payload: {
+            subscription_id: sub.id,
+            onSuccess,
+            onFailure
+          }
+        });
       }, {
         confirmMessage: t("messages.subCancellation.isSureToCancel"),
         loadingMessage: t("messages.subCancellation.loading"),
@@ -33085,7 +33141,12 @@ const DonationsMenu = ({
         return switchView("email-verify");
       }
 
-      reactivateSubscription(sub.id);
+      dispatch({
+        type: REACTIVATE_SUBSCRIPTION,
+        payload: {
+          subscription_id: sub.id
+        }
+      });
     };
 
     return /*#__PURE__*/React__default.createElement("tr", {
@@ -33155,6 +33216,25 @@ function formatStartDate(date) {
   return new Intl.DateTimeFormat("en-CA").format(startDate);
 }
 
+var _path$b;
+
+function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+
+function SvgDocument(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-6 plc-w-6 plc-mr-2",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+  })));
+}
+
 const InvoicesMenu = props => {
   const {
     t
@@ -33452,8 +33532,16 @@ const GiftsMenu = props => {
   const {
     t
   } = useTranslation("dashboard");
+  const {
+    switchView,
+    set
+  } = usePelcro();
   const giftRecipients = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.gift_recipients) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
 
+  const setIsRenewingGift = isRenewingGift => set({
+    isRenewingGift
+  });
+
   const renderGiftRecipients = ({
     disableSubmit
   }) => {
@@ -33470,8 +33558,8 @@ const GiftsMenu = props => {
         const plan = window.Pelcro.plan.getById(planId);
         props === null || props === void 0 ? void 0 : props.setProductAndPlan(product, plan);
         props === null || props === void 0 ? void 0 : props.setSubscriptionIdToRenew(recipient.id);
-        props === null || props === void 0 ? void 0 : props.setIsRenewingGift(true);
-        props === null || props === void 0 ? void 0 : props.setView("plan-select");
+        setIsRenewingGift(true);
+        switchView("plan-select");
       };
 
       return /*#__PURE__*/React__default.createElement("tr", {
@@ -33540,11 +33628,28 @@ const AddressesMenu = props => {
   const {
     t
   } = useTranslation("dashboard");
+  const {
+    switchView,
+    set
+  } = usePelcro();
   const [requestStates, setRequestStates] = useState({
     loading: false,
     success: false,
     failed: false
   });
+
+  const displayAddressCreate = () => {
+    return switchView("address-create");
+  };
+
+  const displayAddressEdit = e => {
+    const address = e.currentTarget.dataset.key;
+    set({
+      addressIdToEdit: address
+    });
+    return switchView("address-edit");
+  };
+
   return /*#__PURE__*/React__default.createElement(Card, {
     id: "pelcro-dashboard-addresses-menu",
     className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
@@ -33553,10 +33658,10 @@ const AddressesMenu = props => {
   }, /*#__PURE__*/React__default.createElement(AddressesItems, {
     requestStates: requestStates,
     setRequestStates: setRequestStates,
-    displayAddressEdit: props === null || props === void 0 ? void 0 : props.displayAddressEdit
+    displayAddressEdit: displayAddressEdit
   }), /*#__PURE__*/React__default.createElement(AddNew, {
     title: t("labels.addAddress"),
-    onClick: () => props === null || props === void 0 ? void 0 : props.displayAddressCreate()
+    onClick: displayAddressCreate
   }));
 };
 
@@ -33610,7 +33715,23 @@ const AddressesItems = props => {
     onClick: props === null || props === void 0 ? void 0 : props.displayAddressEdit
   })));
 };
-
+
+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;
 
@@ -33653,22 +33774,54 @@ const getPaymentCardIcon = name => {
     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 hasInvoices = () => {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  return invoices.length > 0;
+};
+const showNewsletters = () => {
+  var _ref, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$uiSett2;
+
+  const showNewslettersUiSettings = (_ref = ((_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$uiSett2 = _window$Pelcro$uiSett.newsletters) === null || _window$Pelcro$uiSett2 === void 0 ? void 0 : _window$Pelcro$uiSett2.length) > 0) !== null && _ref !== void 0 ? _ref : false;
+  return showNewslettersUiSettings;
+};
+const hasDonationSubs = () => {
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const canceledDonations = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  return donations.length > 0 || canceledDonations.length > 0;
+};
+const hasActiveMemberships = () => {
+  var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+
+  return (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read().memberships) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.some(membership => membership.status === "active" && membership.subscription.ended_at === null)) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : false;
+};
 
 const PaymentCardsMenu = props => {
   const {
     t
   } = useTranslation("dashboard");
+  const {
+    switchView
+  } = usePelcro();
   const source = window.Pelcro.user.read().source;
+
+  const displaySourceCreate = () => {
+    return switchView("payment-method-update");
+  };
+
   return /*#__PURE__*/React__default.createElement(Card, {
     id: "pelcro-dashboard-payment-menu",
     className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
     title: t("labels.paymentSource")
   }, source ? /*#__PURE__*/React__default.createElement(PaymentCardsItems, {
-    displaySourceCreate: props === null || props === void 0 ? void 0 : props.displaySourceCreate,
+    displaySourceCreate: displaySourceCreate,
     source: source
   }) : /*#__PURE__*/React__default.createElement(AddNew, {
     title: t("labels.addCard"),
-    onClick: () => props === null || props === void 0 ? void 0 : props.displaySourceCreate()
+    onClick: displaySourceCreate
   }));
 };
 
@@ -35274,652 +35427,928 @@ const NewsLettersItems = ({
   });
 };
 
-const PasswordChangeMenu = () => {
+const PasswordChangeMenu = () => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  return /*#__PURE__*/React__default.createElement(Card, {
+    id: "pelcro-dashboard-profile-menu",
+    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    title: t("labels.changePassword")
+  }, /*#__PURE__*/React__default.createElement(PasswordChangeView, null));
+};
+
+const DashboardContent = props => {
+  var _window$Pelcro$user$r, _window$Pelcro, _window$Pelcro$uiSett, _props$children;
+
+  const {
+    state: {
+      isOpen,
+      activeDashboardLink,
+      disableSubmit
+    },
+    dispatch
+  } = useContext(store$4);
+  const {
+    switchView,
+    set,
+    logout
+  } = usePelcro();
+  const {
+    t
+  } = useTranslation("dashboard");
+  const menuRef = useRef(null);
+  const user = window.Pelcro.user.read();
+  const userHasName = user.first_name || user.last_name;
+  const profilePicture = (_window$Pelcro$user$r = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : userSolidIcon;
+  const newsletters = (_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.newsletters;
+  Array.isArray(newsletters) && newsletters.length > 0;
+
+  const initializeHideMenuHandler = () => {
+    document.addEventListener("click", hideMenuIfClickedOutside);
+  };
+
+  const hideMenuIfClickedOutside = event => {
+    const dashboardSubmenus = document.getElementById("pelcro-view-dashboard-submenus");
+    const didClickOutsideMenu = isOpen && menuRef.current && !menuRef.current.contains(event.target) && !(dashboardSubmenus !== null && dashboardSubmenus !== void 0 && dashboardSubmenus.contains(event.target));
+
+    if (didClickOutsideMenu) {
+      dispatch({
+        type: CLOSE_DASHBOARD
+      });
+    }
+  };
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  const displayProfilePicChange = () => {
+    return switchView("profile-picture");
+  };
+
+  const setProductAndPlan = (product, plan, isGift) => {
+    set({
+      product,
+      plan,
+      isGift
+    });
+  };
+
+  const displayProductSelect = ({
+    isGift
+  }) => {
+    if (isGift) {
+      setProductAndPlan(null, null, true);
+    }
+
+    return switchView("plan-select");
+  };
+
+  const getSubscriptionStatusText = subscription => {
+    if (subscription.status === "canceled") {
+      const cancelDate = new Date(subscription.canceled_at);
+      const formattedCancelDate = new Intl.DateTimeFormat("en-CA").format(cancelDate);
+      return `${t("labels.canceledOn")} ${formattedCancelDate}`;
+    }
+
+    if (subscription.status === "incomplete") {
+      return `${t("labels.status.incomplete")}`;
+    }
+
+    if (subscription.status === "extended") {
+      // DateTime from BE is missing 3 zeros so we add them before instancing a date
+      const expiryDate = new Date(Number(`${subscription.end_date}000`));
+      const formattedExpiryDate = new Intl.DateTimeFormat("en-CA").format(expiryDate);
+      return `${t("labels.until")} ${formattedExpiryDate}`;
+    }
+
+    if (subscription.cancel_at_period_end) {
+      // DateTime from BE is missing 3 zeros so we add them before instancing a date
+      const expiryDate = new Date(Number(`${subscription.expires_at}000`));
+      const formattedExpiryDate = new Intl.DateTimeFormat("en-CA").format(expiryDate);
+      return `${t("labels.expiresOn")} ${formattedExpiryDate}`;
+    }
+
+    const renewDate = new Date(Number(`${subscription.renews_at}000`));
+    const formattedRenewDate = new Intl.DateTimeFormat("en-CA").format(renewDate);
+    return `${t("labels.renewsOn")} ${formattedRenewDate}`;
+  };
+
+  const getSubscriptionStatus = sub => {
+    const isSubscriptionEndingSoon = sub => {
+      const weekFromNow = new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
+      const endingAt = new Date(sub.expires_at * 1000).getTime();
+      return weekFromNow > endingAt && sub.cancel_at_period_end;
+    };
+
+    const isSubscriptionInTrial = sub => {
+      if (!sub.trial_end) {
+        return;
+      }
+
+      const now = new Date().getTime();
+      const trialEndDate = new Date(sub.trial_end).getTime();
+      return now < trialEndDate;
+    };
+
+    if (isSubscriptionEndingSoon(sub)) {
+      return {
+        title: t("labels.status.endingSoon"),
+        content: getSubscriptionStatusText(sub),
+        textColor: "plc-text-orange-700",
+        bgColor: "plc-bg-orange-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
+      };
+    }
+
+    if (isSubscriptionInTrial(sub)) {
+      return {
+        title: t("labels.status.inTrial"),
+        content: getSubscriptionStatusText(sub),
+        textColor: "plc-text-yellow-700",
+        bgColor: "plc-bg-yellow-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
+      };
+    }
+
+    if (sub.status === "incomplete") {
+      return {
+        title: t("labels.status.incomplete"),
+        content: getSubscriptionStatusText(sub),
+        textColor: "plc-text-orange-700",
+        bgColor: "plc-bg-orange-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
+      };
+    }
+
+    if (sub.status === "canceled") {
+      return {
+        title: t("labels.status.canceled"),
+        content: getSubscriptionStatusText(sub),
+        textColor: "plc-text-red-700",
+        bgColor: "plc-bg-red-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
+      };
+    }
+
+    return {
+      title: t("labels.status.active"),
+      content: getSubscriptionStatusText(sub),
+      textColor: "plc-text-green-700",
+      bgColor: "plc-bg-green-100",
+      icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
+    };
+  };
+
+  const setSubscriptionIdToRenew = subscriptionIdToRenew => {
+    set({
+      subscriptionIdToRenew
+    });
+  };
+
+  const closeDashboard = () => {
+    dispatch({
+      type: CLOSE_DASHBOARD
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("click", hideMenuIfClickedOutside);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Transition, {
+    className: "plc-fixed plc-inset-y-0 plc-left-0 plc-h-full lg:plc-w-3/12 plc-w-full plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
+    show: isOpen,
+    enter: "plc-transform plc-transition plc-duration-500",
+    enterFrom: "plc--translate-x-full",
+    enterTo: "plc-translate-x-0",
+    afterEnter: initializeHideMenuHandler,
+    leave: "plc-transform plc-transition plc-duration-500",
+    leaveFrom: "plc-translate-x-0",
+    leaveTo: "plc--translate-x-full",
+    afterLeave: props === null || props === void 0 ? void 0 : props.onClose
+  }, /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-view-dashboard",
+    ref: menuRef
+  }, /*#__PURE__*/React__default.createElement("header", {
+    className: "plc-bg-gray-200 plc-flex plc-py-5"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-center"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-justify-center plc-ml-3 sm:plc-ml-6 plc-flex-shrink-0"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-relative plc-flex-shrink-0"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    className: "pelcro-user-profile-picture plc-bg-gray-300 plc-cursor-pointer plc-h-10 plc-rounded-md plc-w-10",
+    src: profilePicture,
+    alt: "profile picture",
+    onClick: displayProfilePicChange
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-col plc-justify-between plc-flex-grow plc-w-56 plc-ml-4 plc-break-words sm:plc-w-auto"
+  }, userHasName && /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-font-bold plc-break-all"
+  }, user.first_name, " ", user.last_name), /*#__PURE__*/React__default.createElement("p", {
+    className: `plc-m-0 plc-text-sm plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-lg plc-font-bold plc-mt-auto"}`
+  }, user.email)), /*#__PURE__*/React__default.createElement("div", {
+    className: "lg:plc-hidden"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "ghost",
+    type: "button",
+    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-10",
+    onClick: closeDashboard
+  }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
+    className: "plc-fill-current"
+  }))))), /*#__PURE__*/React__default.createElement("section", {
+    className: "plc-mt-6 plc-shadow-sm"
+  }, props !== null && props !== void 0 && (_props$children = props.children) !== null && _props$children !== void 0 && _props$children.length ? props === null || props === void 0 ? void 0 : props.children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store: store$4,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(props === null || props === void 0 ? void 0 : props.children, {
+    store: store$4
+  })), /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.LOGOUT,
+    icon: /*#__PURE__*/React__default.createElement(SvgExit, null),
+    title: t("labels.logout"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  }))), activeDashboardLink && isOpen && /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-view-dashboard-submenus",
+    className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full lg:plc-w-9/12 plc-w-full plc-bg-gray-100 plc-z-max plc-overflow-auto"
+  }, activeDashboardLink === SUB_MENUS.PROFILE && /*#__PURE__*/React__default.createElement(ProfileMenu, null), activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default.createElement(QRCodeMenu, null), activeDashboardLink === SUB_MENUS.PASSWORDCHANGE && /*#__PURE__*/React__default.createElement(PasswordChangeMenu, null), activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default.createElement(SavedItemsMenu, null), activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default.createElement(PaymentCardsMenu, null), activeDashboardLink === SUB_MENUS.ADDRESSES && /*#__PURE__*/React__default.createElement(AddressesMenu, null), activeDashboardLink === SUB_MENUS.SUBSCRIPTIONS && /*#__PURE__*/React__default.createElement(SubscriptionsMenu, {
+    displayProductSelect: displayProductSelect,
+    setProductAndPlan: setProductAndPlan,
+    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.MEMBERSHIPS && /*#__PURE__*/React__default.createElement(MembershipsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.NEWSLETTERS && /*#__PURE__*/React__default.createElement(NewslettersMenu, null), activeDashboardLink === SUB_MENUS.DONATIONS && /*#__PURE__*/React__default.createElement(DonationsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus
+  }), activeDashboardLink === SUB_MENUS.GIFTS && /*#__PURE__*/React__default.createElement(GiftsMenu, {
+    getSubscriptionStatus: getSubscriptionStatus,
+    displayProductSelect: displayProductSelect,
+    setProductAndPlan: setProductAndPlan,
+    setSubscriptionIdToRenew: setSubscriptionIdToRenew,
+    disableSubmit: disableSubmit
+  }), activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default.createElement(OrdersMenu, null), activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default.createElement(InvoicesMenu, null), activeDashboardLink === SUB_MENUS.LOGOUT && logout(), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "ghost",
+    type: "button",
+    className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 plc-right-2 md:plc-top-5 md:plc-right-10",
+    onClick: closeDashboard
+  }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
+    className: "plc-fill-current"
+  }))));
+};
+
+const DashboardHeading = ({
+  title
+}) => {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && /*#__PURE__*/React__default.createElement("header", {
+    className: "plc-pl-4 plc-my-2 sm:plc-pl-8"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
+  }, title)));
+};
+
+var _path$a;
+
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+
+function SvgUser(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+  })));
+}
+
+const DashboardProfile = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.PROFILE,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgUser, {
+      className: "plc-w-6 plc-h-6 plc-mr-2"
+    }),
+    title: title !== null && title !== void 0 ? title : t("labels.profile"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
+
+var _path$9;
+
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+
+function SvgQrcode(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 682.667,
+    height: 682.667,
+    viewBox: "0 0 512 512"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    d: "M93.5 62.4c-15.7 3.9-28 16.6-31.4 32.4-.7 3.3-1.1 17.2-1.1 36.4 0 29.1.1 31.4 2 35.3 5.3 11 21.2 11.1 26.4.1 1.4-2.9 1.6-7.9 1.6-34.6 0-34.4.1-35.3 6.3-39 3-1.9 5.2-2 34.5-2 26.9 0 31.9-.2 34.8-1.6 11-5.2 10.9-21.1-.1-26.4-3.9-1.9-6.1-2-36.1-1.9-21.8 0-33.5.5-36.9 1.3zM345.4 63c-10.9 5.4-10.9 21.2 0 26.4 2.9 1.4 7.9 1.6 34.8 1.6 29.3 0 31.5.1 34.5 2 6.2 3.7 6.3 4.6 6.3 39 0 26.7.2 31.7 1.6 34.6 5.2 11 21.1 10.9 26.4-.1 1.9-3.9 2-6.2 2-35.3 0-19.2-.4-33.1-1.1-36.4-3.5-16.2-16.5-29.2-32.7-32.7-3.3-.7-17.2-1.1-36.5-1.1-29.3 0-31.5.1-35.3 2zM146 128.9c-6.9 2.1-12.1 6.5-15.6 13.1-1.8 3.2-1.9 6.3-1.9 38.5 0 34.2 0 35.1 2.2 39.1 2.8 5.3 9.1 10.7 14.2 12.2 2.5.8 14.4 1.2 35.8 1.2 36.3 0 38.3-.3 45.2-7.2 6.8-6.9 7.1-8.9 7.1-45.1 0-22.2-.4-33.2-1.2-36.1-1.8-6-10-13.9-16-15.4-5.3-1.3-65.5-1.6-69.8-.3zm57 51.6V203h-45v-45h45v22.5zM297 128.9c-8 2.5-14.9 9.2-16.9 16.4-.9 2.9-1.1 14.3-.9 37.7.3 37.2.2 36.2 7.4 43.3 6.6 6.4 8.8 6.7 45 6.7 35.6 0 38-.3 44.2-6.3 1.9-1.8 4.3-5 5.5-7.2 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-2.5-4.7-6.4-8.5-11.3-11.1-3.2-1.7-6.4-1.9-37-2.1-18.4-.1-34.6.2-36 .6zm57 51.6V203h-45v-45h45v22.5zM144.1 280.3c-4.8 1.8-10.8 7.2-13.4 12-2.2 4.1-2.2 4.9-2.2 39.2 0 34 .1 35.1 2.2 39 2.5 4.7 6.4 8.5 11.3 11.1 3.2 1.7 6.6 1.9 35.5 2.2 38.9.4 40.7.2 48-7.2 3.2-3.2 5.5-6.6 6.3-9.2.8-2.9 1.2-13.9 1.2-36.1 0-35.8-.4-38.3-6.6-44.7-7-7.2-6-7.1-44.4-7.3-25.4-.1-35.4.1-37.9 1zm58.9 51.2V354h-45v-45h45v22.5zM294.8 280.4c-6.8 2.4-12.9 8.9-14.8 15.7-1.5 5-1.3 66.2.2 71 1.5 5.1 6.9 11.4 12.2 14.2 4 2.2 4.9 2.2 39.1 2.2 32.2 0 35.3-.1 38.5-1.9 4.9-2.6 8.8-6.4 11.3-11.1 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-3-5.6-8-10.1-13.2-12-5.9-2-67.5-2.2-73.3-.1zm59.2 51.1V354h-45v-45h45v22.5zM68.7 339.2c-2.2 1.3-4.5 3.8-5.7 6.3-1.9 3.9-2 6.2-2 35.3 0 19.2.4 33.1 1.1 36.4 3.4 16.1 16.6 29.3 32.7 32.7 3.3.7 17.2 1.1 36.4 1.1 29.1 0 31.4-.1 35.3-2 11-5.3 11.1-21.2.1-26.4-2.9-1.4-7.9-1.6-34.6-1.6-34.4 0-35.3-.1-39-6.3-1.9-3-2-5.2-2-34.5 0-26.9-.2-31.9-1.6-34.8-3.6-7.5-13.5-10.5-20.7-6.2zM429.2 338.7c-1.8.9-4.3 3-5.5 4.7-2.1 3-2.2 4-2.7 36.1-.5 35.8-.6 36.1-6.3 39.5-3 1.9-5.3 2-34.5 2-34.5 0-36.1.2-40.2 6-5.4 7.5-2.8 18 5.5 22 3.9 1.9 6.2 2 35.3 2 19.2 0 33.1-.4 36.4-1.1 16.2-3.5 29.2-16.5 32.7-32.7.7-3.3 1.1-17.2 1.1-36.4 0-29.1-.1-31.4-2-35.3-3.6-7.4-12.5-10.4-19.8-6.8z"
+  })));
+}
+
+const DashboardQRCode = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.QRCODE,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgQrcode, {
+      className: "plc-w-6 plc-h-6 plc-mr-2"
+    }),
+    title: title !== null && title !== void 0 ? title : "My QR code",
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
+
+var _path$8;
+
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+
+function SvgKey(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
+    clipRule: "evenodd"
+  })));
+}
+
+const DashboardPasswordChange = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
   const {
     t
   } = useTranslation("dashboard");
-  return /*#__PURE__*/React__default.createElement(Card, {
-    id: "pelcro-dashboard-profile-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
-    title: t("labels.changePassword")
-  }, /*#__PURE__*/React__default.createElement(PasswordChangeView, null));
-};
 
-const SUB_MENUS = {
-  PROFILE: "profile",
-  QRCODE: "qr-code",
-  PASSWORDCHANGE: "passwordChange",
-  SUBSCRIPTIONS: "subscriptions",
-  DONATIONS: "donations",
-  MEMBERSHIPS: "memberships",
-  NEWSLETTERS: "Newsletters",
-  PAYMENT_CARDS: "payment-cards",
-  ADDRESSES: "addresses",
-  GIFTS: "gifts",
-  ORDERS: "orders",
-  INVOICES: "invoices",
-  LOGOUT: "logout",
-  SAVED_ITEMS: "saved-items"
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.PASSWORDCHANGE,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgKey, {
+      className: "plc-w-6 plc-h-6 plc-mr-2"
+    }),
+    title: title !== null && title !== void 0 ? title : t("labels.changePassword"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
 };
-/**
- *
- */
 
-function DashboardWithHook(props) {
-  React__default.useEffect(() => {
-    var _props$onDisplay;
+var _path$7;
 
-    (_props$onDisplay = props.onDisplay) === null || _props$onDisplay === void 0 ? void 0 : _props$onDisplay.call(props);
-  }, []);
-  const {
-    switchView,
-    resetView,
-    logout,
-    set
-  } = usePelcro();
-  return /*#__PURE__*/React__default.createElement(DashboardWithTrans, {
-    setAddress: addressIdToEdit => set({
-      addressIdToEdit
-    }),
-    setSubscriptionIdToRenew: subscriptionIdToRenew => set({
-      subscriptionIdToRenew
-    }),
-    setIsRenewingGift: isRenewingGift => set({
-      isRenewingGift
-    }),
-    onClose: () => {
-      var _props$onClose;
+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); }
 
-      (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
-      resetView();
-    },
-    logout: logout,
-    setView: switchView,
-    setProductAndPlan: (product, plan, isGift) => set({
-      product,
-      plan,
-      isGift
-    })
-  });
+function SvgBookmark(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+  })));
 }
-DashboardWithHook.viewId = "dashboard";
 
-class Dashboard extends Component {
-  constructor(props) {
-    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+const DashboardSavedItems = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-    super(props);
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
 
-    _defineProperty$3(this, "componentDidMount", () => {
-      var _ReactGA$event;
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.SAVED_ITEMS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgBookmark, null),
+    title: title !== null && title !== void 0 ? title : t("labels.savedItems.label"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-      this.setState({
-        isOpen: true
-      });
-      window.Pelcro.insight.track("Modal Displayed", {
-        name: "dashboard"
-      });
-      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
-        category: "VIEWS",
-        action: "Dashboard Modal Viewed",
-        nonInteraction: true
-      });
-      const {
-        addresses
-      } = window.Pelcro.user.read();
-      if (addresses) this.setState({
-        addresses: addresses
-      });
-    });
+var _path$6;
 
-    _defineProperty$3(this, "componentWillUnmount", () => {
-      document.removeEventListener("click", this.hideMenuIfClickedOutside);
-    });
+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); }
 
-    _defineProperty$3(this, "initializeHideMenuHandler", () => {
-      document.addEventListener("click", this.hideMenuIfClickedOutside);
-    });
+function SvgPaymentCard(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+  })));
+}
 
-    _defineProperty$3(this, "hideMenuIfClickedOutside", event => {
-      const dashboardSubmenus = document.getElementById("pelcro-view-dashboard-submenus");
-      const didClickOutsideMenu = this.state.isOpen && this.menuRef.current && !this.menuRef.current.contains(event.target) && !(dashboardSubmenus !== null && dashboardSubmenus !== void 0 && dashboardSubmenus.contains(event.target));
+const DashboardPaymentCards = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-      if (didClickOutsideMenu) {
-        this.setState({
-          isOpen: false,
-          activeDashboardLink: null
-        });
-      }
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    _defineProperty$3(this, "setActiveDashboardLink", submenuName => {
-      this.setState({
-        activeDashboardLink: submenuName !== null && submenuName !== void 0 ? submenuName : null
-      });
-    });
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.PAYMENT_CARDS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgPaymentCard, null),
+    title: title !== null && title !== void 0 ? title : t("labels.paymentSource"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-    _defineProperty$3(this, "cancelSubscription", (subscription_id, onSuccess, onFailure) => {
-      // disable the Login button to prevent repeated clicks
-      window.Pelcro.subscription.cancel({
-        auth_token: window.Pelcro.user.read().auth_token,
-        subscription_id: subscription_id
-      }, (err, res) => {
-        var _ReactGA$event2;
+var _path$5, _path2;
 
-        if (err) {
-          return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-        }
+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); }
 
-        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event2 = ReactGA.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA, {
-          category: "ACTIONS",
-          action: "Canceled",
-          nonInteraction: true
-        });
-        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
-      });
+function SvgLocationPin(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+  })));
+}
+
+const DashboardAddresses = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
+
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    _defineProperty$3(this, "unSuspendSubscription", (subscription_id, onSuccess, onFailure) => {
-      window.Pelcro.subscription.update({
-        auth_token: window.Pelcro.user.read().auth_token,
-        subscription_id: subscription_id,
-        suspend: 0
-      }, (err, res) => {
-        var _ReactGA$event3;
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.ADDRESSES,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgLocationPin, null),
+    title: title !== null && title !== void 0 ? title : t("labels.addresses"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-        if (err) {
-          return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-        }
+const DashboardSubscriptions = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event3 = ReactGA.event) === null || _ReactGA$event3 === void 0 ? void 0 : _ReactGA$event3.call(ReactGA, {
-          category: "ACTIONS",
-          action: "UnSuspended",
-          nonInteraction: true
-        });
-        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
-      });
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    _defineProperty$3(this, "displayRedeem", () => {
-      return this.props.setView("gift-redeem");
-    });
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.SUBSCRIPTIONS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgSubscription, {
+      className: "plc-w-10 plc-h-10 plc-pt-2 plc-pr-1 plc--ml-2"
+    }),
+    title: title !== null && title !== void 0 ? title : t("labels.subscriptions"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-    _defineProperty$3(this, "displaySourceCreate", () => {
-      return this.props.setView("payment-method-update");
-    });
+var _path$4;
 
-    _defineProperty$3(this, "displayUserEdit", () => {
-      return this.props.setView("user-edit");
-    });
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+
+function SvgNewsletter(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-5 plc-w-5",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+  })));
+}
+
+const DashboardNewsletters = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-    _defineProperty$3(this, "displayChangePassword", () => {
-      return this.props.setView("password-change");
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    _defineProperty$3(this, "displayNewsletterUpdate", () => {
-      return this.props.setView("newsletter-update");
-    });
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    show: showNewsletters(),
+    name: SUB_MENUS.NEWSLETTERS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgNewsletter, {
+      className: "plc-transform plc--translate-x-1 plc-scale-105 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
+    }),
+    title: title !== null && title !== void 0 ? title : t("labels.Newsletters"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-    _defineProperty$3(this, "displayQRCode", () => {
-      return this.props.setView("qrcode");
-    });
+var _path$3;
 
-    _defineProperty$3(this, "displayProductSelect", ({
-      isGift
-    }) => {
-      if (isGift) {
-        this.props.setProductAndPlan(null, null, true);
-      }
+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); }
 
-      return this.props.setView("plan-select");
-    });
+function SvgMemberships(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    width: 24,
+    height: 24
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"
+  })));
+}
 
-    _defineProperty$3(this, "displayAddressCreate", () => {
-      return this.props.setView("address-create");
-    });
+const DashboardMemberships = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-    _defineProperty$3(this, "displayAddressEdit", e => {
-      const address = e.currentTarget.dataset.key;
-      this.props.setAddress(address);
-      return this.props.setView("address-edit");
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    _defineProperty$3(this, "displayProfilePicChange", () => {
-      return this.props.setView("profile-picture");
-    });
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    show: hasActiveMemberships(),
+    name: SUB_MENUS.MEMBERSHIPS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgMemberships, {
+      className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
+    }),
+    title: title !== null && title !== void 0 ? title : t("labels.memberships"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-    _defineProperty$3(this, "getSubscriptionStatusText", subscription => {
-      if (subscription.status === "canceled") {
-        const cancelDate = new Date(subscription.canceled_at);
-        const formattedCancelDate = new Intl.DateTimeFormat("en-CA").format(cancelDate);
-        return `${this.locale("labels.canceledOn")} ${formattedCancelDate}`;
-      }
+var _path$2;
 
-      if (subscription.status === "incomplete") {
-        return `${this.locale("labels.status.incomplete")}`;
-      }
+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); }
 
-      if (subscription.status === "extended") {
-        // DateTime from BE is missing 3 zeros so we add them before instancing a date
-        const expiryDate = new Date(Number(`${subscription.end_date}000`));
-        const formattedExpiryDate = new Intl.DateTimeFormat("en-CA").format(expiryDate);
-        return `${this.locale("labels.until")} ${formattedExpiryDate}`;
-      }
+function SvgDonate(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    width: 24,
+    height: 24,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    d: "M4 21h9.62a3.995 3.995 0 003.037-1.397l5.102-5.952a1 1 0 00-.442-1.6l-1.968-.656a3.043 3.043 0 00-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 009.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 00.442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 00.11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 01-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 001.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0016.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0111.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 01.701.292c.189.189.293.44.293.707z"
+  })));
+}
 
-      if (subscription.cancel_at_period_end) {
-        // DateTime from BE is missing 3 zeros so we add them before instancing a date
-        const expiryDate = new Date(Number(`${subscription.expires_at}000`));
-        const formattedExpiryDate = new Intl.DateTimeFormat("en-CA").format(expiryDate);
-        return `${this.locale("labels.expiresOn")} ${formattedExpiryDate}`;
-      }
+const DashboardDonations = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-      const renewDate = new Date(Number(`${subscription.renews_at}000`));
-      const formattedRenewDate = new Intl.DateTimeFormat("en-CA").format(renewDate);
-      return `${this.locale("labels.renewsOn")} ${formattedRenewDate}`;
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    _defineProperty$3(this, "reactivateSubscription", subscription_id => {
-      // disable the Login button to prevent repeated clicks
-      this.setState({
-        disableSubmit: true
-      });
-      window.Pelcro.subscription.reactivate({
-        auth_token: window.Pelcro.user.read().auth_token,
-        subscription_id: subscription_id
-      }, (err, res) => {
-        this.setState({
-          disableSubmit: false
-        });
-        this.props.onClose();
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    show: hasDonationSubs(),
+    name: SUB_MENUS.DONATIONS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgDonate, {
+      className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
+    }),
+    title: title !== null && title !== void 0 ? title : t("labels.donations"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-        if (err) {
-          return notify.error(this.locale("messages.subReactivation.error"));
-        }
+const DashboardGifts = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-        return notify.success(this.locale("messages.subReactivation.success"));
-      });
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    _defineProperty$3(this, "getSubscriptionStatus", sub => {
-      const isSubscriptionEndingSoon = sub => {
-        const weekFromNow = new Date().getTime() + 7 * 24 * 60 * 60 * 1000;
-        const endingAt = new Date(sub.expires_at * 1000).getTime();
-        return weekFromNow > endingAt && sub.cancel_at_period_end;
-      };
-
-      const isSubscriptionInTrial = sub => {
-        if (!sub.trial_end) {
-          return;
-        }
-
-        const now = new Date().getTime();
-        const trialEndDate = new Date(sub.trial_end).getTime();
-        return now < trialEndDate;
-      };
-
-      if (isSubscriptionEndingSoon(sub)) {
-        return {
-          title: this.locale("labels.status.endingSoon"),
-          content: this.getSubscriptionStatusText(sub),
-          textColor: "plc-text-orange-700",
-          bgColor: "plc-bg-orange-100",
-          icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
-        };
-      }
-
-      if (isSubscriptionInTrial(sub)) {
-        return {
-          title: this.locale("labels.status.inTrial"),
-          content: this.getSubscriptionStatusText(sub),
-          textColor: "plc-text-yellow-700",
-          bgColor: "plc-bg-yellow-100",
-          icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
-        };
-      }
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    name: SUB_MENUS.GIFTS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgGift, null),
+    title: title !== null && title !== void 0 ? title : t("labels.gifts"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-      if (sub.status === "incomplete") {
-        return {
-          title: this.locale("labels.status.incomplete"),
-          content: this.getSubscriptionStatusText(sub),
-          textColor: "plc-text-orange-700",
-          bgColor: "plc-bg-orange-100",
-          icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
-        };
-      }
+var _path$1;
 
-      if (sub.status === "canceled") {
-        return {
-          title: this.locale("labels.status.canceled"),
-          content: this.getSubscriptionStatusText(sub),
-          textColor: "plc-text-red-700",
-          bgColor: "plc-bg-red-100",
-          icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
-        };
-      }
+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); }
 
-      return {
-        title: this.locale("labels.status.active"),
-        content: this.getSubscriptionStatusText(sub),
-        textColor: "plc-text-green-700",
-        bgColor: "plc-bg-green-100",
-        icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
-      };
-    });
+function SvgShopping(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+  })));
+}
 
-    _defineProperty$3(this, "renderAddresses", () => {
-      const addresses = this.state.addresses && this.state.addresses.map((address, index) => {
-        return /*#__PURE__*/React__default.createElement("tr", {
-          key: "dashboard-address-" + address.id
-        }, /*#__PURE__*/React__default.createElement("td", {
-          className: "plc-pr-2 plc-text-gray-400 plc-truncate"
-        }, /*#__PURE__*/React__default.createElement("span", {
-          className: "plc-font-semibold plc-text-gray-600"
-        }, address.city ? `${address.city},` : null, " ", address.country), " ", /*#__PURE__*/React__default.createElement("span", {
-          title: address.line1
-        }, address.line1), /*#__PURE__*/React__default.createElement("div", {
-          className: "plc-flex plc-mb-2 plc-mt-1"
-        }, /*#__PURE__*/React__default.createElement("span", {
-          className: "plc-rounded-full plc-bg-gray-200 plc-text-black plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-capitalize"
-        }, address.type === "shipping" ? this.locale("labels.shipping") : this.locale("labels.billing")), address.is_default && /*#__PURE__*/React__default.createElement("span", {
-          className: "plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-ml-2"
-        }, this.locale("labels.default")))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
-          variant: "icon",
-          className: "plc-text-gray-500",
-          icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
-          id: "pelcro-button-update-address-" + index,
-          "data-key": address.id,
-          onClick: this.displayAddressEdit
-        })));
-      });
-      return /*#__PURE__*/React__default.createElement("table", {
-        className: "plc-w-full plc-table-fixed"
-      }, /*#__PURE__*/React__default.createElement("thead", {
-        className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
-      }, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
-        className: "plc-w-10/12"
-      }, this.locale("labels.address")), /*#__PURE__*/React__default.createElement("th", {
-        className: "plc-w-2/12"
-      }, this.locale("labels.edit")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
-        className: "plc-h-4"
-      }), addresses, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-        colSpan: "2",
-        className: "plc-p-1"
-      }, /*#__PURE__*/React__default.createElement(Button, {
-        variant: "ghost",
-        icon: /*#__PURE__*/React__default.createElement(SvgPlus, {
-          className: "plc-w-4 plc-mr-1"
-        }),
-        className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase hover:plc-bg-gray-100",
-        onClick: this.displayAddressCreate
-      }, this.locale("labels.addAddress"))))));
-    });
+const DashboardOrders = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-    _defineProperty$3(this, "closeDashboard", () => {
-      this.setState({
-        isOpen: false,
-        activeDashboardLink: null
-      });
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
     });
+  };
 
-    this.state = {
-      isOpen: false,
-      activeDashboardLink: null,
-      subscriptions: window.Pelcro.subscription.list(),
-      giftRecipients: (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.gift_recipients) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [],
-      disableSubmit: false,
-      addresses: []
-    };
-    this.site = window.Pelcro.site.read();
-    this.locale = this.props.t;
-    this.user = window.Pelcro.user.read();
-    this.menuRef = /*#__PURE__*/React__default.createRef();
-  }
-
-  render() {
-    var _window$Pelcro$user$r3, _window$Pelcro, _window$Pelcro$uiSett;
-
-    const {
-      isOpen
-    } = this.state;
-    const userHasName = this.user.first_name || this.user.last_name;
-    const profilePicture = (_window$Pelcro$user$r3 = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : userSolidIcon;
-    const newsletters = (_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.newsletters;
-    Array.isArray(newsletters) && newsletters.length > 0;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Transition, {
-      className: "plc-fixed plc-inset-y-0 plc-left-0 plc-h-full lg:plc-w-3/12 plc-w-full plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
-      show: isOpen,
-      enter: "plc-transform plc-transition plc-duration-500",
-      enterFrom: "plc--translate-x-full",
-      enterTo: "plc-translate-x-0",
-      afterEnter: this.initializeHideMenuHandler,
-      leave: "plc-transform plc-transition plc-duration-500",
-      leaveFrom: "plc-translate-x-0",
-      leaveTo: "plc--translate-x-full",
-      afterLeave: this.props.onClose
-    }, /*#__PURE__*/React__default.createElement("div", {
-      id: "pelcro-view-dashboard",
-      ref: this.menuRef
-    }, /*#__PURE__*/React__default.createElement("header", {
-      className: "plc-bg-gray-200 plc-flex plc-py-5"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-items-center"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-justify-center plc-ml-3 sm:plc-ml-6 plc-flex-shrink-0"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-relative plc-flex-shrink-0"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      className: "pelcro-user-profile-picture plc-bg-gray-300 plc-cursor-pointer plc-h-10 plc-rounded-md plc-w-10",
-      src: profilePicture,
-      alt: "profile picture",
-      onClick: this.displayProfilePicChange
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-flex-col plc-justify-between plc-flex-grow plc-w-56 plc-ml-4 plc-break-words sm:plc-w-auto"
-    }, userHasName && /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-font-bold plc-break-all"
-    }, this.user.first_name, " ", this.user.last_name), /*#__PURE__*/React__default.createElement("p", {
-      className: `plc-m-0 plc-text-sm plc-break-all ${userHasName ? "plc-text-sm" : "plc-text-lg plc-font-bold plc-mt-auto"}`
-    }, this.user.email)), /*#__PURE__*/React__default.createElement("div", {
-      className: "lg:plc-hidden"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      variant: "ghost",
-      type: "button",
-      className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-10",
-      onClick: this.closeDashboard
-    }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
-      className: "plc-fill-current"
-    }))))), /*#__PURE__*/React__default.createElement("section", {
-      className: "plc-mt-6 plc-shadow-sm"
-    }, /*#__PURE__*/React__default.createElement("header", {
-      className: "plc-pl-4 plc-mb-2 sm:plc-pl-8"
-    }, /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-    }, this.locale("labels.mySettings"))), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.PROFILE,
-      icon: /*#__PURE__*/React__default.createElement(SvgUser, {
-        className: "plc-w-6 plc-h-6 plc-mr-2"
-      }),
-      title: this.locale("labels.profile"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.QRCODE,
-      icon: /*#__PURE__*/React__default.createElement(SvgQrcode, {
-        className: "plc-w-6 plc-h-6 plc-mr-2"
-      }),
-      title: this.locale("labels.myQRCode"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.PASSWORDCHANGE,
-      icon: /*#__PURE__*/React__default.createElement(SvgKey, {
-        className: "plc-w-6 plc-h-6 plc-mr-2"
-      }),
-      title: this.locale("labels.changePassword"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.SAVED_ITEMS,
-      icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
-      title: this.locale("labels.savedItems.label"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement("header", {
-      className: "plc-pl-4 plc-mb-2 sm:plc-pl-8"
-    }, /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-    }, this.locale("labels.accountSettings"))), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.PAYMENT_CARDS,
-      icon: /*#__PURE__*/React__default.createElement(SvgPaymentCard, null),
-      title: this.locale("labels.paymentSource"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.ADDRESSES,
-      icon: /*#__PURE__*/React__default.createElement(SvgLocationPin, null),
-      title: this.locale("labels.addresses"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement("header", {
-      className: "plc-pl-4 plc-my-2 sm:plc-pl-8"
-    }, /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-font-bold plc-tracking-widest plc-text-gray-500"
-    }, this.locale("labels.purchases"))), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.SUBSCRIPTIONS,
-      icon: /*#__PURE__*/React__default.createElement(SvgSubscription, {
-        className: "plc-w-10 plc-h-10 plc-pt-2 plc-pr-1 plc--ml-2"
-      }),
-      title: this.locale("labels.subscriptions"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      show: showNewsletters(),
-      name: SUB_MENUS.NEWSLETTERS,
-      icon: /*#__PURE__*/React__default.createElement(SvgNewsletter, {
-        className: "plc-transform plc--translate-x-1 plc-scale-105 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
-      }),
-      title: this.locale("labels.Newsletters"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      show: hasActiveMemberships(),
-      name: SUB_MENUS.MEMBERSHIPS,
-      icon: /*#__PURE__*/React__default.createElement(SvgMemberships, {
-        className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
-      }),
-      title: this.locale("labels.memberships"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      show: hasDonationSubs(),
-      name: SUB_MENUS.DONATIONS,
-      icon: /*#__PURE__*/React__default.createElement(SvgDonate, {
-        className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
-      }),
-      title: this.locale("labels.donations"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.GIFTS,
-      icon: /*#__PURE__*/React__default.createElement(SvgGift, null),
-      title: this.locale("labels.gifts"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      show: window.Pelcro.site.read().ecommerce_enabled,
-      name: SUB_MENUS.ORDERS,
-      icon: /*#__PURE__*/React__default.createElement(SvgShopping, null),
-      title: this.locale("labels.orders.label"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      show: hasInvoices(),
-      name: SUB_MENUS.INVOICES,
-      icon: /*#__PURE__*/React__default.createElement(SvgDocument, null),
-      title: this.locale("labels.invoices"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    })), /*#__PURE__*/React__default.createElement(DashboardLink, {
-      name: SUB_MENUS.LOGOUT,
-      icon: /*#__PURE__*/React__default.createElement(SvgExit, null),
-      title: this.locale("labels.logout"),
-      setActiveDashboardLink: this.setActiveDashboardLink,
-      activeDashboardLink: this.state.activeDashboardLink
-    }))), this.state.activeDashboardLink && isOpen && /*#__PURE__*/React__default.createElement("div", {
-      id: "pelcro-view-dashboard-submenus",
-      className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full lg:plc-w-9/12 plc-w-full plc-bg-gray-100 plc-z-max plc-overflow-auto"
-    }, this.state.activeDashboardLink === SUB_MENUS.PROFILE && /*#__PURE__*/React__default.createElement(ProfileMenu, null), this.state.activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default.createElement(QRCodeMenu, null), this.state.activeDashboardLink === SUB_MENUS.PASSWORDCHANGE && /*#__PURE__*/React__default.createElement(PasswordChangeMenu, null), this.state.activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default.createElement(SavedItemsMenu, null), this.state.activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default.createElement(PaymentCardsMenu, {
-      displaySourceCreate: this.displaySourceCreate
-    }), this.state.activeDashboardLink === SUB_MENUS.ADDRESSES && /*#__PURE__*/React__default.createElement(AddressesMenu, {
-      displayAddressCreate: this.displayAddressCreate,
-      displayAddressEdit: this.displayAddressEdit
-    }), this.state.activeDashboardLink === SUB_MENUS.SUBSCRIPTIONS && /*#__PURE__*/React__default.createElement(SubscriptionsMenu // getSubscriptionStatus={this.getSubscriptionStatus}
-    , {
-      displayProductSelect: this.displayProductSelect,
-      displayRedeem: this.displayRedeem,
-      cancelSubscription: this.cancelSubscription,
-      unSuspendSubscription: this.unSuspendSubscription,
-      reactivateSubscription: this.reactivateSubscription,
-      setProductAndPlan: this.props.setProductAndPlan,
-      setSubscriptionIdToRenew: this.props.setSubscriptionIdToRenew,
-      setView: this.props.setView,
-      getSubscriptionStatus: this.getSubscriptionStatus,
-      disableSubmit: this.state.disableSubmit
-    }), this.state.activeDashboardLink === SUB_MENUS.MEMBERSHIPS && /*#__PURE__*/React__default.createElement(MembershipsMenu, {
-      getSubscriptionStatus: this.getSubscriptionStatus
-    }), this.state.activeDashboardLink === SUB_MENUS.NEWSLETTERS && /*#__PURE__*/React__default.createElement(NewslettersMenu, null), this.state.activeDashboardLink === SUB_MENUS.DONATIONS && /*#__PURE__*/React__default.createElement(DonationsMenu, {
-      cancelSubscription: this.cancelSubscription,
-      reactivateSubscription: this.reactivateSubscription,
-      disableSubmit: this.state.disableSubmit,
-      getSubscriptionStatus: this.getSubscriptionStatus
-    }), this.state.activeDashboardLink === SUB_MENUS.GIFTS && /*#__PURE__*/React__default.createElement(GiftsMenu, {
-      getSubscriptionStatus: this.getSubscriptionStatus,
-      displayProductSelect: this.displayProductSelect,
-      setProductAndPlan: this.props.setProductAndPlan,
-      setSubscriptionIdToRenew: this.props.setSubscriptionIdToRenew,
-      setIsRenewingGift: this.props.setIsRenewingGift,
-      setView: this.props.setView,
-      disableSubmit: this.state.disableSubmit
-    }), this.state.activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default.createElement(OrdersMenu, null), this.state.activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default.createElement(InvoicesMenu, null), this.state.activeDashboardLink === SUB_MENUS.LOGOUT && this.props.logout(), /*#__PURE__*/React__default.createElement(Button, {
-      variant: "ghost",
-      type: "button",
-      className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-2 plc-right-2 md:plc-top-5 md:plc-right-10",
-      onClick: this.closeDashboard
-    }, /*#__PURE__*/React__default.createElement(SvgXIcon, {
-      className: "plc-fill-current"
-    }))));
-  }
-
-}
-
-function hasInvoices() {
-  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    show: window.Pelcro.site.read().ecommerce_enabled,
+    name: SUB_MENUS.ORDERS,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgShopping, null),
+    title: title !== null && title !== void 0 ? title : t("labels.orders.label"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
-  return invoices.length > 0;
-}
+const DashboardInvoices = ({
+  title,
+  icon,
+  store
+}) => {
+  const {
+    state: {
+      activeDashboardLink
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("dashboard");
 
-function showNewsletters() {
-  var _ref, _window$Pelcro2, _window$Pelcro2$uiSet, _window$Pelcro2$uiSet2;
+  const setActiveDashboardLink = submenuName => {
+    dispatch({
+      type: SET_ACTIVE_DASHBOARD_LINK,
+      payload: submenuName !== null && submenuName !== void 0 ? submenuName : null
+    });
+  };
 
-  const showNewslettersUiSettings = (_ref = ((_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : (_window$Pelcro2$uiSet2 = _window$Pelcro2$uiSet.newsletters) === null || _window$Pelcro2$uiSet2 === void 0 ? void 0 : _window$Pelcro2$uiSet2.length) > 0) !== null && _ref !== void 0 ? _ref : false;
-  return showNewslettersUiSettings;
-}
+  return /*#__PURE__*/React__default.createElement(DashboardLink, {
+    show: hasInvoices(),
+    name: SUB_MENUS.INVOICES,
+    icon: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React__default.createElement(SvgDocument, null),
+    title: title !== null && title !== void 0 ? title : t("labels.invoices"),
+    setActiveDashboardLink: setActiveDashboardLink,
+    activeDashboardLink: activeDashboardLink
+  });
+};
 
-function hasDonationSubs() {
-  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
+/**
+ *
+ */
 
-  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
-  const canceledDonations = (_window$Pelcro$user$r4 = (_window$Pelcro$user$r5 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r4 !== void 0 ? _window$Pelcro$user$r4 : [];
-  return donations.length > 0 || canceledDonations.length > 0;
-}
+function Dashboard(props) {
+  React__default.useEffect(() => {
+    var _props$onDisplay;
 
-function hasActiveMemberships() {
-  var _window$Pelcro$user$r6, _window$Pelcro$user$r7;
+    (_props$onDisplay = props.onDisplay) === null || _props$onDisplay === void 0 ? void 0 : _props$onDisplay.call(props);
+  }, []);
+  const {
+    resetView
+  } = usePelcro();
+  const {
+    t
+  } = useTranslation("dashboard");
+  return /*#__PURE__*/React__default.createElement(DashboardContainer, props, /*#__PURE__*/React__default.createElement(DashboardContent, Object.assign({
+    onClose: () => {
+      var _props$onClose;
 
-  return (_window$Pelcro$user$r6 = (_window$Pelcro$user$r7 = window.Pelcro.user.read().memberships) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.some(membership => membership.status === "active" && membership.subscription.ended_at === null)) !== null && _window$Pelcro$user$r6 !== void 0 ? _window$Pelcro$user$r6 : false;
+      (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
+      resetView();
+    }
+  }, props), /*#__PURE__*/React__default.createElement(DashboardHeading, {
+    title: t("labels.mySettings")
+  }), /*#__PURE__*/React__default.createElement(DashboardProfile, null), /*#__PURE__*/React__default.createElement(DashboardQRCode, null), /*#__PURE__*/React__default.createElement(DashboardPasswordChange, null), /*#__PURE__*/React__default.createElement(DashboardSavedItems, null), /*#__PURE__*/React__default.createElement(DashboardHeading, {
+    title: t("labels.accountSettings")
+  }), /*#__PURE__*/React__default.createElement(DashboardPaymentCards, null), /*#__PURE__*/React__default.createElement(DashboardAddresses, null), /*#__PURE__*/React__default.createElement(DashboardHeading, {
+    title: t("labels.purchases")
+  }), /*#__PURE__*/React__default.createElement(DashboardSubscriptions, null), /*#__PURE__*/React__default.createElement(DashboardNewsletters, null), /*#__PURE__*/React__default.createElement(DashboardMemberships, null), /*#__PURE__*/React__default.createElement(DashboardDonations, null), /*#__PURE__*/React__default.createElement(DashboardGifts, null), /*#__PURE__*/React__default.createElement(DashboardOrders, null), /*#__PURE__*/React__default.createElement(DashboardInvoices, null)));
 }
-
-const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
+Dashboard.viewId = "dashboard";
 
 // The button in the lower left that shows the dashboard.
 const DashboardOpenButton = () => {
@@ -38376,4 +38805,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };