@weareconceptstudio/account 0.1.9 → 0.2.1

package/dist/components/AccountButton/index.d.ts

@@ -1,3 +1,3 @@
 export default AccountButton;
-declare const AccountButton: React.NamedExoticComponent<object>;
+declare function AccountButton(props: any): React.JSX.Element;
 import React from 'react';

package/dist/components/AccountButton/index.js

@@ -2,13 +2,15 @@ import React, { memo, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { Link, useTranslation } from '@weareconceptstudio/core';
 import AccountButtonStyle from './style';
-const AccountButton = memo(({ btnType, text, className, onClick, children, url, customLinkProps, target, type = 'button', disabled = false, svg_icon }) => {
+const AccountButton = (props) => {
+    const { btnType, text, className, onClick, children, url, customLinkProps, target, type = 'button', disabled = false, svg_icon } = props;
     const { translate } = useTranslation();
     const Component = useMemo(() => (url ? Link : 'button'), [url]);
     const customProps = useMemo(() => (url ? { ...customLinkProps, url, target } : { type, disabled }), [url, type, disabled]);
     const classString = classNames('btn-wrap', {
         [btnType]: btnType,
         [className]: className,
+        'disabled': disabled,
     });
     const handleClick = useCallback(() => {
         return !disabled && onClick?.();
@@ -17,5 +19,5 @@ const AccountButton = memo(({ btnType, text, className, onClick, children, url,
         React.createElement(Component, { ...customProps },
             svg_icon || children || translate(text),
             " ")));
-});
+};
 export default AccountButton;

package/dist/components/AccountContainer/index.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import AccountContainerStyle from './style';
 const AccountContainer = forwardRef(({ row, isSection, full, className, children }, ref) => {
     //! Ref
-    const contRef = useRef();
+    const contRef = useRef(null);
     //! Imperative Handle
     useImperativeHandle(ref, () => contRef.current, []);
     //! ClassName

package/dist/components/TotalCheckout/Skeleton/icons.d.ts

@@ -0,0 +1,2 @@
+export const skeletonTotal: React.JSX.Element;
+import React from 'react';

package/dist/components/TotalCheckout/Skeleton/icons.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export const skeletonTotal = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '528', height: '290', viewBox: '0 0 528 290', fill: 'none' },
+    React.createElement("line", { y1: '45', x2: '528', y2: '45', stroke: '#EFF1F2', "stroke-width": '2' }),
+    React.createElement("rect", { width: '160', height: '30', rx: '12', fill: '#EFF1F2' }),
+    React.createElement("rect", { y: '82', width: '90', height: '21', rx: '10.5', fill: '#EFF1F2' }),
+    React.createElement("rect", { x: '391', y: '82', width: '137', height: '21', rx: '10.5', fill: '#EFF1F2' }),
+    React.createElement("rect", { x: '391', y: '174', width: '137', height: '21', rx: '10.5', fill: '#EFF1F2' }),
+    React.createElement("rect", { x: '436', y: '128', width: '91', height: '21', rx: '10.5', fill: '#EFF1F2' }),
+    React.createElement("rect", { y: '128', width: '90', height: '21', rx: '10.5', fill: '#EFF1F2' }),
+    React.createElement("rect", { y: '174', width: '90', height: '21', rx: '10.5', fill: '#EFF1F2' }),
+    React.createElement("rect", { x: '1', y: '227', width: '527', height: '63', rx: '31.5', fill: '#EFF1F2' })));

package/dist/components/TotalCheckout/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export default SkeletonTotalCheckout;
+declare function SkeletonTotalCheckout(): React.JSX.Element;
+import React from 'react';

package/dist/components/TotalCheckout/Skeleton/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+//* Styles
+import { skeletonTotal } from './icons';
+import SkeletonTotalCheckoutStyle from './style';
+//* Component
+const SkeletonTotalCheckout = () => {
+    return (React.createElement(SkeletonTotalCheckoutStyle, null,
+        React.createElement("div", { className: 'wrapper-skeleton' }, skeletonTotal)));
+};
+export default SkeletonTotalCheckout;

package/dist/components/TotalCheckout/Skeleton/style.d.ts

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

package/dist/components/TotalCheckout/Skeleton/style.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+const SkeletonTotalCheckoutStyle = styled.div `
+	.wrapper-skeleton {
+		svg {
+			width: 100%;
+			height: auto;
+		}
+	}
+`;
+export default SkeletonTotalCheckoutStyle;

package/dist/components/TotalCheckout/index.js

@@ -7,7 +7,9 @@ import { Input, Radio } from '@weareconceptstudio/form';
 import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
 //* Style
 import TotalCheckoutStyle from './style';
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost, fillCheckoutData, checkoutData, isCheckout = false }) => {
+//* Skeleton
+import SkeletonTotalCheckout from './Skeleton';
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost, fillCheckoutData, checkoutData, isCheckout = false, loading }) => {
     const { currency, useUser } = useAccountContext();
     const { user } = useUser();
     const savedCards = useMemo(() => {
@@ -36,7 +38,7 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
     return (React.createElement(TotalCheckoutStyle, null,
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),
-            React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
+            React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !loading ? (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
                 React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `orderSummary` }),
                 React.createElement("div", { className: `od-line` }),
                 React.createElement("div", { className: `od-item-wrap` },
@@ -48,8 +50,8 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                 React.createElement("div", { className: `od-item-wrap` },
                     React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `total` }),
                     React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currnecy2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
-                isCheckout ? (React.createElement(React.Fragment, null,
-                    typeof isShipping === 'boolean' && !isShipping ? (React.createElement(Input.TextArea, { onChange: (e) => fillCheckoutData('note', e.target.value), placeholder: 'checkoutCommentPlaceholder', containerClassName: `comment-field`, className: `account-p account-p3 account-font-regular account-primary-color1` })) : null,
+                isCheckout && typeof isShipping === 'boolean' && !isShipping ? (React.createElement(React.Fragment, null,
+                    React.createElement(Input.TextArea, { onChange: (e) => fillCheckoutData('note', e.target.value), placeholder: 'checkoutCommentPlaceholder', containerClassName: `comment-field`, className: `account-p account-p3 account-font-regular account-primary-color1` }),
                     React.createElement(Radio.Group, { value: checkoutData.paymentType, onChange: (val) => fillCheckoutData('paymentType', val), options: [
                             { label: 'Visa Arca', value: 'credit_card' },
                             { label: 'Idram', value: 'idram' },
@@ -59,6 +61,6 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                             { label: 'Cash', value: 'cash_on_delivery' },
                         ] }),
                     React.createElement("div", { style: { marginTop: 20 } }, savedCards))) : null,
-                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick(), className: `sticky-wrap-btn ${buttonProps.disabled ? 'disabled' : ''}` })))))));
+                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick(), className: `sticky-wrap-btn` }))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });
 export default TotalCheckout;

package/dist/components/WarningMessage/index.d.ts

@@ -1,3 +1,8 @@
 export default WarningMessage;
-declare const WarningMessage: React.NamedExoticComponent<object>;
+declare function WarningMessage({ error, isSent, successTitle, successSubtitle }: {
+    error: any;
+    isSent: any;
+    successTitle: any;
+    successSubtitle: any;
+}): React.JSX.Element;
 import React from 'react';

package/dist/components/WarningMessage/index.js

@@ -1,10 +1,10 @@
-import React, { memo as Memo } from 'react';
+import React from 'react';
 import { Text } from '@weareconceptstudio/core';
 //* Style
 import WarningMessageStyle from './style';
-const WarningMessage = Memo(({ error, isSent, successTitle, successSubtitle }) => {
+const WarningMessage = ({ error, isSent, successTitle, successSubtitle }) => {
     return ((isSent || error) && (React.createElement(WarningMessageStyle, { className: `message-container account-${error ? 'error' : 'success'}-color-bg` },
         React.createElement(Text, { className: `account-p account-p4 message-title account-font-bold account-${error ? 'error' : 'success'}-color`, text: error || successTitle }),
         !error && (React.createElement(Text, { className: `account-p account-p4 message-subtitle account-font-regular account-${error ? 'error' : 'success'}-color`, text: successSubtitle })))));
-});
+};
 export default WarningMessage;

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

@@ -7,5 +7,5 @@ interface AccountSettingsProps {
     onAccountUpdate: () => Promise<any>;
     onPasswordUpdate: () => Promise<any>;
 }
-declare const AccountSettingsTemplate: ({ user, onAccountUpdate, onPasswordUpdate, displayFields, accountFormFields, passwordFormFields }: AccountSettingsProps) => React.JSX.Element;
+declare const AccountSettingsTemplate: ({ displayFields, accountFormFields, passwordFormFields }: AccountSettingsProps) => React.JSX.Element;
 export default AccountSettingsTemplate;

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

@@ -2,9 +2,12 @@ import React from 'react';
 import AccountInfo from './AccountInfo';
 import AccountPassword from './AccountPassword';
 import AccountSettingsTemplateStyle from './style';
-const AccountSettingsTemplate = ({ user, onAccountUpdate, onPasswordUpdate, displayFields, accountFormFields, passwordFormFields }) => {
+import { useAccountContext } from '../../../AccountProvider';
+const AccountSettingsTemplate = ({ displayFields, accountFormFields, passwordFormFields }) => {
+    const { useUser } = useAccountContext();
+    const { user, updateAccount, updatePassword } = useUser();
     return (React.createElement(AccountSettingsTemplateStyle, null,
-        React.createElement(AccountInfo, { user: user, onAccountUpdate: onAccountUpdate, displayFields: displayFields, formFields: accountFormFields }),
-        React.createElement(AccountPassword, { onPasswordUpdate: onPasswordUpdate, formFields: passwordFormFields })));
+        React.createElement(AccountInfo, { user: user, onAccountUpdate: updateAccount, displayFields: displayFields, formFields: accountFormFields }),
+        React.createElement(AccountPassword, { onPasswordUpdate: updatePassword, formFields: passwordFormFields })));
 };
 export default AccountSettingsTemplate;

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

@@ -1,8 +1,7 @@
 export default AccountTemplate;
-declare function AccountTemplate({ isFullWidth, menuOptions, children, onSignOut }: {
+declare function AccountTemplate({ isFullWidth, menuOptions, children }: {
     isFullWidth?: boolean;
     menuOptions?: any[];
     children: any;
-    onSignOut: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -1,8 +1,11 @@
 import React, { useMemo } from 'react';
 import { Text, Link, useUi, Page } from '@weareconceptstudio/core';
 import AccountStyle from './style';
-const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children, onSignOut }) => {
+import { useAccountContext } from '../../../AccountProvider';
+const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children }) => {
     const { winWidth } = useUi();
+    const { useUser } = useAccountContext();
+    const { user, isLoggedIn, signOut } = useUser();
     //! Line Store
     const lineStore = useMemo(() => {
         if (winWidth < 1024) {
@@ -14,7 +17,7 @@ const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children, onSi
         return menuOptions.map((menuItem, index) => (React.createElement(Link, { key: index, href: menuItem.url, className: `menu-item ${menuItem.className ? menuItem.className : ''}`, ...menuItem.options },
             React.createElement(Text, { tag: `span`, className: `account-p account-p1 account-font-bold sidebar-item`, text: menuItem.name }))));
     }, [menuOptions]);
-    return (React.createElement(Page, { className: 'account use-account' },
+    return user && isLoggedIn ? (React.createElement(Page, { className: 'account use-account' },
         React.createElement(AccountStyle, { className: 'account-container' },
             React.createElement("div", { className: 'account-wrap' },
                 React.createElement("aside", { className: 'sidebar' },
@@ -23,9 +26,9 @@ const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children, onSi
                             React.createElement(Text, { className: 'account-p account-p1 account-font-bold account-primary-color1', text: 'myAccount' }),
                             React.createElement("div", { className: `account-line` })),
                         React.createElement("div", { className: 'tabs-wrap' }, menu),
-                        React.createElement(Text, { text: 'signOut', onClick: onSignOut, className: 'account-p account-p1 account-error-color account-font-bold sign-out' }))),
+                        React.createElement(Text, { text: 'signOut', onClick: signOut, className: 'account-p account-p1 account-error-color account-font-bold sign-out' }))),
                 lineStore,
                 React.createElement("div", { className: `right-bar` },
-                    React.createElement("div", { className: `max-width-wrap ${isFullWidth ? 'full-max-width' : ''}` }, children))))));
+                    React.createElement("div", { className: `max-width-wrap ${isFullWidth ? 'full-max-width' : ''}` }, children)))))) : null;
 };
 export default AccountTemplate;

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

@@ -38,6 +38,6 @@ const AddressForm = Memo(({ title, data, type }) => {
                 React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1 address-form-is-default-checkbox`, text: `${type === 'shipping' ? 'makeYourDefaultShippingAddress' : type == 'billing' ? 'makeYourDefaultBillingAddress' : 'makeYourDefaultAddress'}` }))) : (React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1 address-form-is-default`, text: `${type === 'shipping' ? 'thisYourDefaultShippingAddress' : type == 'billing' ? 'thisYourDefaultBillingAddress' : 'thisYourDefaultAddress'}` }))),
             React.createElement("div", { className: `cancel-and-save-wrap` },
                 React.createElement(AccountButton, { text: `cancel`, onClick: closePopup, btnType: `green-large-text`, className: `address-form-cancel-btn` }),
-                React.createElement(AccountButton, { type: 'submit', text: `saveAndApply`, btnType: `full-width`, className: `address-form-cancel-submit ${isDisabled ? 'disabled' : ''}` })))));
+                React.createElement(AccountButton, { type: 'submit', text: `saveAndApply`, btnType: `full-width`, className: `address-form-cancel-submit`, disabled: isDisabled })))));
 });
 export default AddressForm;

package/dist/modules/address/AddressItem/index.d.ts

@@ -1,10 +1,13 @@
 export default AddressItem;
-declare function AddressItem({ type, title, data, checkout_review, select_address, onClick }: {
+declare function AddressItem({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className }: {
     type: any;
     title: any;
     data: any;
     checkout_review: any;
     select_address: any;
     onClick: any;
+    checkedId: any;
+    setCheckedId: any;
+    className: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -7,9 +7,9 @@ import AccountButton from '../../../components/AccountButton';
 import WarningMessageForPopup from '../../../components/WarningMessageForPopup';
 //* Style
 import AddressItemStyle from './style';
-const AddressItem = ({ type, title, data, checkout_review, select_address, onClick }) => {
+const AddressItem = ({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className }) => {
     const { openPopup } = useUi();
-    const { deleteAddress, selectedAddresses, selectAddress } = useAddressContext();
+    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) }), {
@@ -22,7 +22,7 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
             accountIcon: true,
         });
     }, [data]);
-    return (data && (React.createElement(AddressItemStyle, { className: `item-container` },
+    return (data && (React.createElement(AddressItemStyle, { className: `item-container ${className || ''}` },
         checkout_review && (React.createElement("div", { className: `change-address-wrap` },
             React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: title }),
             React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
@@ -34,7 +34,7 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
                     React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: `${data.city}` }),
                     React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 phone col-wrap`, text: `${data.phone}` })),
                 data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style is-default`, text: `${type === 'shipping' ? 'defaultShippingAddress' : type == 'billing' ? 'defaultBillingAddress' : 'defaultAddress'}` })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style opacity-zero`, text: `empty` })),
-                select_address && (React.createElement("div", { className: `circle-selected-wrap cursor-pointer ${selectedAddresses?.id === data.id ? 'active' : ''}`, onClick: () => selectAddress(data) },
+                select_address && (React.createElement("div", { className: `circle-selected-wrap cursor-pointer ${checkedId == data.id ? 'active' : ''}`, onClick: () => setCheckedId(data.id) },
                     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` },

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

@@ -18,6 +18,10 @@ const AddressItemStyle = styled.section `
 		margin-top: var(--account_itemDistance);
 	}
 
+	&.full {
+		--account_itemWidth: 100%;
+	}
+
 	.item-internal-wrap {
 		display: flex;
 		flex-direction: column;

package/dist/modules/address/AddressProvider.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { api } from '@weareconceptstudio/core';
 const AddressContext = createContext(null);
 export const useAddressContext = () => {
@@ -6,8 +6,8 @@ export const useAddressContext = () => {
     return context;
 };
 export const AddressProvider = ({ addressType, addressFormFields = [], useUser, useCart, children }) => {
-    const userContext = useUser();
-    const cartContext = useCart();
+    const { isLoggedIn } = useUser();
+    const { getCart } = useCart();
     const [addressLoading, setAddressLoading] = useState(true);
     const [addresses, setAddresses] = useState(addressType ? { billing: [], shipping: [] } : []);
     const [selectedAddresses, setSelectedAddresses] = useState(addressType ? { billing: {}, shipping: {} } : {});
@@ -22,7 +22,7 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
         return addresses.length > 0;
     }, [hasAddressType, addresses]);
     useEffect(() => {
-        if (userContext.isLoggedIn) {
+        if (isLoggedIn) {
             api.get({ url: 'addresses' }).then((res) => {
                 setAddresses(res.data);
                 setSelectedAddresses(addressType
@@ -34,7 +34,7 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
                 setAddressLoading(false);
             });
         }
-    }, [userContext.isLoggedIn]);
+    }, [isLoggedIn]);
     const createAddress = async (data) => {
         return await api.post('addresses', data).then((res) => {
             setAddresses(res.data);
@@ -56,10 +56,11 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
             setAddresses(res.data);
         });
     };
-    const selectAddress = (data) => {
-        setSelectedAddresses(data);
-        setCheckoutAddressId(data.id);
-        cartContext.getCart({ addressId: data.id });
+    const selectAddress = ({ checkedId, type }) => {
+        const checkedAddress = (type ? addresses[type] : addresses).find((item) => item.id === checkedId);
+        setSelectedAddresses(checkedAddress);
+        setCheckoutAddressId(checkedId);
+        getCart({ addressId: checkedId });
     };
     return (React.createElement(AddressContext.Provider, { value: {
             addressLoading,

package/dist/modules/address/SelectAddress/index.d.ts

@@ -1,6 +1,3 @@
 export default SelectAddress;
-declare function SelectAddress({ type, title }: {
-    type: any;
-    title: any;
-}): React.JSX.Element;
+declare function SelectAddress(): React.JSX.Element;
 import React from 'react';

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

@@ -1,24 +1,26 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useUi } from '@weareconceptstudio/core';
 import { useAddressContext } from '../AddressProvider';
-import { Text, useUi } from '@weareconceptstudio/core';
-import AddressForm from '../AddressForm';
+import SelectAddressPopup from '../SelectAddressPopup';
 import AddressItem from '../AddressItem';
-import AccountButton from '../../../components/AccountButton';
-import SelectAddressStyle from './style';
-const SelectAddress = ({ type, title }) => {
+const SelectAddress = () => {
     const { openPopup } = useUi();
-    const { addresses, hasAddressType } = useAddressContext();
-    const handleNewAddressPopup = () => {
-        openPopup(React.createElement(AddressForm, { title: `addNewShippingAddress`, selected: { value: false, type: 'shipping' } }), {
-            accountIcon: true,
-        });
-    };
-    return (React.createElement(SelectAddressStyle, null,
-        React.createElement("div", { className: `select-address-wrap` },
-            React.createElement(Text, { tag: `h6`, className: hasAddressType ? `account-h6 account-font-bold account-primary-color1` : 'account-p account-p2 account-font-bold account-primary-color1', text: title }),
-            React.createElement(AccountButton, { onClick: handleNewAddressPopup, text: `addNewAdd`, btnType: hasAddressType ? `purple-text` : 'green-small-text' })),
-        addresses?.length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, addresses.map((item, index) => {
-            return (React.createElement(AddressItem, { id: item.id, type: type, data: item, key: index, select_address: true, checkout_review: false }));
-        }))) : null));
+    const addressContext = useAddressContext();
+    const { selectedAddresses, setSelectedAddresses, hasAddressType } = addressContext;
+    const handleSelectPopup = useCallback(({ title, type }) => {
+        openPopup(React.createElement(SelectAddressPopup, { title: title, type: type }), { accountIcon: true });
+    }, []);
+    return (React.createElement("div", { className: `shipping-billing-change-wrapper` }, hasAddressType ? (React.createElement(React.Fragment, null,
+        React.createElement(AddressItem, { checkout_review: true, type: 'shipping', select_address: false, title: 'shippingAddress', data: selectedAddresses.shipping, onClick: () => handleSelectPopup({
+                title: 'selectShippingAddress',
+                type: 'shipping',
+            }), setSelectedAddresses: setSelectedAddresses }),
+        React.createElement(AddressItem, { checkout_review: true, type: 'billing', select_address: false, title: 'billingAddress', data: selectedAddresses.billing, onClick: () => handleSelectPopup({
+                title: 'selectBillingAddress',
+                type: 'billing',
+            }) }))) : (React.createElement(AddressItem, { checkout_review: true, type: 'shipping', title: 'address', className: 'full', select_address: false, data: selectedAddresses, onClick: () => handleSelectPopup({
+            title: 'address',
+            type: null,
+        }) }))));
 };
 export default SelectAddress;

package/dist/modules/address/SelectAddressPopup/index.d.ts

@@ -0,0 +1,3 @@
+export default SelectAddressPopup;
+declare const SelectAddressPopup: React.NamedExoticComponent<object>;
+import React from 'react';

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

@@ -0,0 +1,34 @@
+import React, { memo as Memo, useCallback, useState } from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+//* Components
+import AddressForm from '../AddressForm';
+import AddressItem from '../AddressItem';
+import AccountButton from '../../../components/AccountButton';
+//* Style
+import SelectAddressPopupStyle from './style';
+import { useAddressContext } from '../AddressProvider';
+const SelectAddressPopup = Memo(({ title, type }) => {
+    const { openPopup, closePopup } = useUi();
+    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 } }), {
+            accountIcon: true,
+        });
+    };
+    const handleAddressChangeSubmit = useCallback(() => {
+        selectAddress({ checkedId, type });
+        closePopup();
+    }, [checkedId]);
+    return (React.createElement(SelectAddressPopupStyle, null,
+        React.createElement("div", { className: `select-address-wrap` },
+            React.createElement(Text, { tag: `h6`, className: hasAddressType ? `account-h6 account-font-bold account-primary-color1` : 'account-p account-p2 account-font-bold account-primary-color1', text: title }),
+            React.createElement(AccountButton, { onClick: handleNewAddressPopup, text: `addNewAdd`, btnType: hasAddressType ? `purple-text` : 'green-small-text' })),
+        addresses?.length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, addresses.map((item, index) => {
+            return (React.createElement(AddressItem, { id: item.id, type: type, data: item, key: index, select_address: true, checkout_review: false, checkedId: checkedId, setCheckedId: setCheckedId }));
+        }))) : null,
+        React.createElement("div", { className: `cancel-and-save-wrap` },
+            React.createElement(AccountButton, { btnType: `green-large-text`, text: `cancel`, onClick: closePopup }),
+            React.createElement(AccountButton, { btnType: `full-width`, text: `saveAndApply`, onClick: handleAddressChangeSubmit }))));
+});
+export default SelectAddressPopup;

package/dist/modules/address/SelectAddressPopup/style.d.ts

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

package/dist/modules/address/{SelectShippingBillingPopup → SelectAddressPopup}/style.js

@@ -1,7 +1,30 @@
 import styled from 'styled-components';
-const SelectShippingBillingAddressStyle = styled.section `
+const SelectAddressPopupStyle = styled.section `
 	--account_cancelAndSaveWrapMTop: var(--sp5x);
 	--account_cancelDistance: var(--sp5x);
+	--account_selectAddressWrapMBot: var(--sp5x);
+	--account_itemDistance: var(--sp3x);
+
+	.select-address-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--account_selectAddressWrapMBot);
+	}
+
+	.flex-wrapper {
+		display: flex;
+		flex-wrap: wrap;
+		margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
+		margin-right: calc(-1 * calc(var(--account_itemDistance) / 2));
+
+		.item-container {
+			&:not(:nth-child(1), :nth-child(2)) {
+				margin-top: var(--account_itemDistance) !important;
+			}
+		}
+	}
 
 	.cancel-and-save-wrap {
 		display: flex;
@@ -19,36 +42,50 @@ const SelectShippingBillingAddressStyle = styled.section `
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_cancelAndSaveWrapMTop: var(--sp4x);
 		--account_cancelDistance: var(--sp3x);
+		--account_selectAddressWrapMBot: var(--sp4x);
+		--account_itemDistance: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp3x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp3x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2-5x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2-5x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2-5x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
 
 		.cancel-and-save-wrap {
 			flex-direction: column-reverse;
@@ -66,4 +103,4 @@ const SelectShippingBillingAddressStyle = styled.section `
 		}
 	}
 `;
-export default SelectShippingBillingAddressStyle;
+export default SelectAddressPopupStyle;

package/dist/modules/address/index.d.ts

@@ -6,5 +6,4 @@ export { default as AddressItem } from "./AddressItem";
 export { default as SelectAddress } from "./SelectAddress";
 export { default as ShippingBillingInfo } from "./ShippingBillingInfo";
 export { default as ShippingBillingForm } from "./ShippingBillingForm";
-export { default as SelectShippingBilling } from "./SelectShippingBilling";
-export { default as SelectShippingBillingPopup } from "./SelectShippingBillingPopup";
+export { default as SelectShippingBillingPopup } from "./SelectAddressPopup";

package/dist/modules/address/index.js

@@ -7,4 +7,4 @@ export { default as SelectAddress } from './SelectAddress';
 export { default as ShippingBillingInfo } from './ShippingBillingInfo';
 export { default as ShippingBillingForm } from './ShippingBillingForm';
 export { default as SelectShippingBilling } from './SelectShippingBilling';
-export { default as SelectShippingBillingPopup } from './SelectShippingBillingPopup';
+export { default as SelectShippingBillingPopup } from './SelectAddressPopup';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ForgotPasswordProps {
-    onFormSubmit: (values: any) => Promise<any>;
+    signInUrl?: string;
 }
-declare const ForgotPasswordTemplate: ({ onFormSubmit }: ForgotPasswordProps) => React.JSX.Element;
+declare const ForgotPasswordTemplate: ({ signInUrl }: ForgotPasswordProps) => React.JSX.Element;
 export default ForgotPasswordTemplate;