@weareconceptstudio/account 0.3.1 → 0.3.3

package/dist/AccountProvider.js

@@ -2,6 +2,7 @@ import React, { createContext, useCallback, useContext, useEffect } from 'react'
 import { useTranslation, useUi } from '@weareconceptstudio/core';
 import { ThemeProvider } from 'styled-components';
 import { AddressProvider } from './modules/address/AddressProvider';
+import { CheckoutProvider } from './modules/checkout/CheckoutProvider';
 //* Translations
 import translations from './translations';
 //* Styles
@@ -29,10 +30,11 @@ export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', child
         }
     }, [productUrlPrefix, productPopup]);
     return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick } },
-        React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
-            React.createElement(ThemeProvider, { theme: theme },
-                React.createElement(AccountVariables, { fontFamily: fontFamily }),
-                React.createElement(AccountHelperClass, null),
-                React.createElement(AccountTypography, null),
-                children))));
+        React.createElement(CheckoutProvider, null,
+            React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
+                React.createElement(ThemeProvider, { theme: theme },
+                    React.createElement(AccountVariables, { fontFamily: fontFamily }),
+                    React.createElement(AccountHelperClass, null),
+                    React.createElement(AccountTypography, null),
+                    children)))));
 };

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

@@ -0,0 +1,2 @@
+export default Loader;
+declare function Loader(): import("react").JSX.Element;

package/dist/components/Loader/index.js

@@ -0,0 +1,7 @@
+//* Styles
+import LoaderStyle from './style';
+//* Component
+const Loader = () => {
+    return React.createElement(LoaderStyle, null);
+};
+export default Loader;

package/dist/components/Loader/style.d.ts

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

package/dist/components/Loader/style.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+const LoaderStyle = styled.div ``;
+export default LoaderStyle;

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

@@ -6,7 +6,7 @@ const CommentComp = () => {
     return (React.createElement(CommentCompStyle, { className: 'collapse-distance' },
         React.createElement(CollapseContainer, null,
             React.createElement(CollapseItem, { status: 'open', title: React.createElement(React.Fragment, null,
-                    React.createElement("div", null,
+                    React.createElement("div", { className: 'inner-wrapper-icon' },
                         React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
                             React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
                             React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),

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

@@ -1,9 +1,10 @@
 export default MuramoneyComp;
-declare function MuramoneyComp({ isMuramoney, currency, balance, useBalance, balanceHandler }: {
+declare function MuramoneyComp({ isMuramoney, currency, balance, useBalance, balanceHandler, getItemCount }: {
     isMuramoney?: boolean;
     currency: any;
     balance: any;
     useBalance: any;
     balanceHandler: any;
+    getItemCount: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -5,7 +5,7 @@ import AccountButton from '../../AccountButton';
 import { balanceFields } from './utils';
 //* Style
 import MuramoneyCompStyle from './style';
-const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, balanceHandler }) => {
+const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, balanceHandler, getItemCount }) => {
     const { translate } = useTranslation();
     //! States
     const [disable, setDisable] = useState(false);
@@ -14,9 +14,11 @@ const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, bala
         setDisable(true);
         balanceHandler(values.balance);
     };
-    return isMuramoney ? (React.createElement(MuramoneyCompStyle, { className: 'collapse-distance' },
-        React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
-                React.createElement("div", null,
+    return isMuramoney ? (React.createElement(MuramoneyCompStyle, { className: `collapse-distance ${getItemCount && balance ? ' ' : 'disable'}` },
+        React.createElement(CollapseItem, { disable: disable, 
+            // status={'open'}
+            title: React.createElement(React.Fragment, null,
+                React.createElement("div", { className: 'inner-wrapper-icon' },
                     React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
                         React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
                         React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
@@ -24,6 +26,7 @@ const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, bala
                 React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-success-text' }, handlePriceCheckFunc(useBalance, currency)),
                 React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-remove-text', onClick: () => {
                         balanceHandler(null);
+                        setDisable(false);
                     } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `muramoney-block`, formOptions: {
                     className: 'muramoney-container',
                 } },

package/dist/components/TotalCheckout/MuramoneyComp/utils.d.ts

@@ -6,5 +6,6 @@ export declare const balanceFields: {
     };
     fieldProps: {
         placeholder: string;
+        type: string;
     };
 }[];

package/dist/components/TotalCheckout/MuramoneyComp/utils.js

@@ -9,6 +9,7 @@ export const balanceFields = [
         },
         fieldProps: {
             placeholder: 'balancePlaceholder',
+            type: 'number',
         },
     },
 ];

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

@@ -1,6 +1,7 @@
 export default PromoCodeComp;
-declare function PromoCodeComp({ isPromoCode, promo_code }: {
+declare function PromoCodeComp({ isPromoCode, promo_code, getItemCount }: {
     isPromoCode?: boolean;
     promo_code: any;
+    getItemCount: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -5,7 +5,7 @@ import AccountButton from '../../AccountButton';
 import { promoCodeFields } from './utils';
 //* Style
 import PromoCodeCompStyle from './style';
-const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
+const PromoCodeComp = ({ isPromoCode = true, promo_code, getItemCount }) => {
     //! States
     const [couponCode, setCouponCode] = useState(false);
     const [disable, setDisable] = useState(false);
@@ -14,9 +14,9 @@ const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
         setCouponCode(true);
         setDisable(true);
     };
-    return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: 'collapse-distance' },
+    return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${getItemCount ? ' ' : ' disable'}` },
         React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
-                React.createElement("div", null,
+                React.createElement("div", { className: 'inner-wrapper-icon' },
                     React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },
                         React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
                         React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
@@ -24,6 +24,7 @@ const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
                 React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-success-text' }, promo_code),
                 React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: () => {
                         setCouponCode(false);
+                        setDisable(false);
                     } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
                     className: 'promo-code-container',
                 } },

package/dist/components/TotalCheckout/index.js

@@ -1,6 +1,7 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
 import { Text, CollapseContainer, handlePriceCheckFunc, numToLocalString } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
+import { useAddressContext, useCheckoutContext } from '../../modules';
 import AccountButton from '../AccountButton';
 import FreeShippingComp from './FreeShippingComp';
 import PromoCodeComp from './PromoCodeComp';
@@ -10,25 +11,51 @@ import CommentComp from './CommentComp';
 import TotalCheckoutStyle from './style';
 //* Skeleton
 import SkeletonTotalCheckout from './Skeleton';
-import { useAddressContext } from '../../modules';
-// TODO: Muramoney & Promo code
+// TODO: Promo code
 const promo_code = '10% of first order';
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, fillCheckoutData, isCheckout = false, loading }) => {
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, isCheckout = false }) => {
     const { currency, useCart, useUser } = useAccountContext();
-    const { checkoutAddressId } = useAddressContext();
+    const { fillCheckoutData, fillCart } = useCheckoutContext();
+    const { addressLoading } = useAddressContext();
     const { user } = useUser();
-    const { itemsCount, shippingCost, freeShippingRange, shippingCostValue, total, subtotal, useBalance, getCart } = useCart();
+    const { itemsCount, shippingCost, freeShippingRange, shippingCostValue, total, subtotal, useBalance, loading } = useCart();
     const handleBalance = (amount) => {
-        let params = { addressId: checkoutAddressId };
-        if (amount) {
-            params['useBalance'] = amount;
-        }
-        getCart(params);
+        fillCart('useBalance', amount);
     };
+    const innerCollapseRef = useRef(null);
+    //! disable keypress on input
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+            }
+        };
+        if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+            let inputField = innerCollapseRef.current.querySelectorAll('.base-input');
+            if (inputField.length) {
+                [...inputField].forEach((item, i) => {
+                    if (!user.balance && itemsCount && i == 1) {
+                        return;
+                    }
+                    else {
+                        item.addEventListener('keydown', handleKeyDown);
+                    }
+                });
+            }
+        }
+        return () => {
+            if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+                const inputField = innerCollapseRef.current.querySelectorAll('.base-input');
+                [...inputField].map((item) => {
+                    item.removeEventListener('keydown', handleKeyDown);
+                });
+            }
+        };
+    });
     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 && !loading ? (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
+            React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && !addressLoading && !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` },
@@ -37,16 +64,17 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, f
                 React.createElement("div", { className: `od-item-wrap` },
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `shipping` }),
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping-cost`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
-                useBalance ? (React.createElement("div", { className: `od-item-wrap` },
+                user && useBalance ? (React.createElement("div", { className: `od-item-wrap` },
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `muramoney` }),
                     React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 balance-text-block`, text: `-${handlePriceCheckFunc(useBalance, currency)}` }))) : null,
                 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-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
                 !isCheckout ? (React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, shippingCostValue: shippingCostValue, freeShippingRange: freeShippingRange })) : null,
-                React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
-                    React.createElement(MuramoneyComp, { balance: user.balance, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
-                    React.createElement(PromoCodeComp, { promo_code: promo_code })),
+                user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
+                    React.createElement("div", { ref: innerCollapseRef },
+                        React.createElement(MuramoneyComp, { getItemCount: itemsCount, balance: user.balance, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
+                        React.createElement(PromoCodeComp, { getItemCount: itemsCount, promo_code: promo_code })))) : null,
                 isCheckout && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, { fillCheckoutData: fillCheckoutData }) : null,
                 React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, className: `sticky-wrap-btn`, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick() }))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });

package/dist/components/TotalCheckout/style.js

@@ -6,6 +6,10 @@ const TotalCheckoutStyle = styled.section `
 	--account_cartMainWrapPadTop: var(--sp8x);
 	--account_leftPanelWrapWidth: calc(100% - var(--account_rightPanelWrapWidth));
 
+	/* //! size text var */
+	--account_textSize: var(--account_p4);
+	--account_lineHeightSize: var(--account_lineHeight);
+
 	/* //! Right Layout Sizes */
 	--account_odLineMTop: var(--sp2x);
 	--account_odLineMBot: var(--sp6x);
@@ -67,6 +71,13 @@ const TotalCheckoutStyle = styled.section `
 		}
 	}
 
+	.promo-code-text,
+	.muramoney-text,
+	.comment-text {
+		font-size: var(--account_textSize) !important;
+		line-height: var(--account_lineHeight) !important;
+	}
+
 	.display-none-wrap {
 		display: none !important;
 	}
@@ -84,6 +95,8 @@ const TotalCheckoutStyle = styled.section `
 
 	#collapse-item {
 		svg {
+			cursor: pointer;
+
 			path {
 				transition: all var(--account_trTime) ease-out;
 
@@ -101,11 +114,38 @@ const TotalCheckoutStyle = styled.section `
 				}
 			}
 		}
+
+		&.after-disable {
+			#collapse-title {
+				pointer-events: none;
+			}
+		}
+
+		&.disable {
+			#collapse-title {
+				p {
+					color: var(--neutral300);
+				}
+				svg {
+					path {
+						stroke: var(--neutral300);
+					}
+				}
+			}
+		}
 	}
 
 	#collapse-title {
 		display: flex;
+		align-items: flex-start;
 		gap: var(--sp1x);
+		width: fit-content;
+
+		.inner-wrapper-icon {
+			height: calc(var(--account_textSize) * var(--account_lineHeight));
+			display: flex;
+			align-items: center;
+		}
 
 		/* //! Mouse Detect */
 		@media (pointer: fine) {
@@ -132,6 +172,16 @@ const TotalCheckoutStyle = styled.section `
 	.collapse-distance {
 		margin-top: var(--account_collapseSmallDistance);
 		padding-top: var(--account_collapseSmallDistance);
+
+		&.disable {
+			#collapse-description {
+				button {
+					pointer-events: none;
+					border-color: var(--account_primaryColor5);
+					color: var(--account_primaryColor5);
+				}
+			}
+		}
 	}
 
 	.muramoney-container,

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

@@ -1,9 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 import { Text, useTranslation } from '@weareconceptstudio/core';
+import { useAccountContext } from '../../../../../AccountProvider';
 //* Styles
 import ItemHistoryStyle from './style';
 const ItemHistory = ({ date, activity, value, action_type }) => {
     const { translate } = useTranslation();
+    const { useCart } = useAccountContext();
+    const { currency } = useCart();
     //! Refs
     const titleWrapperRef = useRef();
     const getSizeItem = useRef();
@@ -36,7 +39,9 @@ const ItemHistory = ({ date, activity, value, action_type }) => {
             React.createElement(Text, { className: `account-primary-color1 account-font-medium account-p account-p1 amount-info-text ${action_type}` },
                 React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p1 mobile-amount-info-text first-letter', tag: 'span' }, translate('balanceCategoryAmount')),
                 ' ',
-                value)),
+                value,
+                " ",
+                currency)),
         React.createElement("div", { className: 'line-info' })));
 };
 export default ItemHistory;

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

@@ -28,6 +28,11 @@ const AddressFormStyle = styled.div `
 					--account_antFormItemWidth: 100%;
 				}
 			}
+
+			.empty-form-item {
+				width: var(--account_antFormItemWidth);
+				padding: 0 calc(var(--account_formItemDistance) / 2);
+			}
 		}
 
 		.default-info-wrap {

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

@@ -22,25 +22,21 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
             accountIcon: true,
         });
     }, [data]);
-    return (data && (React.createElement(AddressItemStyle, { className: `item-container ${className || ''}` },
+    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 }))),
         React.createElement("div", { className: `item-internal-wrap` },
             React.createElement("div", { className: `relative-wrapper` },
-                React.createElement("div", { className: `personal-data-wrap` },
-                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `${data.first_name} ${data.last_name}` }),
-                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 col-wrap`, text: `${data.address_1}, ${data.address_2 ? data.address_2 + ',' : ''}` }),
-                    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}` })),
+                React.createElement("div", { className: `personal-data-wrap` }, data.displayLines.map((line, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 ${index == 0 ? 'account-font-bold' : 'account-font-regular'} ${index % 2 != 0 ? 'col-wrap' : ''} account-primary-color1`, text: line })))),
                 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 ${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` },
-                !select_address || (select_address && checkedId == data.id) ? (React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: 'btn-one-address-version' })) : null,
+                React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: `btn-one-address-version ${!select_address || (select_address && checkedId == data.id) ? 'show' : ''}` }),
                 !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' })))))))));
+                    React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `btn-more-address-version` })))))))) : null;
 };
 export default AddressItem;

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

@@ -111,6 +111,16 @@ const AddressItemStyle = styled.section `
 		margin-bottom: var(--account_changeAddressWrapMBot);
 	}
 
+	.btn-one-address-version {
+		opacity: 0;
+		pointer-events: none;
+
+		&.show {
+			pointer-events: all;
+			opacity: 1;
+		}
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_itemInternalWrapPad: var(--sp3x);
 		--account_verticalLineHeight: var(--sp1-5x);

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

@@ -1,9 +1,8 @@
 export function useAddressContext(): any;
-export function AddressProvider({ addressType, addressFormFields, useUser, useCart, children }: {
+export function AddressProvider({ addressType, addressFormFields, useUser, children }: {
     addressType: any;
     addressFormFields?: any[];
     useUser: any;
-    useCart: any;
     children: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/modules/address/AddressProvider.js

@@ -1,17 +1,17 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { api } from '@weareconceptstudio/core';
+import { useCheckoutContext } from '../checkout';
 const AddressContext = createContext(null);
 export const useAddressContext = () => {
     const context = useContext(AddressContext);
     return context;
 };
-export const AddressProvider = ({ addressType, addressFormFields = [], useUser, useCart, children }) => {
+export const AddressProvider = ({ addressType, addressFormFields = [], useUser, children }) => {
     const { isLoggedIn } = useUser();
-    const { getCart } = useCart();
-    const [addressLoading, setAddressLoading] = useState(true);
+    const { fillCheckoutData, fillCart } = useCheckoutContext();
+    const [addressLoading, setAddressLoading] = useState(false);
     const [addresses, setAddresses] = useState(addressType ? { billing: [], shipping: [] } : []);
     const [selectedAddresses, setSelectedAddresses] = useState(addressType ? { billing: {}, shipping: {} } : {});
-    const [checkoutAddressId, setCheckoutAddressId] = useState(null);
     const hasAddressType = useMemo(() => {
         return !!addressType;
     }, [addressType]);
@@ -23,6 +23,7 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
     }, [hasAddressType, addresses]);
     useEffect(() => {
         if (isLoggedIn) {
+            setAddressLoading(true);
             api.get({ url: 'addresses' }).then((res) => {
                 if (addressType) {
                 }
@@ -74,8 +75,8 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
     const selectAddress = ({ checkedId, type }) => {
         const checkedAddress = (type ? addresses[type] : addresses).find((item) => item.id === checkedId);
         setSelectedAddresses(checkedAddress);
-        setCheckoutAddressId(checkedId);
-        getCart({ addressId: checkedId });
+        fillCheckoutData('addressId', checkedId);
+        fillCart('addressId', checkedId);
     };
     return (React.createElement(AddressContext.Provider, { value: {
             addressLoading,
@@ -89,6 +90,5 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
             setSelectedAddresses,
             hasCheckoutAddress,
             selectAddress,
-            checkoutAddressId,
         } }, children));
 };

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

@@ -5,8 +5,7 @@ import SelectAddressPopup from '../SelectAddressPopup';
 import AddressItem from '../AddressItem';
 const SelectAddress = () => {
     const { openPopup } = useUi();
-    const addressContext = useAddressContext();
-    const { selectedAddresses, setSelectedAddresses, hasAddressType } = addressContext;
+    const { selectedAddresses, hasAddressType } = useAddressContext();
     const handleSelectPopup = useCallback(({ title, type }) => {
         openPopup(React.createElement(SelectAddressPopup, { title: title, type: type }), { accountIcon: true });
     }, []);
@@ -14,7 +13,7 @@ const SelectAddress = () => {
         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',

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

@@ -33,26 +33,10 @@ const SelectAddressPopup = Memo(({ title, type }) => {
         if (addresses.length > 2 && flexWrapperRef.current) {
             const container = flexWrapperRef.current;
             const items = Array.from(container.children);
-            const maxHeight = Math.max(...items.slice(0, 4).map((item) => item.clientHeight));
-            const minHeight = Math.min(...items.slice(0, 4).map((item) => item.clientHeight));
-            console.log(maxHeight, minHeight);
-            console.log(maxHeight, minHeight);
-            if (winWidth < 768) {
-                const first = Math.max(...items.slice(0, 1).map((item) => item.clientHeight));
-                const second = Math.min(...items.slice(1, 2).map((item) => item.clientHeight));
-                console.log(items.slice(0, 1), items.slice(1, 2));
-                styleRef.current.style.setProperty('--item-max-height', `${first + second}px`);
-            }
-            else {
-                styleRef.current.style.setProperty('--item-max-height', `${maxHeight + minHeight}px`);
-            }
+            const maxHeight = Math.max(...items.map((item) => item.clientHeight));
+            styleRef.current.style.setProperty('--item-max-height', `${maxHeight * 2}px`);
         }
-    }, [winWidth, addresses, flexWrapperRef.current, resize]);
-    useEffect(() => {
-        if (styleRef.current) {
-            styleRef.current.style.height = styleRef.current.clientHeight + 'px';
-        }
-    }, []);
+    }, [addresses, flexWrapperRef.current, resize, winWidth]);
     return (React.createElement(SelectAddressPopupStyle, { ref: styleRef },
         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 }),

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

@@ -24,6 +24,11 @@ const ShippingBillingFormStyle = styled.div `
 				--account_antFormItemWidth: 100%;
 			}
 		}
+
+		.empty-form-item {
+			width: var(--account_antFormItemWidth);
+			padding: 0 calc(var(--account_formItemDistance) / 2);
+		}
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {

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

@@ -11,9 +11,6 @@ const ShippingBillingInfo = memo(({ className, shipping_address, billing_address
         React.createElement("div", { className: `info-space-line` }),
         React.createElement("div", { className: `info-wrap shipped` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 value`, text: `shippedTo` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.first_name} ${shipping_address.last_name}` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.address_1}, ${shipping_address.address_2 ? shipping_address.address_2 + ',' : ''}` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.city}` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 phone`, text: `${shipping_address.phone}` }))));
+            shipping_address.map((item) => (React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: item }))))));
 });
 export default ShippingBillingInfo;

package/dist/modules/cart/CartTemplate/index.d.ts

@@ -1,8 +1,9 @@
 export default CartTemplate;
-declare function CartTemplate({ children, actions, btnDisabled, checkoutUrl }: {
+declare function CartTemplate({ children, actions, btnDisabled, checkoutUrl, moreMenu }: {
     children: any;
     actions: any;
     btnDisabled: any;
     checkoutUrl?: string;
+    moreMenu: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/modules/cart/CartTemplate/index.js

@@ -12,7 +12,7 @@ const leftArrow = (React.createElement("svg", { fill: 'none', viewBox: '0 0 16 1
 import CartTemplateStyle from './style';
 //* Skeleton
 import SkeletonCartTemplate from './Skeleton';
-const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout/' }) => {
+const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout/', moreMenu }) => {
     const { shopUrl, useCart } = useAccountContext();
     const { translate } = useTranslation();
     const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue } = useCart();
@@ -33,7 +33,8 @@ const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout
                             horizontalLine: true,
                             edit: { list: false },
                         } }),
-                    shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, text: `continueShopping`, className: `continue-shop-text` })) : null)) : (React.createElement(EmptyCart, { data: items, shoppingUrl: shopUrl }))) : (React.createElement(SkeletonCartTemplate, { shopUrl: shopUrl }))),
+                    shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, text: `continueShopping`, className: `continue-shop-text` })) : null,
+                    moreMenu ? moreMenu : null)) : (React.createElement(EmptyCart, { data: items, shoppingUrl: shopUrl }))) : (React.createElement(SkeletonCartTemplate, { shopUrl: shopUrl }))),
                 children))));
 };
 export default CartTemplate;

package/dist/modules/cart/EmptyCart/icons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 export const emptyCartIcon = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '129', height: '181', viewBox: '0 0 129 181' },
-    React.createElement("g", { "clip-path": 'url(#clip0_2872_19370)' },
+    React.createElement("g", { clipPath: 'url(#clip0_2872_19370)' },
         React.createElement("path", { d: 'M107.4 170.413C98.7374 169.552 91.9468 162.232 91.9468 153.353C91.9468 144.474 98.4753 137.445 106.897 136.355L106.743 126.038L97.9344 83.301H14.4453L23.4912 125.548C23.512 125.656 23.5245 125.764 23.5245 125.872V180.963H107.554L107.396 170.421L107.4 170.413Z' }),
         React.createElement("path", { d: 'M0 126.292V180.959H20.4385V126.03L10.3482 78.9113L0 126.292Z' }),
         React.createElement("path", { d: 'M97.2981 80.2124L95.8418 73.1456H12.2695L13.7841 80.2124H97.2981Z' }),

package/dist/modules/checkout/CheckoutProvider.d.ts

@@ -0,0 +1,5 @@
+export function useCheckoutContext(): any;
+export function CheckoutProvider({ children }: {
+    children: any;
+}): React.JSX.Element;
+import React from 'react';