@weareconceptstudio/account 0.3.0 → 0.3.1

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

@@ -0,0 +1,153 @@
+import styled from 'styled-components';
+const SelectPaymentMethodPopupStyle = styled.section `
+	--account_cancelAndSaveWrapMTop: var(--sp5x);
+	--account_cancelDistance: var(--sp5x);
+	--account_selectAddressWrapMBot: var(--sp5x);
+	--account_payMethodsItemDistance: var(--sp3x);
+	--account_payMethodsItemInternalPad: var(--sp2x);
+	--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
+	--account_lineMTop: var(--sp3x);
+	--account_lineMBottom: var(--sp4x);
+
+	.new-card-container {
+		position: relative;
+	}
+
+	.select-payment-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--account_selectAddressWrapMBot);
+	}
+
+	.flex-wrapper {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--account_payMethodsItemDistance);
+
+		/* .item-container {
+			&:not(:nth-child(1), :nth-child(2)) {
+				margin-top: var(--account_payMethodsItemDistance) !important;
+			}
+		} */
+	}
+
+	.custom-payment-options {
+		width: var(--account_radioWrapperWidth);
+		padding: var(--account_payMethodsItemInternalPad) !important;
+	}
+
+	.cancel-and-save-wrap {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-top: var(--account_cancelAndSaveWrapMTop);
+
+		.btn-wrap {
+			&:first-child {
+				margin-right: var(--account_cancelDistance);
+			}
+		}
+	}
+
+	.line {
+		width: 100%;
+		height: 2px;
+		background-color: var(--account_primaryColor5);
+		margin: var(--account_lineMTop) 0 var(--account_lineMBottom);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_cancelAndSaveWrapMTop: var(--sp4x);
+		--account_cancelDistance: var(--sp3x);
+		--account_selectAddressWrapMBot: var(--sp4x);
+		--account_payMethodsItemDistance: var(--sp3x);
+		--account_payMethodsItemInternalPad: var(--sp2x);
+		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
+		--account_lineMTop: var(--sp2-5x);
+		--account_lineMBottom: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp3x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemInternalPad: var(--sp1-5x);
+		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: 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}) {
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp3x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemInternalPad: var(--sp1-5x);
+		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: 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}) {
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemInternalPad: var(--sp1-5x);
+		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemInternalPad: var(--sp1-5x);
+		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemInternalPad: var(--sp1-5x);
+		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
+		--account_lineMTop: var(--sp1-5x);
+		--account_lineMBottom: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2x);
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemInternalPad: var(--sp1-5x);
+		--account_radioWrapperWidth: 100%;
+		--account_lineMTop: var(--sp1-5x);
+		--account_lineMBottom: var(--sp1-5x);
+
+		.cancel-and-save-wrap {
+			flex-direction: column-reverse;
+
+			.btn-wrap {
+				&:first-child {
+					margin-right: 0;
+					margin-top: var(--account_cancelDistance);
+				}
+
+				&:last-child {
+					width: 100%;
+				}
+			}
+		}
+	}
+`;
+export default SelectPaymentMethodPopupStyle;

package/dist/components/TotalCheckout/index.js

@@ -1,44 +1,30 @@
-import React, { memo, useMemo } from 'react';
-import { Text } from '@weareconceptstudio/core';
-import { Input, Radio } from '@weareconceptstudio/form';
+import React, { memo } from 'react';
+import { Text, CollapseContainer, handlePriceCheckFunc, numToLocalString } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
 import AccountButton from '../AccountButton';
 import FreeShippingComp from './FreeShippingComp';
 import PromoCodeComp from './PromoCodeComp';
-//* Utils
-import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
+import MuramoneyComp from './MuramoneyComp';
+import CommentComp from './CommentComp';
 //* Style
 import TotalCheckoutStyle from './style';
 //* Skeleton
 import SkeletonTotalCheckout from './Skeleton';
-// TODO: Shipping Coast
-const fakeShippingCost = 5000;
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost, fillCheckoutData, checkoutData, isCheckout = false, loading, freeShippingRange }) => {
-    const { currency, useUser } = useAccountContext();
+import { useAddressContext } from '../../modules';
+// TODO: Muramoney & Promo code
+const promo_code = '10% of first order';
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, fillCheckoutData, isCheckout = false, loading }) => {
+    const { currency, useCart, useUser } = useAccountContext();
+    const { checkoutAddressId } = useAddressContext();
     const { user } = useUser();
-    const savedCards = useMemo(() => {
-        if (user) {
-            let cards = [
-                {
-                    label: 'Remember New Card',
-                    value: '0',
-                },
-            ];
-            user.savedCards.forEach((savedCard) => {
-                cards.push({
-                    label: `${savedCard.name} - ${savedCard.number}}`,
-                    value: savedCard.id,
-                });
-            });
-            return checkoutData?.paymentType == 'credit_card' ? (React.createElement(Radio.Group, { value: checkoutData.paymentType, onChange: (val) => {
-                    if (val == 0) {
-                        fillCheckoutData('remember_card', true);
-                    }
-                    fillCheckoutData('card_id', val);
-                }, options: cards })) : null;
+    const { itemsCount, shippingCost, freeShippingRange, shippingCostValue, total, subtotal, useBalance, getCart } = useCart();
+    const handleBalance = (amount) => {
+        let params = { addressId: checkoutAddressId };
+        if (amount) {
+            params['useBalance'] = amount;
         }
-        return null;
-    }, [user, checkoutData]);
+        getCart(params);
+    };
     return (React.createElement(TotalCheckoutStyle, null,
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),
@@ -51,22 +37,17 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                 React.createElement("div", { className: `od-item-wrap` },
                     React.createElement(Text, { className: `account-p account-p2 account-font-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` },
+                    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-currnecy2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
-                React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, fakeShippingCost: fakeShippingCost, freeShippingRange: freeShippingRange }),
-                React.createElement(PromoCodeComp, null),
-                isCheckout && typeof isShipping === 'boolean' && !isShipping ? (React.createElement(React.Fragment, null,
-                    React.createElement(Input.TextArea, { containerClassName: `comment-field`, placeholder: 'checkoutCommentPlaceholder', onChange: (e) => fillCheckoutData('note', e.target.value), className: `account-p account-p3 account-font-regular account-primary-color1` }),
-                    React.createElement(Radio.Group, { value: checkoutData.paymentType, onChange: (val) => fillCheckoutData('paymentType', val), options: [
-                            { label: 'Visa Arca', value: 'credit_card' },
-                            { label: 'Idram', value: 'idram' },
-                            { label: 'POS TERMINAL', value: 'pos_terminal' },
-                            { label: 'Telcell', value: 'telcell' },
-                            { label: 'Inecopay', value: 'inecopay' },
-                            { label: 'Cash', value: 'cash_on_delivery' },
-                        ] }),
-                    React.createElement("div", { style: { marginTop: 20 } }, savedCards))) : null,
+                    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 })),
+                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))))));
 });
 export default TotalCheckout;

package/dist/components/TotalCheckout/style.js

@@ -6,13 +6,17 @@ const TotalCheckoutStyle = styled.section `
 	--account_cartMainWrapPadTop: var(--sp8x);
 	--account_leftPanelWrapWidth: calc(100% - var(--account_rightPanelWrapWidth));
 
-	//! Right Layout Sizes
+	/* //! Right Layout Sizes */
 	--account_odLineMTop: var(--sp2x);
 	--account_odLineMBot: var(--sp6x);
 	--account_itemMTop: var(--sp3x);
-	--account_commentMarginTop: var(--sp6x);
+	--account_commentMarginTop: var(--sp1-5x);
 	--account_commentPadding: var(--sp2x) var(--sp3x);
-	--account_btnMTop: var(--sp2x);
+	--account_btnMTop: var(--sp6x);
+
+	/* //!  Collapse Sizes */
+	--account_collapseLargeDistance: var(--sp4x);
+	--account_collapseSmallDistance: var(--sp3x);
 
 	.cart-main-wrap {
 		display: flex;
@@ -67,6 +71,76 @@ const TotalCheckoutStyle = styled.section `
 		display: none !important;
 	}
 
+	.balance-text-block {
+		color: var(--account_secondaryColor13);
+	}
+
+	/* //! Collapse Styles */
+	.comment-text {
+		width: fit-content;
+		transition: color var(--account_trTime) ease-out;
+		cursor: pointer;
+	}
+
+	#collapse-item {
+		svg {
+			path {
+				transition: all var(--account_trTime) ease-out;
+
+				&:last-child {
+					transform: rotate(0deg);
+					transform-origin: 50% 50%;
+				}
+			}
+		}
+
+		&.active {
+			svg {
+				path:last-child {
+					transform: rotate(90deg);
+				}
+			}
+		}
+	}
+
+	#collapse-title {
+		display: flex;
+		gap: var(--sp1x);
+
+		/* //! Mouse Detect */
+		@media (pointer: fine) {
+			@media (hover: hover) {
+				&:hover {
+					.muramoney-text,
+					.promo-code-text,
+					.comment-text {
+						color: var(--account_primaryColor3);
+					}
+
+					svg path {
+						stroke: var(--account_primaryColor3);
+					}
+				}
+			}
+		}
+	}
+
+	.collapse-container-wrapper {
+		margin-top: var(--account_collapseLargeDistance);
+	}
+
+	.collapse-distance {
+		margin-top: var(--account_collapseSmallDistance);
+		padding-top: var(--account_collapseSmallDistance);
+	}
+
+	.muramoney-container,
+	.muramoney-success-block,
+	.promo-code-container,
+	.promo-code-success-block {
+		margin-top: var(--account_commentMarginTop);
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_distance: var(--sp8x);
 		/* --account_rightPanelWrapWidth: var(--sp66x); */
@@ -77,9 +151,13 @@ const TotalCheckoutStyle = styled.section `
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp4x);
 		--account_itemMTop: var(--sp2x);
-		--account_commentMarginTop: var(--sp4x);
+		--account_commentMarginTop: var(--sp1x);
 		--account_commentPadding: var(--sp2x);
-		--account_btnMTop: var(--sp2x);
+		--account_btnMTop: var(--sp4x);
+
+		/* //!  Collapse Sizes */
+		--account_collapseLargeDistance: var(--sp4x);
+		--account_collapseSmallDistance: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
@@ -92,9 +170,13 @@ const TotalCheckoutStyle = styled.section `
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp4x);
 		--account_itemMTop: var(--sp2x);
-		--account_commentMarginTop: var(--sp4x);
+		--account_commentMarginTop: var(--sp1x);
 		--account_commentPadding: var(--sp1x) var(--sp2x);
-		--account_btnMTop: var(--sp2x);
+		--account_btnMTop: var(--sp3x);
+
+		/* //!  Collapse Sizes */
+		--account_collapseLargeDistance: var(--sp3x);
+		--account_collapseSmallDistance: 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}) {
@@ -107,9 +189,13 @@ const TotalCheckoutStyle = styled.section `
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp2x);
-		--account_commentMarginTop: var(--sp3x);
+		--account_commentMarginTop: var(--sp1x);
 		--account_commentPadding: var(--sp1x) var(--sp2x);
-		--account_btnMTop: var(--sp2x);
+		--account_btnMTop: var(--sp3x);
+
+		/* //!  Collapse Sizes */
+		--account_collapseLargeDistance: var(--sp4x);
+		--account_collapseSmallDistance: 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}) {
@@ -122,9 +208,13 @@ const TotalCheckoutStyle = styled.section `
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp2x);
-		--account_commentMarginTop: var(--sp3x);
+		--account_commentMarginTop: var(--sp1x);
 		--account_commentPadding: var(--sp1x) var(--sp2x);
-		--account_btnMTop: var(--sp2x);
+		--account_btnMTop: var(--sp3x);
+
+		/* //!  Collapse Sizes */
+		--account_collapseLargeDistance: var(--sp4x);
+		--account_collapseSmallDistance: 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}) {
@@ -137,9 +227,13 @@ const TotalCheckoutStyle = styled.section `
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp1x);
-		--account_commentMarginTop: var(--sp3x);
+		--account_commentMarginTop: var(--sp1x);
 		--account_commentPadding: var(--sp1x) var(--sp2x);
-		--account_btnMTop: var(--sp2x);
+		--account_btnMTop: var(--sp3x);
+
+		/* //!  Collapse Sizes */
+		--account_collapseLargeDistance: var(--sp3x);
+		--account_collapseSmallDistance: 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}) {
@@ -152,9 +246,13 @@ const TotalCheckoutStyle = styled.section `
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp1x);
-		--account_commentMarginTop: var(--sp3x);
+		--account_commentMarginTop: var(--sp1x);
 		--account_commentPadding: var(--sp1x) var(--sp2x);
-		--account_btnMTop: var(--sp2x);
+		--account_btnMTop: var(--sp4x);
+
+		/* //!  Collapse Sizes */
+		--account_collapseLargeDistance: var(--sp3x);
+		--account_collapseSmallDistance: var(--sp2-5x);
 
 		.cart-main-wrap {
 			.right-panel-wrap {
@@ -173,9 +271,13 @@ const TotalCheckoutStyle = styled.section `
 		--account_odLineMTop: var(--sp2x);
 		--account_odLineMBot: var(--sp3x);
 		--account_itemMTop: var(--sp1x);
-		--account_commentMarginTop: var(--sp3x);
+		--account_commentMarginTop: var(--sp1x);
 		--account_commentPadding: var(--sp1x) var(--sp2x);
-		--account_btnMTop: var(--sp2x);
+		--account_btnMTop: var(--sp3x);
+
+		/* //!  Collapse Sizes */
+		--account_collapseLargeDistance: var(--sp3x);
+		--account_collapseSmallDistance: var(--sp2x);
 
 		.cart-main-wrap {
 			.right-panel-wrap {

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

@@ -19,7 +19,6 @@ const ProgressComponent = ({ round, value = 50, maxValue = 100, size, gapSize, s
         }
     }
     const sizeNumber = getValue(size || '--sizeProgress');
-    console.log(sizeNumber);
     const strokeWidthNumber = getValue(strokeWidth || '--strokeWidth');
     const gapSizeValue = getValue(gapSize || '--gapDistance');
     const radius = (sizeNumber - strokeWidthNumber) / 2;

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { Text, useTranslation } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/core';
 //* Component
 import ProgressComponent from './ProgressComponent';
-//* Util
-import { handlePriceCheckFunc } from '../../../../../utils/_functions';
 //* Styles
 import ProgressBalanceStyle from './style';
 const ProgressBalance = ({ progress, balance, nextStatusValue, nextStatusTitle, iconValue }) => {

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

@@ -1,9 +1,7 @@
 import React from 'react';
-import { Text, useTranslation } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/core';
 //* Styles
 import HeroBalanceStyle from './style';
-//* Helpers
-import { handlePriceCheckFunc } from '../../../../utils/_functions';
 //* Component
 import ProgressBalance from './ProgressBalance';
 const HeroBalance = ({ iconValue, balance, cashback, progress, totalSpent, nextStatusValue, description, title, nextStatusTitle }) => {

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

@@ -1,7 +1,5 @@
-import { Text, useTranslation } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/core';
 import React from 'react';
-//* Helpers
-import { handlePriceCheckFunc } from '../../../../../utils/_functions';
 const ItemStatus = ({ title, cashback, value, className }) => {
     const { translate } = useTranslation();
     return (React.createElement("div", { className: `wrapper-item-status ${className}` },

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,38 @@ 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.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`);
+            }
+        }
+    }, [winWidth, addresses, flexWrapperRef.current, resize]);
+    useEffect(() => {
+        if (styleRef.current) {
+            styleRef.current.style.height = styleRef.current.clientHeight + 'px';
+        }
+    }, []);
+    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.js

@@ -15,11 +15,11 @@ import SkeletonCartTemplate from './Skeleton';
 const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout/' }) => {
     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',

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", { "clip-path": '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)));
 };