@weareconceptstudio/account 0.4.2 → 0.4.4

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

@@ -0,0 +1,6 @@
+export default AccountCounter;
+declare function AccountCounter({ productId, qty }: {
+    productId: any;
+    qty?: number;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/AccountCounter/index.js

@@ -0,0 +1,38 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Text, debounce } from '@weareconceptstudio/core';
+import { useAccountContext } from '../../AccountProvider';
+//* Style
+import AccountCounterStyle from './style';
+const AccountCounter = ({ productId, qty = 1 }) => {
+    const { useCart } = useAccountContext();
+    const { toggleCartItem, items } = useCart();
+    //! State
+    const [count, setCount] = useState(qty);
+    useEffect(() => {
+        setCount(items.find((item) => item.product.id == productId)?.qty || qty);
+    }, [items]);
+    const updateCartServer = useCallback((quantity) => {
+        toggleCartItem({
+            productId,
+            qty: quantity,
+        });
+    }, [productId]);
+    const debouncedUpdateCartServer = useCallback(debounce((quantity) => updateCartServer(quantity), 300), [updateCartServer]);
+    const handleAddToCart = (e, type = 'inc') => {
+        e.stopPropagation();
+        const newCount = type == 'inc' ? count + 1 : count - 1;
+        setCount(newCount);
+        debouncedUpdateCartServer(newCount);
+    };
+    return (React.createElement(AccountCounterStyle, { onClick: (e) => e.stopPropagation(), className: `counter-block ${count == 0 ? 'opacity-zero pointer-none' : ''}` },
+        React.createElement("div", { className: 'counter' },
+            React.createElement("div", { onClick: (e) => handleAddToCart(e, 'dec'), className: `c-icon-block ${count == 0 ? 'disable' : ''}` },
+                React.createElement("svg", { fill: 'none', viewBox: '0 0 13 3', className: `minus`, xmlns: 'http://www.w3.org/2000/svg' },
+                    React.createElement("path", { d: 'M0 1.5H12', strokeWidth: '2' }))),
+            React.createElement(Text, { className: `p p5 font-montserrat-arm-medium count` }, `${count}`),
+            React.createElement("div", { onClick: (e) => handleAddToCart(e, 'inc'), className: `c-icon-block ${count == 99 ? 'disable' : ''}` },
+                React.createElement("svg", { fill: 'none', className: `plus`, viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
+                    React.createElement("path", { d: 'M0 6H12', strokeWidth: '2' }),
+                    React.createElement("path", { d: 'M6 12L6 0', strokeWidth: '2' }))))));
+};
+export default AccountCounter;

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

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

package/dist/components/AccountCounter/style.js

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+const AccountCounterStyle = styled.div `
+	--account_counterWidth: var(--sp10x);
+
+	--account_counterHeight: var(--sp3x);
+	--account_counterIconSize: var(--sp1-5x);
+
+	width: var(--account_counterWidth);
+	height: var(--account_counterHeight);
+	display: flex;
+	transition: opacity var(--account_trTime) ease-out;
+
+	.counter {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.count {
+			color: var(--backgroundColor);
+		}
+
+		svg {
+			width: var(--account_counterIconSize);
+			height: var(--account_counterIconSize);
+
+			stroke: var(--backgroundColor);
+			fill: var(--backgroundColor);
+		}
+	}
+
+	.c-icon-block {
+		cursor: pointer;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		width: var(--sp3x);
+		height: var(--sp3x);
+		background-color: #f7f8f9;
+		border-radius: 50%;
+
+		&.disable {
+			pointer-events: none;
+			opacity: 0.5;
+			cursor: default !important;
+		}
+	}
+
+	/* //! 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+	}
+
+	/* //! Mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+	}
+`;
+export default AccountCounterStyle;

package/dist/components/index.d.ts

@@ -1,8 +1,9 @@
-export { default as AccountButton } from './AccountButton';
-export { default as CustomCheckbox } from './CustomCheckbox';
-export { default as FormInputCode } from './FormInputCode';
-export { default as Pagination } from './Pagination';
 export { default as Sequence } from './Sequence';
+export { default as Pagination } from './Pagination';
 export { default as TotalCheckout } from './TotalCheckout';
+export { default as FormInputCode } from './FormInputCode';
+export { default as AccountButton } from './AccountButton';
+export { default as AccountCounter } from './AccountCounter';
 export { default as WarningMessage } from './WarningMessage';
+export { default as CustomCheckbox } from './CustomCheckbox';
 export { default as WarningMessageForPopup } from './WarningMessageForPopup';

package/dist/components/index.js

@@ -1,8 +1,9 @@
-export { default as AccountButton } from './AccountButton';
-export { default as CustomCheckbox } from './CustomCheckbox';
-export { default as FormInputCode } from './FormInputCode';
-export { default as Pagination } from './Pagination';
 export { default as Sequence } from './Sequence';
+export { default as Pagination } from './Pagination';
 export { default as TotalCheckout } from './TotalCheckout';
+export { default as FormInputCode } from './FormInputCode';
+export { default as AccountButton } from './AccountButton';
+export { default as AccountCounter } from './AccountCounter';
 export { default as WarningMessage } from './WarningMessage';
+export { default as CustomCheckbox } from './CustomCheckbox';
 export { default as WarningMessageForPopup } from './WarningMessageForPopup';

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

@@ -1,5 +1,5 @@
 export default AddressItem;
-declare function AddressItem({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className }: {
+declare function AddressItem({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className, isNote }: {
     type: any;
     title: any;
     data: any;
@@ -9,5 +9,6 @@ declare function AddressItem({ type, title, data, checkout_review, select_addres
     checkedId: any;
     setCheckedId: any;
     className: any;
+    isNote?: boolean;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Text, useUi } from '@weareconceptstudio/core';
+import { Text, useTranslation, useUi } from '@weareconceptstudio/core';
 import { useAddressContext } from '../AddressProvider';
 //* Components
 import AddressForm from '../AddressForm';
@@ -7,9 +7,10 @@ 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, checkedId, setCheckedId, className }) => {
+const AddressItem = ({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className, isNote = false }) => {
     const { openPopup } = useUi();
     const { deleteAddress, selectedAddresses } = useAddressContext();
+    const { translate } = useTranslation();
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
         openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteAddressMessage', description: 'confirmDeleteAddress', onRemove: () => deleteAddress({ addressId: data.id, type: data.type }) }), {
@@ -24,19 +25,28 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
     }, [data]);
     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(Text, { text: title, className: `account-p account-p2 account-font-bold account-primary-color1` }),
+            React.createElement(AccountButton, { text: `change`, onClick: onClick, btnType: `green-small-text` }))),
+        React.createElement("div", { className: `item-internal-wrap user-select-none` }, isNote && data.note_for_courier ? (React.createElement("div", { className: 'flex-box-block' },
+            React.createElement("div", { className: `relative-wrapper box-block` },
+                React.createElement("div", { className: `personal-data-wrap` }, data.displayLines.map((line, index) => (React.createElement(Text, { key: index, text: line, className: `account-p account-p3 account-primary-color1 ${index == 0 ? 'account-font-bold' : 'account-font-regular'} ${index == 1 || index == data.displayLines.length - 1 ? 'line-distance' : ''}` })))),
+                data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color3 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` }))),
+            React.createElement(Text, { className: `account-p account-p3 account-primary-color1 box-block` },
+                React.createElement("span", { className: `account-font-bold` },
+                    translate('note'),
+                    ":"),
+                " ",
+                React.createElement("span", { className: `account-font-regular` }, data.note_for_courier)))) : (React.createElement(React.Fragment, null,
             React.createElement("div", { className: `relative-wrapper` },
-                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 })))),
+                React.createElement("div", { className: `personal-data-wrap` }, data.displayLines.map((line, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 account-primary-color1 ${index == 0 ? 'account-font-bold' : 'account-font-regular'} ${index == 1 || index == data.displayLines.length - 1 ? 'line-distance' : ''}`, text: line })))),
                 data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color3 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` },
+            !checkout_review ? (React.createElement("div", { className: `edit-remove-wrapper` },
                 React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: `btn-one-address-version ${!select_address || (select_address && checkedId == data.id) ? '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` })))))))) : null;
+                    React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `btn-more-address-version` }))))) : null))))) : null;
 };
 export default AddressItem;

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

@@ -11,6 +11,9 @@ const AddressItemStyle = styled.section `
 	--account_circleSize: var(--sp4x);
 	--account_checkSize: var(--sp2x);
 
+	--account_flexBoxBLockItemsGap: var(--sp4x);
+	--account_flexBoxBLockItemWidth: calc(50% - var(--account_flexBoxBLockItemsGap) / 2);
+
 	width: var(--account_itemWidth);
 	padding: 0 calc(var(--account_itemDistance) / 2);
 
@@ -32,7 +35,7 @@ const AddressItemStyle = styled.section `
 		height: 100%;
 
 		.personal-data-wrap {
-			.col-wrap {
+			.line-distance {
 				margin-top: var(--account_smallMarginDistance);
 			}
 		}
@@ -86,11 +89,6 @@ const AddressItemStyle = styled.section `
 					color: var(--account_backgroundColor);
 				}
 
-				&.active {
-					border: 2px solid var(--account_primaryColor1);
-					background-color: var(--account_primaryColor1);
-				}
-
 				.checkbox-icon {
 					display: flex;
 					justify-content: center;
@@ -100,6 +98,12 @@ const AddressItemStyle = styled.section `
 					height: var(--account_checkSize);
 					fill: var(--account_backgroundColor);
 				}
+
+				&.active {
+					border: 2px solid var(--account_primaryColor1);
+					background-color: var(--account_primaryColor1);
+					pointer-events: none;
+				}
 			}
 		}
 	}
@@ -121,6 +125,16 @@ const AddressItemStyle = styled.section `
 		}
 	}
 
+	.flex-box-block {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--account_flexBoxBLockItemsGap);
+
+		.box-block {
+			width: var(--account_flexBoxBLockItemWidth);
+		}
+	}
+
 	@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);
@@ -139,6 +153,8 @@ const AddressItemStyle = styled.section `
 		--account_changeAddressWrapMBot: var(--sp4x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
+
+		--account_flexBoxBLockItemsGap: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
@@ -150,6 +166,8 @@ const AddressItemStyle = styled.section `
 		--account_changeAddressWrapMBot: var(--sp3x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
+
+		--account_flexBoxBLockItemsGap: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
@@ -161,6 +179,8 @@ const AddressItemStyle = styled.section `
 		--account_changeAddressWrapMBot: var(--sp3x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
+
+		--account_flexBoxBLockItemsGap: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
@@ -172,6 +192,8 @@ const AddressItemStyle = styled.section `
 		--account_changeAddressWrapMBot: var(--sp3x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
+
+		--account_flexBoxBLockItemsGap: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
@@ -184,6 +206,8 @@ const AddressItemStyle = styled.section `
 		--account_changeAddressWrapMBot: var(--sp3x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
+
+		--account_flexBoxBLockItemsGap: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
@@ -197,6 +221,9 @@ const AddressItemStyle = styled.section `
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
 
+		--account_flexBoxBLockItemsGap: var(--sp3x);
+		--account_flexBoxBLockItemWidth: 100%;
+
 		&:nth-child(2) {
 			margin-top: var(--account_itemDistance);
 		}

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

@@ -17,7 +17,7 @@ const SelectAddress = () => {
         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({
+            }) }))) : (React.createElement(AddressItem, { isNote: true, checkout_review: true, type: 'shipping', title: 'address', className: 'full', select_address: false, data: selectedAddresses, onClick: () => handleSelectPopup({
             title: 'address',
             type: null,
         }) }))));

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

@@ -42,10 +42,10 @@ const SelectAddressPopup = Memo(({ title, type }) => {
             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", { 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 }));
+            return (React.createElement(AddressItem, { type: type, data: item, key: index, id: item.id, select_address: true, checkedId: checkedId, checkout_review: false, 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 }))));
+            React.createElement(AccountButton, { text: `cancel`, onClick: closePopup, btnType: `green-large-text` }),
+            React.createElement(AccountButton, { text: `saveAndApply`, btnType: `full-width`, onClick: handleAddressChangeSubmit }))));
 });
 export default SelectAddressPopup;

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

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
 import { Text } from '@weareconceptstudio/core';
+import { useAddressContext } from '../AddressProvider';
 //* Style
 import ShippingBillingInfoStyle from './style';
-import { useAddressContext } from '../AddressProvider';
 // TODO: Address info to component
 const ShippingBillingInfo = memo(({ className, shipping_address, billing_address }) => {
     const { addressType } = useAddressContext();
@@ -10,7 +10,7 @@ const ShippingBillingInfo = memo(({ className, shipping_address, billing_address
         React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: addressType ? 'shippingAndBillingInfo' : 'shippingInfo' }),
         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` }),
-            shipping_address.map((item, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: item }))))));
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 m-bot`, text: `shippedTo` }),
+            shipping_address.map((item, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 account-font-regular account-primary-color1 nowrap ${index == shipping_address.length - 1 ? 'm-top' : ''}`, text: item }))))));
 });
 export default ShippingBillingInfo;

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

@@ -2,9 +2,9 @@ import styled from 'styled-components';
 const ShippingBillingInfoStyle = styled.section `
 	--account_spaceLineMTop: var(--sp3x);
 	--account_spaceLineMBot: var(--sp5x);
-	--account_valueMBot: var(--sp2x);
+	--account_mBot: var(--sp2x);
 	--account_billedMTop: var(--sp5x);
-	--account_phoneMTop: var(--sp1x);
+	--account_mTop: var(--sp1x);
 	--account_infoWrapWidth: 57%;
 
 	.info-space-line {
@@ -16,80 +16,80 @@ const ShippingBillingInfoStyle = styled.section `
 
 	.info-wrap {
 		width: var(--account_infoWrapWidth);
-
-		.value {
-			margin-bottom: var(--account_valueMBot);
-		}
-
-		.phone {
-			margin-top: var(--account_phoneMTop);
-		}
 	}
 
 	.billed {
 		margin-top: var(--account_billedMTop);
 	}
 
+	.m-bot {
+		margin-bottom: var(--account_mBot);
+	}
+
+	.m-top {
+		margin-top: var(--account_mTop);
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_spaceLineMTop: var(--sp2x);
 		--account_spaceLineMBot: var(--sp4x);
-		--account_valueMBot: var(--sp1x);
+		--account_mBot: var(--sp1x);
 		--account_billedMTop: var(--sp4x);
-		--account_phoneMTop: var(--sp1x);
+		--account_mTop: var(--sp1x);
 		--account_infoWrapWidth: 46.3%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--account_spaceLineMTop: var(--sp2x);
 		--account_spaceLineMBot: var(--sp4x);
-		--account_valueMBot: var(--sp1x);
+		--account_mBot: var(--sp1x);
 		--account_billedMTop: var(--sp4x);
-		--account_phoneMTop: var(--sp1x);
+		--account_mTop: var(--sp1x);
 		--account_infoWrapWidth: 58.3%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
 		--account_spaceLineMTop: var(--sp2x);
 		--account_spaceLineMBot: var(--sp3x);
-		--account_valueMBot: var(--sp1x);
+		--account_mBot: var(--sp1x);
 		--account_billedMTop: var(--sp3x);
-		--account_phoneMTop: var(--sp1x);
+		--account_mTop: var(--sp1x);
 		--account_infoWrapWidth: 61.3%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
 		--account_spaceLineMTop: var(--sp2x);
 		--account_spaceLineMBot: var(--sp3x);
-		--account_valueMBot: var(--sp1x);
+		--account_mBot: var(--sp1x);
 		--account_billedMTop: var(--sp3x);
-		--account_phoneMTop: var(--sp1x);
+		--account_mTop: var(--sp1x);
 		--account_infoWrapWidth: 66.3%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
 		--account_spaceLineMTop: var(--sp2x);
 		--account_spaceLineMBot: var(--sp3x);
-		--account_valueMBot: var(--sp1x);
+		--account_mBot: var(--sp1x);
 		--account_billedMTop: var(--sp3x);
-		--account_phoneMTop: var(--sp1x);
+		--account_mTop: var(--sp1x);
 		--account_infoWrapWidth: 82.3%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
 		--account_spaceLineMTop: var(--sp2x);
 		--account_spaceLineMBot: var(--sp2x);
-		--account_valueMBot: var(--sp1x);
+		--account_mBot: var(--sp1x);
 		--account_billedMTop: var(--sp2x);
-		--account_phoneMTop: var(--sp1x);
+		--account_mTop: var(--sp1x);
 		--account_infoWrapWidth: 74.3%;
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--account_spaceLineMTop: var(--sp2x);
 		--account_spaceLineMBot: var(--sp2x);
-		--account_valueMBot: var(--sp1x);
+		--account_mBot: var(--sp1x);
 		--account_billedMTop: var(--sp2x);
-		--account_phoneMTop: var(--sp1x);
+		--account_mTop: var(--sp1x);
 		--account_infoWrapWidth: 67.3%;
 
 		margin-top: var(--sp5x);

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

@@ -1,8 +1,9 @@
 export default CartTemplate;
-declare function CartTemplate({ children, actions, checkoutUrl, moreMenu }: {
+declare function CartTemplate({ children, actions, checkoutUrl, moreMenu, emptyCartIcon }: {
     children: any;
     actions: any;
     checkoutUrl?: string;
     moreMenu: any;
+    emptyCartIcon: 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, checkoutUrl = '/checkout/', moreMenu }) => {
+const CartTemplate = ({ children, actions, checkoutUrl = '/checkout/', moreMenu, emptyCartIcon }) => {
     const { shopUrl, useCart } = useAccountContext();
     const { translate } = useTranslation();
     const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue } = useCart();
@@ -33,7 +33,7 @@ const CartTemplate = ({ children, actions, checkoutUrl = '/checkout/', moreMenu
                             edit: { list: false },
                         } }),
                     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 }))),
+                    moreMenu ? moreMenu : null)) : (React.createElement(EmptyCart, { data: items, shoppingUrl: shopUrl, emptyCartIcon: emptyCartIcon }))) : (React.createElement(SkeletonCartTemplate, { shopUrl: shopUrl }))),
                 children))));
 };
 export default CartTemplate;

package/dist/modules/cart/EmptyCart/icons.d.ts

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

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

@@ -1,5 +1,5 @@
 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' },
+export const emptyCartIconDefault = (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' }),

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

@@ -1,5 +1,6 @@
 export default EmptyCart;
-declare function EmptyCart({ shoppingUrl }: {
+declare function EmptyCart({ shoppingUrl, emptyCartIcon }: {
     shoppingUrl: any;
+    emptyCartIcon: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -3,11 +3,12 @@ import { Text } from '@weareconceptstudio/core';
 import { AccountButton } from '../../../components';
 //* Style
 import EmptyCartStyle from './style';
-import { emptyCartIcon } from './icons';
-const EmptyCart = ({ shoppingUrl }) => {
+import { emptyCartIconDefault } from './icons';
+const EmptyCart = ({ shoppingUrl, emptyCartIcon }) => {
+    console.log(emptyCartIcon);
     return (React.createElement(EmptyCartStyle, null,
         React.createElement("div", { className: `empty-cart-wrap` },
-            React.createElement("div", { className: 'wrapper-icon' }, emptyCartIcon),
+            emptyCartIcon ? emptyCartIcon : React.createElement("div", { className: 'wrapper-icon' }, emptyCartIconDefault),
             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)));