@weareconceptstudio/account 0.2.8 → 0.2.9

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/ProgressComponent/index.d.ts

@@ -1,5 +1,5 @@
 export default ProgressComponent;
-declare function ProgressComponent({ round, value, maxValue, size, gapSize, strokeWidth, className, percent }: {
+declare function ProgressComponent({ round, value, maxValue, size, gapSize, strokeWidth, className, percent, animated }: {
     round: any;
     value?: number;
     maxValue?: number;
@@ -8,5 +8,6 @@ declare function ProgressComponent({ round, value, maxValue, size, gapSize, stro
     strokeWidth: any;
     className: any;
     percent: any;
+    animated: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/ProgressComponent/index.js

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react';
 //* Styles
 import ProgressComponentStyle from './style';
-import { useUi } from '@weareconceptstudio/core';
-const ProgressComponent = ({ round, value = 50, maxValue = 100, size, gapSize, strokeWidth, className, percent }) => {
-    const { winWidth } = useUi();
+const ProgressComponent = ({ round, value = 50, maxValue = 100, size, gapSize, strokeWidth, className, percent, animated }) => {
     const [styleElement, setStyleElement] = useState(null);
     const [progressAnimation, setProgressAnimation] = useState(0);
     function getValue(value) {
@@ -21,21 +19,21 @@ const ProgressComponent = ({ round, value = 50, maxValue = 100, size, gapSize, s
         }
     }
     const sizeNumber = getValue(size || '--sizeProgress');
+    console.log(sizeNumber);
     const strokeWidthNumber = getValue(strokeWidth || '--strokeWidth');
     const gapSizeValue = getValue(gapSize || '--gapDistance');
     const radius = (sizeNumber - strokeWidthNumber) / 2;
     const circumference = 2 * Math.PI * radius;
     const progress = progressAnimation;
-    // const progress = percent ? percent : (value / maxValue) * 100;
     const filledLength = (progress / 100) * circumference;
     useEffect(() => {
         setTimeout(() => {
             setProgressAnimation(percent ? percent : (value / maxValue) * 100);
-        }, 10);
-    }, []);
+        }, 0);
+    }, [percent]);
     return (React.createElement(ProgressComponentStyle, { ref: (element) => setStyleElement(element) }, sizeNumber ? (React.createElement("div", { className: `${className || ' '} progress-wrapper`, style: { position: 'relative', width: `${size}`, height: `${size}` } },
-        React.createElement("svg", { width: sizeNumber, height: sizeNumber, viewBox: `0 0 ${sizeNumber} ${sizeNumber}`, style: { transform: 'rotate(-90deg)' } },
-            React.createElement("circle", { cx: sizeNumber / 2, cy: sizeNumber / 2, r: radius, stroke: '#E9ECEE', strokeWidth: strokeWidthNumber, fill: 'none', strokeDasharray: `${circumference - filledLength - gapSizeValue * 2} ${filledLength + gapSizeValue}`, strokeDashoffset: circumference - filledLength - gapSizeValue * 2, strokeLinecap: round ? 'round' : 'none' }),
+        React.createElement("svg", { width: sizeNumber, height: sizeNumber, viewBox: `0 0 ${sizeNumber} ${sizeNumber}`, style: { transform: 'rotate(-90deg)' }, className: `${animated ? 'animated' : ' '}` },
+            React.createElement("circle", { cx: sizeNumber / 2, cy: sizeNumber / 2, r: radius, stroke: '#E9ECEE', strokeWidth: strokeWidthNumber, fill: 'none', strokeDasharray: `${filledLength ? `${circumference - filledLength - gapSizeValue * 2} ${filledLength + gapSizeValue * 2}` : `${circumference - gapSizeValue * 2} ${gapSizeValue * 2}`} `, strokeDashoffset: circumference / 2 - gapSizeValue, strokeLinecap: round ? 'round' : 'none', style: { transform: 'rotateY(-180deg)', transformOrigin: '50% 50%' } }),
             React.createElement("circle", { cx: sizeNumber / 2, cy: sizeNumber / 2, r: radius, stroke: 'url(#gradient)', strokeWidth: strokeWidthNumber, fill: 'none', strokeDasharray: `${filledLength} ${circumference - filledLength}`, strokeDashoffset: 0, strokeLinecap: round ? 'round' : 'none' }),
             React.createElement("defs", null,
                 React.createElement("linearGradient", { id: 'gradient', x1: '1', y1: '0', x2: '0', y2: '1' },

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/ProgressComponent/style.js

@@ -16,6 +16,15 @@ const ProgressComponentStyle = styled.div `
 		max-width: 100%;
 	}
 
+	.animated {
+		circle {
+			transition:
+				stroke-dasharray 1.5s ease-out,
+				stroke-dashoffset 1.5s ease-out;
+			will-change: stroke-dasharray, stroke-dashoffset;
+		}
+	}
+
 	/* //! 1920 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		/* --sizeProgress: var(--sp51x); */

package/dist/modules/account/AccountBalanceTemplate/HeroBalance/ProgressBalance/index.js

@@ -1,14 +1,16 @@
-import React, { useRef } from 'react';
-// //* Styles
-import ProgressBalanceStyle from './style';
+import React from 'react';
+import { Text, useTranslation } from '@weareconceptstudio/core';
+//* Component
 import ProgressComponent from './ProgressComponent';
-import { Icon, Text, useTranslation } from '@weareconceptstudio/core';
+//* Util
 import { handlePriceCheckFunc } from '../../../../../utils/_functions';
+//* Styles
+import ProgressBalanceStyle from './style';
 const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle, iconValue }) => {
     const { translate } = useTranslation();
     return (React.createElement(ProgressBalanceStyle, null,
         React.createElement("div", { className: 'wrapper-progress-inner-info' },
-            React.createElement(ProgressComponent, { className: 'circular-progress', percent: progress, round: true }),
+            React.createElement(ProgressComponent, { className: 'circular-progress', percent: progress, animated: true, round: true }),
             balance || balance == 0 ? (React.createElement("div", { className: 'wrapper-progress-text' },
                 React.createElement(Text, { className: 'account-primary-color1 account-p account-p4 first-letter balance-title' }, translate('progressBalanceTitle')),
                 React.createElement(Text, { className: 'account-primary-color1  account-h5 first-letter balance-value' }, typeof balance == 'number' ? handlePriceCheckFunc(balance, translate('priceValue')) : balance))) : null),

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.d.ts

@@ -1,3 +1,5 @@
 export default HistoryBalance;
-declare function HistoryBalance(): React.JSX.Element;
+declare function HistoryBalance({ linkEarnPage }: {
+    linkEarnPage: any;
+}): React.JSX.Element;
 import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/index.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { api, Text, useTranslation } from '@weareconceptstudio/core';
+import { api, Link, Text, useTranslation } from '@weareconceptstudio/core';
 //* Styles
 import HistoryBalanceStyle from './style';
 //* Component
 import ItemHistory from './ItemHistory';
 import { Pagination } from '../../../../components';
 const dataCategoryName = ['balanceCategoryDate', 'balanceCategoryActivity', 'balanceCategoryAmount'];
-const HistoryBalance = () => {
+const HistoryBalance = ({ linkEarnPage }) => {
     const { translate, selectedLang } = useTranslation();
     const [currentPage, setCurrentPage] = useState(1);
     const [pagination, setPagination] = useState({
@@ -27,7 +27,10 @@ const HistoryBalance = () => {
     }, [currentPage]);
     return data && data.length ? (React.createElement(HistoryBalanceStyle, null,
         React.createElement("div", { className: 'wrapper-title-section-history' },
-            React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter title-section-history', text: 'balanceRecentActivity' }),
+            React.createElement("div", { className: 'wrapper-history-link' },
+                React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter title-section-history', text: 'balanceRecentActivity' }),
+                linkEarnPage ? (React.createElement(Link, { href: '/muramoney' },
+                    React.createElement(Text, { className: 'account-primary-color1 account-font-bold account-p account-p4 first-letter how-earn-text', text: 'balanceHowToEarn' }))) : null),
             React.createElement("div", { className: 'line-title' })),
         React.createElement("div", { className: 'wrapper-history-container' },
             React.createElement("div", { className: 'wrapper-history-category-title', id: 'history-category-title' }, dataCategoryName.map((item, i) => {

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/style.js

@@ -33,6 +33,27 @@ const HistoryBalanceStyle = styled.section `
 		margin-top: var(--account_distance_pagination);
 	}
 
+	.wrapper-history-link {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.how-earn-text {
+		transition: var(--trTime) ease-out;
+		text-decoration: underline;
+	}
+
+	@media (pointer: fine) {
+		@media (hover: hover) {
+			.how-earn-text {
+				&:hover {
+					color: var(--account_primaryColor3);
+				}
+			}
+		}
+	}
+
 	/* //! 1920 */
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_distance_line_history_marginTB: var(--sp3x) 0 var(--sp3x);

package/dist/modules/account/AccountBalanceTemplate/StatusBalance/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Text, useUi } from '@weareconceptstudio/core';
+import { Text, useResizeObserver, useUi } from '@weareconceptstudio/core';
 //* Styles
 import StatusBalanceStyle from './style';
 //* Component
@@ -8,36 +8,17 @@ const StatusBalance = ({ allItem, activeStatus }) => {
     const { winWidth } = useUi();
     //! Refs
     const wrapperStatusRef = useRef();
-    const resizableRefs = useRef();
-    const resizeTimeoutRef = useRef();
     const statusActiveItem = useRef(false);
     const styleRef = useRef();
     const contentRef = useRef();
     const outsideContentRef = useRef();
     //! State
     const [sizeLine, setSizeLine] = useState();
-    const [resize, setResize] = useState();
-    //! Resize logic
-    useEffect(() => {
-        const bodyElement = document.querySelector('body');
-        resizableRefs.current = new ResizeObserver((entries) => {
-            if (resizeTimeoutRef.current) {
-                clearTimeout(resizeTimeoutRef.current);
-            }
-            resizeTimeoutRef.current = setTimeout(() => {
-                setResize(entries[0].contentRect.height);
-            }, 300);
-        });
-        resizableRefs.current.observe(bodyElement);
-        return () => {
-            if (resizableRefs.current) {
-                resizableRefs.current.disconnect();
-            }
-        };
-    }, [winWidth]);
+    //! Resizes
+    const resizes = useResizeObserver(document.querySelector('body'));
     //! Calculate size range
     useEffect(() => {
-        if (wrapperStatusRef.current && resize && styleRef.current) {
+        if (wrapperStatusRef.current && resizes && styleRef.current) {
             const allCircle = wrapperStatusRef.current.querySelectorAll('.circle-line');
             const sizeCircleLeftRight = [...allCircle].map((item) => Math.floor(item.getBoundingClientRect().left));
             const differences = sizeCircleLeftRight.slice(1).map((value, index) => Math.floor(value - (sizeCircleLeftRight[index] + allCircle[0].getBoundingClientRect().width)));
@@ -54,7 +35,7 @@ const StatusBalance = ({ allItem, activeStatus }) => {
         if (allItem.length) {
             statusActiveItem.current = allItem.findIndex((item) => item.name?.toLowerCase() === activeStatus?.toLowerCase());
         }
-    }, [resize, winWidth]);
+    }, [resizes, winWidth]);
     return (React.createElement(StatusBalanceStyle, { ref: styleRef, className: 'account-progress-status-wrapper' },
         React.createElement("div", { className: 'wrapper-title-section' },
             React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p account-p1 first-letter status-title-section-progress', text: 'balanceStatus' }),

package/dist/modules/account/AccountBalanceTemplate/index.d.ts

@@ -1,7 +1,8 @@
 export default AccountBalanceTemplate;
-declare function AccountBalanceTemplate({ iconValue, dataItem, className }: {
+declare function AccountBalanceTemplate({ iconValue, dataItem, linkEarnPage, className }: {
     iconValue: any;
     dataItem: any;
+    linkEarnPage: any;
     className: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/modules/account/AccountBalanceTemplate/index.js

@@ -6,7 +6,7 @@ import AccountBalanceTemplateStyle from './style';
 import HeroBalance from './HeroBalance';
 import HistoryBalance from './HistoryBalance';
 import StatusBalance from './StatusBalance';
-const AccountBalanceTemplate = ({ iconValue, dataItem, className }) => {
+const AccountBalanceTemplate = ({ iconValue, dataItem, linkEarnPage, className }) => {
     const { selectedLang } = useTranslation();
     //! State
     const [dataBalance, setDataBalance] = useState(false);
@@ -26,6 +26,6 @@ const AccountBalanceTemplate = ({ iconValue, dataItem, className }) => {
                 }
             })() }),
         React.createElement(StatusBalance, { activeStatus: dataBalance.info.status, allItem: dataItem }),
-        React.createElement(HistoryBalance, null))) : null;
+        React.createElement(HistoryBalance, { linkEarnPage: linkEarnPage }))) : null;
 };
 export default AccountBalanceTemplate;

package/dist/modules/address/AddressForm/index.js

@@ -7,7 +7,7 @@ import AccountButton from '../../../components/AccountButton';
 import { CheckboxIcon, CheckboxCheckedIcon } from '../../../utils/icons';
 //* Style
 import AddressFormStyle from './style';
-const AddressForm = Memo(({ title, data, type }) => {
+const AddressForm = Memo(({ title, data, type, isCheckoutPage = false }) => {
     const { formFields, createAddress, updateAddress } = useAddressContext();
     const { closePopup } = useUi();
     //! States
@@ -22,7 +22,7 @@ const AddressForm = Memo(({ title, data, type }) => {
         };
         setIsDisabled(true);
         return (!isDisabled &&
-            eval(data?.id ? `updateAddress(newData, data.id)` : `createAddress(newData)`).then(() => {
+            eval(data?.id ? `updateAddress({data: newData, addressId: data.id, type, isCheckoutPage})` : `createAddress({data: newData, type, isCheckoutPage})`).then(() => {
                 closePopup();
             }));
     }, [data, isChecked, createAddress, updateAddress, isDisabled]);

package/dist/modules/address/AddressItem/index.js

@@ -12,13 +12,13 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
     const { deleteAddress, selectedAddresses } = useAddressContext();
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
-        openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteAddressMessage', description: 'confirmDeleteAddress', onRemove: () => deleteAddress(data.id, data.type) }), {
+        openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteAddressMessage', description: 'confirmDeleteAddress', onRemove: () => deleteAddress({ addressId: data.id, type: data.type }) }), {
             className: 'messagePopup',
             accountIcon: true,
         });
     }, [data]);
     const handleEditAddressPopup = useCallback(() => {
-        openPopup(React.createElement(AddressForm, { title: type === 'billing' ? `updateYourBillingAddress` : type == 'shipping' ? `updateYourShippingAddress` : 'updateYourAddress', data: data }), {
+        openPopup(React.createElement(AddressForm, { title: type === 'billing' ? `updateYourBillingAddress` : type == 'shipping' ? `updateYourShippingAddress` : 'updateYourAddress', data: data, isCheckoutPage: select_address }), {
             accountIcon: true,
         });
     }, [data]);
@@ -38,7 +38,7 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
                     React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedAddresses?.id === data.id ? 'selected' : 'note-selected'}` },
                         React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' }))))),
             !checkout_review && (React.createElement("div", { className: `edit-remove-wrapper` },
-                React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: 'btn-one-address-version' }),
+                !select_address || (select_address && checkedId == data.id) ? (React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: 'btn-one-address-version' })) : null,
                 !select_address && !data.is_default && (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: `vertical-line` }),
                     React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: 'btn-more-address-version' })))))))));

package/dist/modules/address/AddressProvider.js

@@ -24,34 +24,49 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
     useEffect(() => {
         if (isLoggedIn) {
             api.get({ url: 'addresses' }).then((res) => {
-                setAddresses(res.data);
-                setSelectedAddresses(addressType
-                    ? {
-                        shipping: res.data[0],
-                        billing: res.data[0],
-                    }
-                    : res.data[0]);
+                if (addressType) {
+                }
+                else {
+                    setAddresses(res.addresses);
+                    setSelectedAddresses(res.addresses[0]);
+                }
                 setAddressLoading(false);
             });
         }
     }, [isLoggedIn]);
-    const createAddress = async (data) => {
+    const createAddress = async ({ data, type, isCheckoutPage }) => {
         return await api.post('addresses', data).then((res) => {
-            setAddresses(res.data);
-            setSelectedAddresses(addressType
-                ? {
-                    shipping: res.data[0],
-                    billing: res.data[0],
+            if (addressType) {
+            }
+            else {
+                setAddresses(res.addresses);
+                if (isCheckoutPage) {
+                    selectAddress({ checkedId: res.currentAddress.id });
+                    setSelectedAddresses(res.currentAddress);
+                }
+                else {
+                    setSelectedAddresses(res.addresses[0]);
                 }
-                : res.data[0]);
+            }
         });
     };
-    const updateAddress = async (data, addressId) => {
+    const updateAddress = async ({ data, addressId, type, isCheckoutPage }) => {
         return await api.put(`addresses/${addressId}`, data).then((res) => {
-            setAddresses(res.data);
+            if (addressType) {
+            }
+            else {
+                setAddresses(res.addresses);
+                if (isCheckoutPage) {
+                    selectAddress({ checkedId: res.currentAddress.id });
+                    setSelectedAddresses(res.currentAddress);
+                }
+                else {
+                    setSelectedAddresses(res.addresses[0]);
+                }
+            }
         });
     };
-    const deleteAddress = async (addressId) => {
+    const deleteAddress = async ({ addressId, type }) => {
         return await api.delete(`addresses/${addressId}`).then((res) => {
             setAddresses(res.data);
         });

package/dist/modules/address/SelectAddressPopup/index.js

@@ -12,7 +12,7 @@ const SelectAddressPopup = Memo(({ title, type }) => {
     const { selectAddress, addresses, hasAddressType, selectedAddresses } = useAddressContext();
     const [checkedId, setCheckedId] = useState(() => selectedAddresses.id, [selectedAddresses]);
     const handleNewAddressPopup = () => {
-        openPopup(React.createElement(AddressForm, { title: type == 'shipping' ? `addNewShippingAddress` : type == 'billing' ? 'addNewBillingAddress' : 'addNewAddress', selected: { value: false, type: type } }), {
+        openPopup(React.createElement(AddressForm, { title: type == 'shipping' ? `addNewShippingAddress` : type == 'billing' ? 'addNewBillingAddress' : 'addNewAddress', type: type, isCheckoutPage: true }), {
             accountIcon: true,
         });
     };

package/dist/modules/auth/ForgotPasswordTemplate/index.js

@@ -94,9 +94,7 @@ const ForgotPasswordTemplate = ({ signInUrl = '/sign-in' }) => {
                     React.createElement("div", { className: 'recovery-wrap' },
                         React.createElement(Text, { className: 'account-p account-p2 account-font-medium account-primary-color1 recovery-text', text: 'recoveryText' }),
                         "\u00A0",
-                        React.createElement(Text, { className: 'account-p account-p2 account-font-bold account-primary-color1 recovery-email', 
-                            // text={forgotState.email}
-                            text: 'antonyanwm@gmail.com' })),
+                        React.createElement(Text, { className: 'account-p account-p2 account-font-bold account-primary-color1 recovery-email', text: forgotState.email })),
                     React.createElement("div", { className: 'try-again-wrap' },
                         React.createElement(Text, { text: `resendNewLink`, onClick: handleTryAgain, className: `account-p account-p3 account-font-bold account-primary-color1 underline try-again-text ${forgotState.isBtnDisabled ? 'disabled' : ''}` }))),
                 React.createElement("div", { className: 'col-3 col-t-1 col-m-0' })))))));

package/dist/modules/auth/ResetPasswordTemplate/ExpiredLink/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ExpiredLinkProps {
+    signInUrl?: any;
+}
+declare const ExpiredLink: ({ signInUrl }: ExpiredLinkProps) => React.JSX.Element;
+export default ExpiredLink;

package/dist/modules/auth/ResetPasswordTemplate/ExpiredLink/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link, Text } from '@weareconceptstudio/core';
+//* Styles
+import ExpiredLinkStyle from './style';
+//* Component
+import AccountContainer from '../../../../components/AccountContainer';
+const ExpiredLink = ({ signInUrl }) => {
+    return (React.createElement(ExpiredLinkStyle, { className: 'expired-container' },
+        React.createElement(AccountContainer, { className: 'wrapper-container', row: true, full: true },
+            React.createElement("div", { className: 'col-3 col-t-1 col-m-0' }),
+            React.createElement("div", { className: 'wrapper-expired col-6 col-t-10 col-m-12' },
+                React.createElement(Text, { className: 'account-h2 account-font-bold account-primary-color1 expired-title-text', text: 'titleExpired' }),
+                React.createElement("div", { className: 'expired-description-wrap' },
+                    React.createElement(Text, { className: 'account-p account-p2 account-font-medium account-primary-color1 expired-description-text', text: 'descriptionExpired' })),
+                React.createElement("div", { className: ' expired-link-wrap' },
+                    React.createElement(Link, { href: signInUrl },
+                        React.createElement(Text, { text: `linkTextResentExpired`, className: `account-p account-p3 account-font-bold account-primary-color1 underline expired-link-text ` })))),
+            React.createElement("div", { className: 'col-3 col-t-1 col-m-0' }))));
+};
+export default ExpiredLink;

package/dist/modules/auth/ResetPasswordTemplate/ExpiredLink/style.d.ts

@@ -0,0 +1,2 @@
+export default ExpiredLinkStyle;
+declare const ExpiredLinkStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/modules/auth/ResetPasswordTemplate/ExpiredLink/style.js

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+const ExpiredLinkStyle = styled.section `
+	--account_expiredRecoveryLinkWrapMTop: var(--sp3x);
+	--account_expiredTryAgainWrapMTop: var(--sp1x);
+
+	width: 100%;
+	display: flex;
+	justify-content: center;
+
+	.expired-title-text,
+	.expired-description-text {
+		text-align: center;
+	}
+
+	.expired-description-wrap,
+	.expired-link-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.expired-description-wrap {
+		margin-top: var(--account_expiredRecoveryLinkWrapMTop);
+	}
+
+	.expired-link-wrap {
+		margin-top: var(--account_expiredTryAgainWrapMTop);
+
+		.expired-link-text {
+			transition: color var(--account_trTime) ease-out;
+			cursor: pointer;
+
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						color: var(--account_primaryColor3);
+					}
+				}
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_expiredRecoveryLinkWrapMTop: var(--sp2x);
+		--account_expiredTryAgainWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_expiredRecoveryLinkWrapMTop: var(--sp2x);
+		--account_expiredTryAgainWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_expiredRecoveryLinkWrapMTop: var(--sp2x);
+		--account_expiredTryAgainWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_expiredRecoveryLinkWrapMTop: var(--sp2x);
+		--account_expiredTryAgainWrapMTop: var(--sp0-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_expiredRecoveryLinkWrapMTop: var(--sp1-5x);
+		--account_expiredTryAgainWrapMTop: var(--sp0-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_expiredRecoveryLinkWrapMTop: var(--sp1-5x);
+		--account_expiredTryAgainWrapMTop: var(--sp0-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_expiredRecoveryLinkWrapMTop: var(--sp1-5x);
+		--account_expiredTryAgainWrapMTop: var(--sp0-5x);
+
+		padding: 0 var(--sp2x);
+	}
+`;
+export default ExpiredLinkStyle;

package/dist/modules/auth/ResetPasswordTemplate/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface ResetPasswordProps {
     formFields?: [];
     urlParams?: any;
+    signInUrl?: string;
 }
-declare const ResetPasswordTemplate: ({ formFields, urlParams }: ResetPasswordProps) => React.JSX.Element;
+declare const ResetPasswordTemplate: ({ formFields, urlParams, signInUrl }: ResetPasswordProps) => React.JSX.Element;
 export default ResetPasswordTemplate;

package/dist/modules/auth/ResetPasswordTemplate/index.js

@@ -1,34 +1,56 @@
-import React, { useCallback, useState } from 'react';
-import { Text, Link, Page } from '@weareconceptstudio/core';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FormBuilder } from '@weareconceptstudio/form';
-import { AccountButton } from '../../../components';
-import ResetPasswordTemplateStyle from './style';
-import { defaultFormFields } from './utils';
+import { Text, Link, Page } from '@weareconceptstudio/core';
+//* Provider
 import { useAccountContext } from '../../../AccountProvider';
+//* Utils
+import { defaultFormFields } from './utils';
+//* Style
+import ResetPasswordTemplateStyle from './style';
+//* Component
+import ExpiredLink from './ExpiredLink';
+import { AccountButton } from '../../../components';
 // @ts-ignore
-const ResetPasswordTemplate = ({ formFields = defaultFormFields, urlParams = {} }) => {
+const ResetPasswordTemplate = ({ formFields = defaultFormFields, urlParams = {}, signInUrl }) => {
     const { useUser } = useAccountContext();
-    const { resetPassword } = useUser();
+    const { resetPassword, checkTokenResetPassword } = useUser();
     const [isSuccess, setIsSuccess] = useState(false);
+    const [isValidToken, setIsValidToken] = useState(false);
+    // if (Object.values(urlParams).includes(undefined)) {
+    // 	window.location.href = '404';
+    // }
     const onSubmit = useCallback(async (values) => {
         return await resetPassword({
             ...values,
-            ...urlParams
+            ...urlParams,
         }).then(() => {
             setIsSuccess(true);
         });
     }, []);
+    useEffect(() => {
+        checkTokenResetPassword({ ...urlParams })
+            .then(() => {
+            setIsValidToken(true);
+        })
+            .catch((error) => {
+            if (error.status == 419 || error.status == 400) {
+                setIsValidToken('linkExpired');
+            }
+            else {
+                window.location.href = '/not-found';
+            }
+        });
+    }, [checkTokenResetPassword, urlParams]);
     return (React.createElement(Page, { className: 'reset-password use-account' },
-        React.createElement(ResetPasswordTemplateStyle, null,
-            React.createElement("div", { className: `reset-password-wrapper` }, !isSuccess ? (React.createElement(React.Fragment, null,
-                React.createElement(Text, { tag: 'h1', text: 'resetPassword', className: 'account-h2 account-font-bold account-primary-color1 title' }),
-                React.createElement(FormBuilder, { fields: formFields, onSubmit: onSubmit },
-                    React.createElement("div", { className: 'forgotLinkWrap' },
-                        React.createElement(Link, { href: '/forgot-password' },
-                            React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline forgotLink', text: 'forgotPasswordLink' }))),
-                    React.createElement(AccountButton, { type: `submit`, text: `submit`, btnType: `full-width` })))) : (React.createElement(React.Fragment, null,
-                React.createElement(Text, { tag: 'h1', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'thankYou' }),
-                React.createElement(Text, { className: 'account-p account-p2 account-font-regular account-primary-color1 successfully-message', text: 'successfullyMessage' }),
-                React.createElement(AccountButton, { text: `login`, btnType: `full-width`, url: '/sign-in', className: `additional-btn-wrap` })))))));
+        React.createElement(ResetPasswordTemplateStyle, { className: `${isValidToken == 'linkExpired' ? 'expired-page' : ' '}` }, isValidToken && isValidToken !== 'linkExpired' ? (React.createElement("div", { className: `reset-password-wrapper` }, !isSuccess ? (React.createElement(React.Fragment, null,
+            React.createElement(Text, { tag: 'h1', text: 'resetPassword', className: 'account-h2 account-font-bold account-primary-color1 title' }),
+            React.createElement(FormBuilder, { fields: formFields, onSubmit: onSubmit },
+                React.createElement("div", { className: 'forgotLinkWrap' },
+                    React.createElement(Link, { href: '/forgot-password' },
+                        React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline forgotLink', text: 'forgotPasswordLink' }))),
+                React.createElement(AccountButton, { type: `submit`, text: `submit`, btnType: `full-width` })))) : (React.createElement(React.Fragment, null,
+            React.createElement(Text, { tag: 'h1', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'thankYou' }),
+            React.createElement(Text, { className: 'account-p account-p2 account-font-regular account-primary-color1 successfully-message', text: 'successfullyMessage' }),
+            React.createElement(AccountButton, { text: `login`, btnType: `full-width`, url: '/sign-in', className: `additional-btn-wrap` }))))) : isValidToken == 'linkExpired' ? (React.createElement(ExpiredLink, { signInUrl: signInUrl })) : null)));
 };
 export default ResetPasswordTemplate;

package/dist/modules/checkout/CheckoutTemplate/index.js

@@ -13,7 +13,8 @@ import SkeletonCartTemplate from '../../cart/CartTemplate/Skeleton';
 import SequenceSkeleton from '../../../components/Sequence/Skeleton';
 import SkeletonAddressSelect from '../../address/SelectAddress/Skeleton';
 const CheckoutTemplate = () => {
-    const { checkoutAddressId } = useAddressContext();
+    const firstStepFormRef = useRef(null);
+    const { checkoutAddressId, hasCheckoutAddress, addressLoading } = useAddressContext();
     const { useCart } = useAccountContext();
     const { items, itemsCount, subtotal, total, shippingCost, freeShippingRange } = useCart();
     const [checkoutData, setCheckoutData] = useState({
@@ -26,8 +27,6 @@ const CheckoutTemplate = () => {
             [key]: value,
         }));
     };
-    const { hasCheckoutAddress, addressLoading } = useAddressContext();
-    const firstStepFormRef = useRef(null);
     const checkStep = {
         isShipping: !hasCheckoutAddress,
         isReview: hasCheckoutAddress,

package/dist/translations/en.d.ts

@@ -186,6 +186,10 @@ declare const _default: {
     balanceCategoryDate: string;
     balanceCategoryActivity: string;
     balanceCategoryAmount: string;
+    balanceHowToEarn: string;
     promoCodePlaceholder: string;
+    titleExpired: string;
+    descriptionExpired: string;
+    linkTextResentExpired: string;
 };
 export default _default;

package/dist/translations/en.js

@@ -199,6 +199,11 @@ export default {
     balanceCategoryDate: 'date',
     balanceCategoryActivity: 'activity',
     balanceCategoryAmount: 'amount',
+    balanceHowToEarn: 'How to earn?',
     //! Promocode
     promoCodePlaceholder: 'Type your code',
+    //! Expired password
+    titleExpired: 'Link expired',
+    descriptionExpired: 'To reset your password, return to the login page and select “forgot your password” to send new email.',
+    linkTextResentExpired: 'Back To log in page',
 };

package/dist/translations/hy.d.ts

@@ -186,6 +186,10 @@ declare const _default: {
     balanceCategoryDate: string;
     balanceCategoryActivity: string;
     balanceCategoryAmount: string;
+    balanceHowToEarn: string;
     promoCodePlaceholder: string;
+    titleExpired: string;
+    descriptionExpired: string;
+    linkTextResentExpired: string;
 };
 export default _default;

package/dist/translations/hy.js

@@ -199,6 +199,11 @@ export default {
     balanceCategoryDate: 'date',
     balanceCategoryActivity: 'activity',
     balanceCategoryAmount: 'amount',
+    balanceHowToEarn: 'How to earn?',
     //! Promocode
     promoCodePlaceholder: 'Type your code',
+    //! Expired password
+    titleExpired: 'Link expired',
+    descriptionExpired: 'To reset your password, return to the login page and select “forgot your password” to send new email.',
+    linkTextResentExpired: 'Back To log in page',
 };

package/dist/translations/index.d.ts

@@ -187,7 +187,11 @@ declare const _default: {
         balanceCategoryDate: string;
         balanceCategoryActivity: string;
         balanceCategoryAmount: string;
+        balanceHowToEarn: string;
         promoCodePlaceholder: string;
+        titleExpired: string;
+        descriptionExpired: string;
+        linkTextResentExpired: string;
     };
     hy: {
         editCart: string;
@@ -377,7 +381,11 @@ declare const _default: {
         balanceCategoryDate: string;
         balanceCategoryActivity: string;
         balanceCategoryAmount: string;
+        balanceHowToEarn: string;
         promoCodePlaceholder: string;
+        titleExpired: string;
+        descriptionExpired: string;
+        linkTextResentExpired: string;
     };
     ru: {
         editCart: string;
@@ -567,7 +575,11 @@ declare const _default: {
         balanceCategoryDate: string;
         balanceCategoryActivity: string;
         balanceCategoryAmount: string;
+        balanceHowToEarn: string;
         promoCodePlaceholder: string;
+        titleExpired: string;
+        descriptionExpired: string;
+        linkTextResentExpired: string;
     };
 };
 export default _default;

package/dist/translations/ru.d.ts

@@ -186,6 +186,10 @@ declare const _default: {
     balanceCategoryDate: string;
     balanceCategoryActivity: string;
     balanceCategoryAmount: string;
+    balanceHowToEarn: string;
     promoCodePlaceholder: string;
+    titleExpired: string;
+    descriptionExpired: string;
+    linkTextResentExpired: string;
 };
 export default _default;

package/dist/translations/ru.js

@@ -199,6 +199,11 @@ export default {
     balanceCategoryDate: 'date',
     balanceCategoryActivity: 'activity',
     balanceCategoryAmount: 'amount',
+    balanceHowToEarn: 'How to earn?',
     //! Promocode
     promoCodePlaceholder: 'Type your code',
+    //! Expired password
+    titleExpired: 'Link expired',
+    descriptionExpired: 'To reset your password, return to the login page and select “forgot your password” to send new email.',
+    linkTextResentExpired: 'Back To log in page',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/account",
-	"version": "0.2.8",
+	"version": "0.2.9",
 	"description": "Concept Studio Account",
 	"author": "Concept Studio",
 	"license": "ISC",