@weareconceptstudio/account 0.3.0 → 0.3.2

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

@@ -1,5 +1,5 @@
-import React, { memo as Memo, useCallback, useState } from 'react';
-import { useUi, Text } from '@weareconceptstudio/core';
+import React, { memo as Memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useUi, Text, useResizeObserver } from '@weareconceptstudio/core';
 //* Components
 import AddressForm from '../AddressForm';
 import AddressItem from '../AddressItem';
@@ -8,9 +8,15 @@ import AccountButton from '../../../components/AccountButton';
 import SelectAddressPopupStyle from './style';
 import { useAddressContext } from '../AddressProvider';
 const SelectAddressPopup = Memo(({ title, type }) => {
-    const { openPopup, closePopup } = useUi();
+    const { openPopup, closePopup, winWidth } = useUi();
     const { selectAddress, addresses, hasAddressType, selectedAddresses } = useAddressContext();
     const [checkedId, setCheckedId] = useState(() => selectedAddresses.id, [selectedAddresses]);
+    //! Refs
+    const flexWrapperRef = useRef();
+    const styleRef = useRef();
+    //! State
+    const [refElement, setRefElement] = useState();
+    const resize = useResizeObserver(flexWrapperRef.current ? [...[...flexWrapperRef.current.children].map((item) => item)] : null);
     const handleNewAddressPopup = () => {
         openPopup(React.createElement(AddressForm, { title: type == 'shipping' ? `addNewShippingAddress` : type == 'billing' ? 'addNewBillingAddress' : 'addNewAddress', type: type, isCheckoutPage: true }), {
             accountIcon: true,
@@ -20,11 +26,22 @@ const SelectAddressPopup = Memo(({ title, type }) => {
         selectAddress({ checkedId, type });
         closePopup();
     }, [checkedId]);
-    return (React.createElement(SelectAddressPopupStyle, null,
+    useEffect(() => {
+        setRefElement(flexWrapperRef.current);
+    }, [flexWrapperRef.current]);
+    useEffect(() => {
+        if (addresses.length > 2 && flexWrapperRef.current) {
+            const container = flexWrapperRef.current;
+            const items = Array.from(container.children);
+            const maxHeight = Math.max(...items.map((item) => item.clientHeight));
+            styleRef.current.style.setProperty('--item-max-height', `${maxHeight * 2}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 }),
             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) => {
+        addresses?.length > 0 ? (React.createElement("div", { ref: flexWrapperRef, 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` },

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

@@ -5,6 +5,10 @@ const SelectAddressPopupStyle = styled.section `
 	--account_selectAddressWrapMBot: var(--sp5x);
 	--account_itemDistance: var(--sp3x);
 
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
 	.select-address-wrap {
 		display: flex;
 		flex-wrap: wrap;
@@ -18,6 +22,8 @@ const SelectAddressPopupStyle = styled.section `
 		flex-wrap: wrap;
 		margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
 		margin-right: calc(-1 * calc(var(--account_itemDistance) / 2));
+		overflow: auto;
+		height: calc(var(--item-max-height) + var(--account_itemDistance));
 
 		.item-container {
 			&:not(:nth-child(1), :nth-child(2)) {

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,14 +12,14 @@ 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 } = useCart();
+    const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue } = useCart();
     return (React.createElement(Page, { className: 'cart use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CartTemplateStyle, null,
-                React.createElement(TotalCheckout, { total: total, loading: loading, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, freeShippingRange: freeShippingRange, buttonProps: {
+                React.createElement(TotalCheckout, { total: total, loading: loading, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, freeShippingRange: freeShippingRange, shippingCostValue: shippingCostValue, buttonProps: {
                         url: checkoutUrl,
                         disabled: btnDisabled,
                         text: 'proceedToCheckout',
@@ -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.d.ts

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

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

@@ -0,0 +1,10 @@
+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", { 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' }),
+        React.createElement("path", { d: 'M64.9637 16.9194C63.8943 17.3601 63.1121 18.0792 62.8 19.1267C62.7959 19.1475 62.7917 19.1683 62.7834 19.1849C62.9082 19.8833 63.5032 20.723 64.4852 21.5502C65.979 22.8056 68.1551 23.8989 70.6101 24.6305C75.2038 25.9981 78.986 25.5866 80.1386 24.3561C80.1469 24.3312 80.1553 24.3104 80.1636 24.2854C80.4174 23.4374 80.5006 21.7331 78.2288 19.8209C76.8848 18.6903 74.9791 17.7217 72.857 17.0899C71.384 16.6534 69.8445 16.3957 68.4256 16.3707L56.4754 0.61192C55.9595 -0.0656538 54.99 -0.202832 54.3117 0.312623C53.6335 0.828078 53.4962 1.79664 54.0121 2.47421L64.9595 16.9153L64.9637 16.9194ZM68.9416 20.7271C69.1163 20.1369 70.4228 20.0038 71.8625 20.4278C73.298 20.856 74.3216 21.6791 74.1427 22.2735C73.968 22.8638 72.6614 22.9968 71.2217 22.5728C69.7862 22.1446 68.7626 21.3216 68.9416 20.7271Z' }),
+        React.createElement("path", { d: 'M81.6718 33.8421L78.5469 29.7226L79.5081 26.4927C78.5469 26.8419 77.3569 27.0248 76.0088 27.0248C74.2737 27.0248 72.2764 26.7255 70.1751 26.102C67.5205 25.3122 65.1487 24.115 63.4968 22.7224C62.9476 22.261 62.4982 21.7913 62.1445 21.3216L61.1293 24.7344L48.7672 1.85897C48.3635 1.11073 47.4232 0.828061 46.6742 1.23544C45.9252 1.63866 45.6423 2.57811 46.0501 3.32635L65.8394 39.9403C66.1182 40.4557 66.6508 40.7509 67.2001 40.7509C67.4497 40.7509 67.6994 40.6927 67.9324 40.5638C68.6814 40.1606 68.9643 39.2212 68.5565 38.4729L66.0433 33.8255C66.5759 34.0417 67.1293 34.237 67.6994 34.4033C69.2556 34.8647 70.8783 35.1225 72.3596 35.1225C74.5566 35.1225 76.4415 34.553 77.3403 33.2352L79.2085 35.7003C79.5123 36.0993 79.9741 36.3113 80.4401 36.3113C80.7647 36.3113 81.0934 36.2074 81.3722 35.9996C82.0504 35.4841 82.1877 34.5155 81.6718 33.838V33.8421Z' }),
+        React.createElement("path", { d: 'M120.367 112.403C119.972 112.403 119.568 112.304 119.202 112.087C118.096 111.443 117.725 110.026 118.37 108.92C118.549 108.612 119.215 107.415 120.159 105.029C120.63 103.84 121.974 103.258 123.164 103.728C124.354 104.198 124.936 105.54 124.466 106.729C123.738 108.571 122.972 110.217 122.373 111.252C121.944 111.988 121.166 112.399 120.372 112.399L120.367 112.403ZM126.238 93.3024C126.134 93.3024 126.026 93.2941 125.922 93.2816C124.653 93.107 123.767 91.9431 123.942 90.6753C124.146 89.1788 124.287 87.6948 124.354 86.2689C124.416 84.9928 125.502 84.0034 126.779 84.0658C128.057 84.1281 129.043 85.2131 128.985 86.4893C128.91 88.0523 128.76 89.6693 128.535 91.2988C128.377 92.4586 127.383 93.2983 126.243 93.2983L126.238 93.3024ZM124.345 73.5696C123.442 73.5696 122.581 73.0375 122.211 72.1521C121.661 70.8427 120.996 69.5998 120.238 68.4566C119.531 67.3925 119.822 65.9542 120.892 65.2475C121.957 64.5409 123.397 64.8318 124.104 65.9002C125.019 67.2844 125.822 68.7809 126.484 70.3563C126.979 71.5327 126.426 72.8921 125.248 73.3867C124.953 73.5114 124.649 73.5696 124.349 73.5696H124.345ZM110.302 60.0057C110.003 60.0057 109.699 59.9475 109.403 59.8228C108.122 59.2824 106.744 58.8043 105.305 58.397C104.073 58.0478 103.358 56.7716 103.707 55.5412C104.057 54.3107 105.334 53.5957 106.566 53.9449C108.188 54.4022 109.749 54.9467 111.201 55.5578C112.378 56.0525 112.932 57.4118 112.437 58.5882C112.062 59.4736 111.205 60.0057 110.302 60.0057ZM50.7134 58.8625C50.5928 58.8625 50.4679 58.8542 50.3431 58.8334C48.5997 58.5549 46.9644 58.16 45.479 57.6612C44.264 57.2538 43.6107 55.9444 44.0185 54.7306C44.4263 53.5168 45.737 52.8641 46.952 53.2715C48.2002 53.6872 49.59 54.0239 51.0838 54.2608C52.3487 54.4645 53.2058 55.6534 53.0019 56.9129C52.8189 58.0519 51.8327 58.8584 50.7176 58.8584L50.7134 58.8625ZM66.1005 58.8376C64.9438 58.8376 63.9452 57.973 63.8037 56.8007C63.6498 55.5329 64.5568 54.3772 65.8259 54.2276C67.12 54.0738 68.464 53.8784 69.8287 53.6581L70.3197 53.5791C71.5805 53.3754 72.7705 54.2318 72.9744 55.4954C73.1783 56.7591 72.3211 57.9439 71.0562 58.1475L70.5777 58.2265C69.1505 58.4593 67.7358 58.663 66.3793 58.8251C66.2836 58.8376 66.1921 58.8417 66.1005 58.8417V58.8376ZM86.0397 56.5679C84.7998 56.5679 83.7762 55.5911 83.7262 54.344C83.6763 53.0678 84.6749 51.9912 85.9523 51.9413C87.1965 51.8914 88.4281 51.8706 89.6181 51.8706C89.9801 51.8706 90.3421 51.8706 90.7041 51.8789C91.9815 51.8956 93.0093 52.9431 92.9926 54.2234C92.976 55.4913 91.9441 56.5097 90.675 56.5097C90.6667 56.5097 90.6542 56.5097 90.6459 56.5097C90.3088 56.5097 89.9593 56.5097 89.6223 56.5056C88.4905 56.5056 87.3171 56.5305 86.1313 56.5762C86.1021 56.5762 86.0689 56.5762 86.0397 56.5762V56.5679ZM36.4082 47.0528C35.2389 47.0528 34.2362 46.1715 34.1072 44.9868C34.0489 44.4381 34.0156 43.8686 34.0156 43.2991C34.0156 42.1269 34.1446 40.9089 34.3943 39.6743C34.6481 38.4231 35.8714 37.6125 37.1238 37.8661C38.3763 38.1196 39.1877 39.3417 38.9338 40.593C38.7466 41.5241 38.6509 42.4345 38.6509 43.295C38.6509 43.6982 38.6717 44.0972 38.7133 44.488C38.8506 45.76 37.9311 46.899 36.6578 47.0362C36.5746 47.0445 36.4914 47.0486 36.4082 47.0486V47.0528ZM44.1142 29.1407C43.5566 29.1407 42.9949 28.9412 42.5497 28.5338C41.6052 27.6692 41.5427 26.206 42.4082 25.2623C43.4817 24.0943 44.6468 22.947 45.8826 21.8537C46.8396 21.0057 48.3043 21.093 49.1531 22.0491C50.0019 23.0051 49.9145 24.4684 48.9575 25.3164C47.8424 26.3057 46.7855 27.3408 45.8243 28.3925C45.3666 28.8913 44.7425 29.1449 44.1142 29.1449V29.1407Z' }),
+        React.createElement("path", { d: 'M109.104 139.294C101.344 139.294 95.0273 145.6 95.0273 153.353C95.0273 161.106 101.339 167.416 109.104 167.416C116.868 167.416 123.18 161.11 123.18 153.353C123.18 145.596 116.868 139.294 109.104 139.294ZM116.731 158.279C117.476 159.023 117.476 160.228 116.731 160.973C115.986 161.717 114.779 161.717 114.034 160.973L109.104 156.047L104.173 160.973C103.428 161.717 102.222 161.717 101.477 160.973C100.732 160.228 100.732 159.023 101.477 158.279L106.407 153.353L101.477 148.427C100.732 147.683 100.732 146.477 101.477 145.733C102.222 144.989 103.428 144.989 104.173 145.733L109.104 150.659L114.034 145.733C114.779 144.989 115.986 144.989 116.731 145.733C117.476 146.477 117.476 147.683 116.731 148.427L111.8 153.353L116.731 158.279Z' }))));

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

@@ -3,10 +3,12 @@ import { Text } from '@weareconceptstudio/core';
 import { AccountButton } from '../../../components';
 //* Style
 import EmptyCartStyle from './style';
+import { emptyCartIcon } from './icons';
 const EmptyCart = ({ shoppingUrl }) => {
     return (React.createElement(EmptyCartStyle, null,
         React.createElement("div", { className: `empty-cart-wrap` },
-            React.createElement(Text, { tag: `h4`, className: `account-h4 account-font-bold account-primary-color1 empty-cart-title`, text: `cartEmpty` }),
+            React.createElement("div", { className: 'wrapper-icon' }, emptyCartIcon),
+            React.createElement(Text, { tag: `h4`, className: `account-h6 account-font-bold account-primary-color1 empty-cart-title`, text: `cartEmpty` }),
             React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-cart-description`, text: `cartEmptyDesc` }),
             shoppingUrl ? (React.createElement(AccountButton, { text: `shopNow`, url: shoppingUrl, btnType: 'purple-text', className: 'empty-cart-btn' })) : null)));
 };

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

@@ -3,11 +3,20 @@ const EmptyCartStyle = styled.section `
 	--account_emptyCartWrapMaxWidth: var(--sp94x);
 	--account_descriptionMTop: var(--sp3x);
 	--account_btnWrapMTop: var(--sp7x);
+	--account_imageHeight: fit-content;
+	--account_imageWidth: 41.4%;
+	--account_emptyWrapMTop: var(--sp22x);
+	--account_titleMTop: var(--sp10x);
 
 	.empty-cart-wrap {
+		margin-top: var(--account_emptyWrapMTop);
 		max-width: var(--account_emptyCartWrapMaxWidth);
 		width: 100%;
 
+		.empty-cart-title {
+			margin-top: var(--account_titleMTop);
+		}
+
 		.empty-cart-description {
 			margin-top: var(--account_descriptionMTop);
 		}
@@ -17,46 +26,77 @@ const EmptyCartStyle = styled.section `
 		}
 	}
 
+	.wrapper-icon {
+		display: flex;
+		height: fit-content;
+		svg {
+			fill: var(--backgroundColor);
+			max-width: var(--account_imageWidth);
+			height: var(--account_imageHeight);
+		}
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_emptyCartWrapMaxWidth: var(--sp51x);
 		--account_descriptionMTop: var(--sp2x);
 		--account_btnWrapMTop: var(--sp5x);
+		--account_emptyWrapMTop: var(--sp18x);
+		--account_titleMTop: var(--sp8x);
+		--account_imageWidth: 41.8%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--account_emptyCartWrapMaxWidth: var(--sp55x);
 		--account_descriptionMTop: var(--sp2x);
 		--account_btnWrapMTop: var(--sp4x);
+		--account_emptyWrapMTop: var(--sp9x);
+		--account_titleMTop: var(--sp6x);
+		--account_imageWidth: 30.8%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
 		--account_emptyCartWrapMaxWidth: var(--sp53x);
 		--account_descriptionMTop: var(--sp2x);
 		--account_btnWrapMTop: var(--sp4x);
+		--account_emptyWrapMTop: var(--sp8x);
+		--account_titleMTop: var(--sp5x);
+		--account_imageWidth: 34.8%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
 		--account_emptyCartWrapMaxWidth: var(--sp48x);
 		--account_descriptionMTop: var(--sp2x);
 		--account_btnWrapMTop: var(--sp3x);
+		--account_emptyWrapMTop: var(--sp11x);
+		--account_titleMTop: var(--sp6x);
+		--account_imageWidth: 32.5%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
 		--account_emptyCartWrapMaxWidth: var(--sp43x);
 		--account_descriptionMTop: var(--sp2x);
 		--account_btnWrapMTop: var(--sp3x);
+		--account_emptyWrapMTop: var(--sp9x);
+		--account_titleMTop: var(--sp5x);
+		--account_imageWidth: 32.5%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
 		--account_emptyCartWrapMaxWidth: var(--sp43x);
 		--account_descriptionMTop: var(--sp2x);
 		--account_btnWrapMTop: var(--sp3x);
+		--account_emptyWrapMTop: var(--sp19x);
+		--account_titleMTop: var(--sp5x);
+		--account_imageWidth: 24.8%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--account_emptyCartWrapMaxWidth: 100%;
 		--account_descriptionMTop: var(--sp1x);
 		--account_btnWrapMTop: var(--sp3x);
+		--account_emptyWrapMTop: var(--sp16x);
+		--account_titleMTop: var(--sp5x);
+		--account_imageWidth: 29.1%;
 	}
 `;
 export default EmptyCartStyle;

package/dist/modules/cart/SimpleItems/Item/index.js

@@ -1,7 +1,6 @@
 import React, { memo, useMemo } from 'react';
-import { Image, Text } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
-import { handlePriceCheckFunc } from '../../../../utils/_functions';
 import { AccountButton } from '../../../../components';
 import { useAccountContext } from '../../../../AccountProvider';
 const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency }) => {

package/dist/modules/cart/SimpleItems/ItemMobile/index.js

@@ -1,8 +1,7 @@
 import React, { memo, useMemo } from 'react';
-import { Image, Text } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
 import { AccountButton } from '../../../../components';
-import { handlePriceCheckFunc } from '../../../../utils/_functions';
 import { useAccountContext } from '../../../../AccountProvider';
 const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) => {
     const { handleProductClick } = useAccountContext();

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';

package/dist/modules/checkout/CheckoutProvider.js

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useState, useRef, useEffect, useCallback } from 'react';
+import { api, useTranslation } from '@weareconceptstudio/core';
+import { useAccountContext } from '../../AccountProvider';
+const CheckoutContext = createContext(null);
+export const useCheckoutContext = () => {
+    const context = useContext(CheckoutContext);
+    return context;
+};
+export const CheckoutProvider = ({ children }) => {
+    const { selectedLang } = useTranslation();
+    const { useCart } = useAccountContext();
+    const { getCart } = useCart();
+    const [checkoutData, setCheckoutData] = useState({
+        addressId: null,
+        useBalance: null,
+        note: '',
+        paymentType: 'cash_on_delivery',
+    });
+    const form = useRef();
+    const [idramForm, setIdramForm] = useState();
+    const fillCheckoutData = (key, value) => {
+        setCheckoutData((prev) => ({
+            ...prev,
+            [key]: value,
+        }));
+    };
+    const fillCart = useCallback((key, value) => {
+        setCheckoutData((prev) => {
+            const updatedData = { ...prev, [key]: value };
+            getCart(updatedData);
+            return updatedData;
+        });
+    }, [checkoutData]);
+    const handleCheckout = async () => {
+        return await api.post('checkout', checkoutData).then((res) => {
+            if (res.redirect_url) {
+                window.location.href = res.redirect_url;
+            }
+            else if (res.url) {
+                idram(res);
+            }
+        });
+    };
+    const idram = (res) => {
+        let lang = selectedLang === 'en' ? 'EN' : selectedLang === 'ru' ? 'RU' : 'AM';
+        const idramForm = (React.createElement("form", { action: res.url, method: 'POST', ref: form },
+            React.createElement("input", { type: 'hidden', name: 'EDP_LANGUAGE', value: lang }),
+            Object.keys(res.form).map((i, key) => (React.createElement("input", { key: key, type: 'hidden', name: i, value: res.form[i] })))));
+        setIdramForm(idramForm);
+    };
+    useEffect(() => {
+        if (form.current) {
+            form.current.submit();
+        }
+    }, [idramForm, form]);
+    return (React.createElement(CheckoutContext.Provider, { value: {
+            checkoutData,
+            setCheckoutData,
+            fillCheckoutData,
+            handleCheckout,
+            fillCart,
+        } },
+        children,
+        idramForm));
+};

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

@@ -1,9 +1,17 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
+import { useUi } from '@weareconceptstudio/core';
 import { SelectAddress } from '../../../address';
 import { SimpleCartItems } from '../../../cart';
+import PaymentComp from '../../../../components/TotalCheckout/PaymentComp';
+import SelectPaymentMethodPopup from '../../../../components/TotalCheckout/SelectPaymentMethodPopup';
 const StepReview = ({ items }) => {
+    const { openPopup } = useUi();
+    const handleSelectPopup = useCallback(() => {
+        openPopup(React.createElement(SelectPaymentMethodPopup, null), { accountIcon: true, className: 'popup-payment-block' });
+    }, []);
     return (React.createElement("div", { className: 'step-review' },
         React.createElement(SelectAddress, null),
+        React.createElement(PaymentComp, { title: 'payment', onClick: handleSelectPopup }),
         React.createElement(SimpleCartItems, { data: items, smallFontSize: true, title: 'orderItems', className: `checkout-mt`, additionalParameters: {
                 remove: false,
                 select: false,

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

@@ -3,6 +3,7 @@ import { api, Page } from '@weareconceptstudio/core';
 import { Sequence, TotalCheckout } from '../../../components';
 import { useAddressContext } from '../../address';
 import { useAccountContext } from '../../../AccountProvider';
+import { useCheckoutContext } from '../CheckoutProvider';
 import StepReview from './StepReview';
 import StepShipping from './StepShipping';
 import AccountContainer from '../../../components/AccountContainer';
@@ -14,19 +15,10 @@ import SequenceSkeleton from '../../../components/Sequence/Skeleton';
 import SkeletonAddressSelect from '../../address/SelectAddress/Skeleton';
 const CheckoutTemplate = () => {
     const firstStepFormRef = useRef(null);
-    const { checkoutAddressId, hasCheckoutAddress, addressLoading } = useAddressContext();
+    const { hasCheckoutAddress, addressLoading } = useAddressContext();
+    const { handleCheckout } = useCheckoutContext();
     const { useCart } = useAccountContext();
-    const { items, itemsCount, subtotal, total, shippingCost, freeShippingRange } = useCart();
-    const [checkoutData, setCheckoutData] = useState({
-        note: '',
-        paymentType: 'cash_on_delivery',
-    });
-    const fillCheckoutData = (key, value) => {
-        setCheckoutData((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
+    const { items } = useCart();
     const checkStep = {
         isShipping: !hasCheckoutAddress,
         isReview: hasCheckoutAddress,
@@ -34,25 +26,13 @@ const CheckoutTemplate = () => {
     const handleCheckoutFirstStep = () => {
         firstStepFormRef.current.submit();
     };
-    const handleCheckoutSecondStep = async () => {
-        return await api
-            .post('checkout', {
-            ...checkoutData,
-            addressId: checkoutAddressId,
-        })
-            .then((res) => {
-            if (res.redirect_url) {
-                window.location.href = res.redirect_url;
-            }
-        });
-    };
     const handleCheckoutBtn = useCallback(() => {
-        checkStep.isShipping ? handleCheckoutFirstStep() : handleCheckoutSecondStep();
+        checkStep.isShipping ? handleCheckoutFirstStep() : handleCheckout();
     }, [checkStep]);
     return (React.createElement(Page, { className: 'checkout use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CheckoutTemplateStyle, null,
-                React.createElement(TotalCheckout, { isCheckout: true, total: total, subtotal: subtotal, itemsCount: itemsCount, loading: addressLoading, shippingCost: shippingCost, checkoutData: checkoutData, isShipping: checkStep.isShipping, fillCheckoutData: fillCheckoutData, freeShippingRange: freeShippingRange, buttonProps: {
+                React.createElement(TotalCheckout, { isCheckout: true, isShipping: checkStep.isShipping, buttonProps: {
                         url: false,
                         disabled: false,
                         handleClick: handleCheckoutBtn,

package/dist/modules/checkout/ThankYouTemplate/icons.js

@@ -1,4 +1,17 @@
 import React from 'react';
-export const confirmImage = (React.createElement("svg", { version: '1.0', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 302.000000 194.000000', preserveAspectRatio: 'xMidYMid meet' },
-    React.createElement("g", { transform: 'translate(0.000000,194.000000) scale(0.100000,-0.100000)', stroke: 'none' },
-        React.createElement("path", { d: 'M426 1881 c-85 -116 -104 -227 -53 -313 29 -50 101 -104 152 -114 28\n-5 36 -16 89 -121 l57 -115 -33 20 c-80 48 -202 59 -280 24 -48 -21 -98 -73\n-98 -101 0 -27 127 -70 206 -71 48 0 130 28 164 57 24 20 34 23 40 14 9 -15\n42 -162 37 -167 -2 -2 -39 -8 -83 -14 -136 -19 -124 -9 -124 -98 0 -48 6 -95\n17 -125 l17 -48 -62 -124 -62 -125 0 -108 0 -107 -174 3 -173 4 -22 -82 c-13\n-46 -25 -98 -28 -116 l-6 -34 134 -1 c74 0 534 -4 1024 -8 669 -6 962 -5 1180\n5 160 7 290 13 291 13 6 4 376 1322 372 1326 -3 3 -34 14 -70 24 -64 18 -76\n18 -918 -15 -470 -19 -857 -37 -861 -41 -4 -5 -48 -168 -99 -363 -51 -195 -95\n-358 -99 -363 -4 -4 -18 15 -31 43 -23 49 -23 51 -7 104 12 36 17 88 17 166\nl0 113 -47 -7 c-149 -21 -160 -20 -166 5 -4 13 -7 36 -7 50 0 25 3 26 68 31\n74 5 118 24 156 65 28 30 50 110 44 158 -3 29 -4 30 -55 28 -100 -4 -180 -70\n-210 -173 l-16 -55 -23 87 c-13 48 -40 123 -60 167 l-36 79 35 50 c61 89 72\n195 28 280 -31 61 -131 142 -175 142 -8 0 -30 -22 -50 -49z m2304 -1072 c-67\n-299 -123 -551 -125 -559 -4 -13 -106 -15 -852 -12 -466 2 -849 5 -851 7 -2 2\n58 242 134 534 l139 531 35 1 c19 0 395 15 835 32 581 23 801 29 803 21 2 -6\n-52 -256 -118 -555z m210 547 c35 -10 44 -18 42 -33 -1 -10 -83 -300 -181\n-643 l-178 -625 -74 -6 c-41 -3 -162 -9 -271 -13 -226 -9 -202 -20 -213 106\nl-7 78 280 -7 280 -6 9 44 c108 500 250 1119 258 1119 6 0 30 -6 55 -14z\nm-908 -1144 c3 -4 10 -47 15 -96 l9 -89 -1010 8 c-556 4 -1012 8 -1013 9 -2 2\n24 105 42 166 4 13 120 15 977 12 535 -2 976 -7 980 -10z' }))));
+export const confirmImage = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '130', height: '140', viewBox: '0 0 130 140' },
+    React.createElement("g", { clipPath: 'url(#clip0_2872_19342)' },
+        React.createElement("path", { d: 'M78.0025 18.0777C77.94 18.0777 77.8775 18.0777 77.8192 18.0694C76.5445 17.9694 75.5947 16.853 75.6947 15.5825L76.7611 2.13169C76.8611 0.85701 77.9733 -0.0927538 79.248 0.00722134C80.5227 0.107197 81.4725 1.22359 81.3725 2.4941L80.3061 15.9449C80.2103 17.1571 79.198 18.0777 78.0025 18.0777Z' }),
+        React.createElement("path", { d: 'M92.2741 19.3982C91.9783 19.3982 91.6784 19.3399 91.3868 19.2191C90.2079 18.7276 89.6497 17.3737 90.1371 16.1949L95.8815 2.36497C96.3731 1.18609 97.7269 0.627899 98.9058 1.11528C100.085 1.60682 100.643 2.96065 100.155 4.13953L94.4111 17.9694C94.0403 18.8609 93.1822 19.3941 92.2741 19.3941V19.3982Z' }),
+        React.createElement("path", { d: 'M103.569 27.967C102.974 27.967 102.374 27.7379 101.924 27.2796C101.028 26.3715 101.037 24.9052 101.945 24.0096L108.614 17.4279C109.522 16.5323 110.988 16.5406 111.884 17.4488C112.779 18.3569 112.771 19.8232 111.863 20.7188L105.194 27.3005C104.744 27.7462 104.157 27.967 103.569 27.967Z' }),
+        React.createElement("path", { d: 'M111.828 41.1178C110.991 41.1178 110.183 40.6596 109.771 39.864C109.183 38.7268 109.629 37.3354 110.766 36.7481L125.758 29.0125C126.896 28.4252 128.287 28.8709 128.874 30.0081C129.462 31.1453 129.016 32.5366 127.879 33.124L112.887 40.8596C112.549 41.0345 112.187 41.1178 111.828 41.1178Z' }),
+        React.createElement("path", { d: 'M125.566 57.8221C125.403 57.8221 125.241 57.8054 125.078 57.7721L112.752 55.1311C111.502 54.8645 110.707 53.6356 110.973 52.3859C111.24 51.1362 112.469 50.3406 113.718 50.6072L126.045 53.2482C127.294 53.5148 128.09 54.7437 127.823 55.9933C127.59 57.0806 126.632 57.8221 125.566 57.8221Z' }),
+        React.createElement("path", { d: 'M79.2519 0.00722134C77.9772 -0.0927538 76.865 0.85701 76.765 2.13169L75.6986 15.5825C75.5987 16.8572 76.5484 17.9694 77.8231 18.0694C77.8856 18.0736 77.9481 18.0777 78.0064 18.0777C79.2019 18.0777 80.2142 17.1571 80.31 15.9449L81.3764 2.4941C81.4764 1.21942 80.5266 0.107197 79.2519 0.00722134Z' }),
+        React.createElement("path", { d: 'M98.9153 1.11947C97.7365 0.627921 96.3826 1.19028 95.8911 2.36916L90.1467 16.1991C89.6551 17.3779 90.2175 18.7318 91.3964 19.2233C91.688 19.3441 91.9879 19.4024 92.2837 19.4024C93.1918 19.4024 94.0499 18.8651 94.4206 17.9778L100.165 4.14788C100.657 2.96901 100.094 1.61518 98.9153 1.12363V1.11947Z' }),
+        React.createElement("path", { d: 'M111.885 17.4487C110.99 16.5406 109.524 16.5281 108.615 17.4279L101.946 24.0096C101.038 24.9052 101.026 26.3715 101.925 27.2796C102.379 27.7379 102.975 27.967 103.571 27.967C104.167 27.967 104.746 27.7462 105.195 27.3005L111.865 20.7188C112.773 19.8232 112.785 18.3569 111.885 17.4487Z' }),
+        React.createElement("path", { d: 'M128.878 30.0081C128.291 28.8709 126.899 28.4293 125.762 29.0125L110.77 36.7481C109.633 37.3354 109.187 38.7309 109.775 39.864C110.187 40.6596 110.995 41.1178 111.832 41.1178C112.191 41.1178 112.553 41.0345 112.89 40.8596L127.883 33.124C129.02 32.5366 129.465 31.1411 128.878 30.0081Z' }),
+        React.createElement("path", { d: 'M126.052 53.244L113.726 50.603C112.477 50.3364 111.248 51.132 110.981 52.3817C110.715 53.6314 111.51 54.8602 112.76 55.1268L125.086 57.7679C125.248 57.8012 125.411 57.8178 125.573 57.8178C126.64 57.8178 127.602 57.0764 127.831 55.9891C128.098 54.7394 127.302 53.5106 126.052 53.244Z' }),
+        React.createElement("path", { d: 'M107.232 129.213C98.5801 128.355 91.7985 121.036 91.7985 112.163C91.7985 103.29 98.3177 96.2626 106.724 95.1753L106.57 84.8654L97.7762 42.151H14.4219L23.453 84.3739C23.4738 84.478 23.4863 84.5863 23.4863 84.6946V139.752H107.386L107.228 129.213H107.232ZM52.4333 129.296H32.9756C32.1258 129.296 31.4343 128.605 31.4343 127.755C31.4343 126.905 32.1258 126.213 32.9756 126.213H52.4333C53.2831 126.213 53.9746 126.905 53.9746 127.755C53.9746 128.605 53.2831 129.296 52.4333 129.296ZM67.5254 119.765H32.9756C32.1258 119.765 31.4343 119.074 31.4343 118.224C31.4343 117.374 32.1258 116.682 32.9756 116.682H67.5254C68.3751 116.682 69.0666 117.374 69.0666 118.224C69.0666 119.074 68.3751 119.765 67.5254 119.765Z' }),
+        React.createElement("path", { d: 'M0 85.1153V139.752H20.4033V84.857L10.3308 37.7604L0 85.1153Z' }),
+        React.createElement("path", { d: 'M97.1456 39.0642L95.6918 31.9993H12.25L13.7621 39.0642H97.1456Z' }),
+        React.createElement("path", { d: 'M108.942 98.1078C101.193 98.1078 94.8867 104.41 94.8867 112.159C94.8867 119.907 101.189 126.213 108.942 126.213C116.694 126.213 122.996 119.911 122.996 112.159C122.996 104.406 116.694 98.1078 108.942 98.1078ZM118.564 109.218L107.925 119.857C107.925 119.857 107.908 119.882 107.896 119.89C107.525 120.261 107.034 120.448 106.546 120.448C106.059 120.448 105.572 120.265 105.197 119.89C105.197 119.89 105.18 119.865 105.168 119.857L98.5775 113.267C97.836 112.525 97.836 111.317 98.5775 110.576C99.319 109.834 100.527 109.834 101.268 110.576L106.546 115.853L115.873 106.527C116.615 105.785 117.823 105.785 118.564 106.527C119.306 107.268 119.306 108.476 118.564 109.218Z' }))));

package/dist/modules/checkout/ThankYouTemplate/style.js

@@ -7,6 +7,7 @@ const ThankYouMessageStyle = styled.div `
 	--account_orderNumberMTop: var(--sp2x);
 	--account_btnWrapperMTop: var(--sp7x);
 	--account_imageWidth: 41.4%;
+	--account_imageHeight: fit-content;
 
 	--account_cartMainWrapPadTop: var(--sp8x);
 
@@ -16,8 +17,14 @@ const ThankYouMessageStyle = styled.div `
 		max-width: var(--account_confWrapMaxWidth);
 		margin-top: var(--account_confWrapMTop);
 
+		.confirmation-image {
+			height: fit-content;
+			display: flex;
+		}
+
 		svg {
-			width: var(--account_imageWidth);
+			max-width: var(--account_imageWidth);
+			height: var(--account_imageHeight);
 			fill: var(--backgroundColor);
 		}
 

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

@@ -1,2 +1,3 @@
+export * from './CheckoutProvider';
 export { default as CheckoutTemplate } from './CheckoutTemplate';
 export { default as ThankYouTemplate } from './ThankYouTemplate';

package/dist/modules/checkout/index.js

@@ -1,2 +1,3 @@
+export * from './CheckoutProvider';
 export { default as CheckoutTemplate } from './CheckoutTemplate';
 export { default as ThankYouTemplate } from './ThankYouTemplate';

package/dist/modules/index.d.ts

@@ -4,3 +4,4 @@ export * from "./auth";
 export * from "./cart";
 export * from "./checkout";
 export * from "./order";
+export * from "./payment";

package/dist/modules/index.js

@@ -4,3 +4,4 @@ export * from './auth';
 export * from './cart';
 export * from './checkout';
 export * from './order';
+export * from './payment';