@weareconceptstudio/account 0.2.2 → 0.2.4

package/dist/AccountProvider.d.ts

@@ -1,5 +1,5 @@
 export function useAccountContext(): any;
-export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser, useCart }: {
+export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }: {
     fontFamily?: string;
     shopUrl?: string;
     children: any;
@@ -9,5 +9,7 @@ export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currenc
     addressFormFields: any;
     useUser: any;
     useCart: any;
+    productPopup: any;
+    productUrlPrefix: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/AccountProvider.js

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useEffect } from 'react';
-import { useTranslation } from '@weareconceptstudio/core';
+import React, { createContext, useCallback, useContext, useEffect } from 'react';
+import { useTranslation, useUi } from '@weareconceptstudio/core';
 import { ThemeProvider } from 'styled-components';
 import { AddressProvider } from './modules/address/AddressProvider';
 //* Translations
@@ -14,13 +14,22 @@ export const useAccountContext = () => {
     const context = useContext(AccountContext);
     return context;
 };
-export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart }) => {
+export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }) => {
     const { addTranslation } = useTranslation();
+    const { openPopup } = useUi();
     useEffect(() => {
         addTranslation(translations, 'prepend');
     }, []);
-    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart } },
-        React.createElement(AddressProvider, { addressType: addressType, addressFormFields: addressFormFields, useUser: useUser, useCart: useCart },
+    const handleProductClick = useCallback((product) => {
+        if (productUrlPrefix) {
+            console.log('Redirect for other project');
+        }
+        else {
+            openPopup(productPopup, { ...product, className: 'popup-product-block' });
+        }
+    }, [productUrlPrefix, productPopup]);
+    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick } },
+        React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
             React.createElement(ThemeProvider, { theme: theme },
                 React.createElement(AccountVariables, { fontFamily: fontFamily }),
                 React.createElement(AccountHelperClass, null),

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

@@ -0,0 +1,5 @@
+export default SequenceSkeleton;
+declare function SequenceSkeleton({ className }: {
+    className: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+//* Styles
+import SequenceSkeletonStyle from './style';
+import SequenceStyle from '../style';
+//* Skeleton file
+import SkeletonInitial from '../../SkeletonMaket';
+const SequenceSkeleton = ({ className }) => {
+    return (React.createElement(SequenceStyle, null,
+        React.createElement(SequenceSkeletonStyle, { className: className || ' ' }, Array.from({ length: 4 }).map((_, i, arr) => {
+            return (React.createElement("div", { key: i, className: 'wrapper-item-line' },
+                React.createElement(SkeletonInitial, { className: 'line', height: `var(--heightCircleItem)`, fontSize: `var(--account_p3)`, lineHeight: `var(--account_lineHeight)`, textLength: 12 }),
+                i < arr.length - 1 ? (React.createElement(SkeletonInitial, { className: 'item-sequence', height: `var(--heightLine)`, width: `var(--widthLine)` })) : null));
+        }))));
+};
+export default SequenceSkeleton;

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

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

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

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+const SequenceSkeletonStyle = styled.div `
+	--account_sequenceMB: var(--sp8x);
+	--heightCircleItem: var(--sp1x);
+	--widthLine: var(--account_stepLineWidth);
+	--heightLine: 2px;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--account_stepML);
+	row-gap: var(--sp1-5x);
+	flex-wrap: wrap;
+
+	.wrapper-item-line {
+		display: flex;
+		align-items: center;
+		gap: var(--account_stepML);
+		flex-wrap: wrap;
+	}
+
+	&.sequence-checkout-template {
+		margin-bottom: var(--account_sequenceMB);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_sequenceMB: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_sequenceMB: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_sequenceMB: var(--sp4x);
+	}
+`;
+export default SequenceSkeletonStyle;

package/dist/components/Sequence/style.js

@@ -27,6 +27,7 @@ const SequenceStyle = styled.section `
 	.steps-container {
 		display: flex;
 		flex-wrap: wrap;
+		row-gap: var(--account_stepML);
 
 		.step {
 			display: flex;
@@ -304,14 +305,6 @@ const SequenceStyle = styled.section `
 		--account_stepLineML: var(--sp1x);
 		--account_stepML: var(--sp1x);
 		--account_sequenceMB: var(--sp4x);
-
-		.steps-container {
-			margin-top: calc(-1 * var(--sp1-5x));
-
-			.step {
-				margin-top: var(--sp1-5x);
-			}
-		}
 	}
 `;
 export default SequenceStyle;

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

@@ -0,0 +1,10 @@
+export default SkeletonInitial;
+declare function SkeletonInitial({ fontSize, lineHeight, width, className, height, textLength }: {
+    fontSize: any;
+    lineHeight: any;
+    width: any;
+    className: any;
+    height: any;
+    textLength: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/SkeletonMaket/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+//* Styles
+import SkeletonInitialStyle from './style';
+const SkeletonInitial = ({ fontSize, lineHeight, width, className, height, textLength }) => {
+    return (React.createElement(SkeletonInitialStyle, { "$$lineHeight": lineHeight, "$$fontSize": fontSize, "$$width": width, "$$heightVariable": height, "$$textLength": textLength, className: className },
+        React.createElement("div", { className: 'skeleton-container' })));
+};
+export default SkeletonInitial;

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

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

package/dist/components/SkeletonMaket/style.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+const SkeletonInitialStyle = styled.div `
+	--initialColor: #eff1f2;
+
+	--averageCharWidth: 0.6;
+	--defaultWidth: calc(var(--averageCharWidth) *);
+	--defaultWidth: ${({ $$width, $$fontSize, $$textLength }) => $$width || ($$fontSize && $$textLength ? `calc(var(--averageCharWidth) * ${$$fontSize} * ${$$textLength})` : '7vw')};
+
+	height: ${({ $$lineHeight, $$fontSize, $$heightVariable }) => `max(${$$heightVariable || '0px'}, calc(${$$fontSize || '0'} * ${$$lineHeight || '0px'}))`};
+	width: var(--defaultWidth);
+
+	border-radius: var(--sp3x);
+	background-color: var(--initialColor);
+`;
+export default SkeletonInitialStyle;

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

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

package/dist/components/TotalCheckout/style.js

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 const TotalCheckoutStyle = styled.section `
 	--account_distance: var(--sp14x);
-	--account_rightPanelWrapWidth: var(--sp85x);
+	/* --account_rightPanelWrapWidth: var(--sp85x); */
+	--account_rightPanelWrapWidth: 23.01%;
 	--account_cartMainWrapPadTop: var(--sp8x);
 	--account_leftPanelWrapWidth: calc(100% - var(--account_rightPanelWrapWidth));
 
@@ -26,8 +27,10 @@ const TotalCheckoutStyle = styled.section `
 		}
 
 		.right-panel-wrap {
-			max-width: var(--account_rightPanelWrapWidth);
-			width: 100%;
+			width: var(--account_rightPanelWrapWidth);
+
+			/* max-width: var(--account_rightPanelWrapWidth);
+			width: 100%; */
 
 			.max-width-wrapper {
 				.od-line {
@@ -66,7 +69,8 @@ const TotalCheckoutStyle = styled.section `
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_distance: var(--sp8x);
-		--account_rightPanelWrapWidth: var(--sp66x);
+		/* --account_rightPanelWrapWidth: var(--sp66x); */
+		--account_rightPanelWrapWidth: 29.21%;
 		--account_cartMainWrapPadTop: var(--sp5x);
 
 		//! Right Layout Sizes
@@ -80,7 +84,8 @@ const TotalCheckoutStyle = styled.section `
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--account_distance: var(--sp8x);
-		--account_rightPanelWrapWidth: var(--sp50x);
+		/* --account_rightPanelWrapWidth: var(--sp50x); */
+		--account_rightPanelWrapWidth: 27.67%;
 		--account_cartMainWrapPadTop: var(--sp5x);
 
 		//! Right Layout Sizes
@@ -94,7 +99,8 @@ const TotalCheckoutStyle = styled.section `
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
 		--account_distance: var(--sp6x);
-		--account_rightPanelWrapWidth: var(--sp50x);
+		/* --account_rightPanelWrapWidth: var(--sp50x); */
+		--account_rightPanelWrapWidth: 29.07%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
 		//! Right Layout Sizes
@@ -108,7 +114,8 @@ const TotalCheckoutStyle = styled.section `
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
 		--account_distance: var(--sp5x);
-		--account_rightPanelWrapWidth: var(--sp46x);
+		/* --account_rightPanelWrapWidth: var(--sp46x); */
+		--account_rightPanelWrapWidth: 29.68%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
 		//! Right Layout Sizes
@@ -122,7 +129,8 @@ const TotalCheckoutStyle = styled.section `
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
 		--account_distance: var(--sp3x);
-		--account_rightPanelWrapWidth: var(--sp38x);
+		/* --account_rightPanelWrapWidth: var(--sp38x); */
+		--account_rightPanelWrapWidth: 30.9%;
 		--account_cartMainWrapPadTop: var(--sp4x);
 
 		//! Right Layout Sizes

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

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Text, Link, useUi, Page } from '@weareconceptstudio/core';
 import AccountStyle from './style';
 import { useAccountContext } from '../../../AccountProvider';
-const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children }) => {
+const AccountTemplate = ({ isFullWidth = true, menuOptions = [], children }) => {
     const { winWidth } = useUi();
     const { useUser } = useAccountContext();
     const { user, isLoggedIn, signOut } = useUser();

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

@@ -0,0 +1,5 @@
+export default SkeletonAddressSelect;
+declare function SkeletonAddressSelect({ className }: {
+    className: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+//* Styles
+import SkeletonAddressSelectStyle from './style';
+import AddressItemStyle from '../../AddressItem/style';
+//* Component
+import SkeletonInitial from '../../../../components/SkeletonMaket';
+const SkeletonAddressSelect = ({ className }) => {
+    return (React.createElement(AddressItemStyle, { className: 'full' },
+        React.createElement(SkeletonAddressSelectStyle, { className: className || ' ' },
+            React.createElement("div", { className: 'wrapper-title title' },
+                React.createElement(SkeletonInitial, { fontSize: 'var(--account_p2)', lineHeight: 'var(--account_lineHeight)', textLength: 10 }),
+                React.createElement(SkeletonInitial, { fontSize: 'var(--account_p3)', lineHeight: 'var(--account_lineHeight)', textLength: 10 })),
+            React.createElement("div", { className: 'item-internal-wrap' },
+                React.createElement(SkeletonInitial, { fontSize: 'var(--account_p3)', lineHeight: 'var(--account_lineHeight)', textLength: 18 }),
+                React.createElement(SkeletonInitial, { className: 'item-address', fontSize: 'var(--account_p3)', lineHeight: 'var(--account_lineHeight)', textLength: 30 }),
+                React.createElement(SkeletonInitial, { className: 'item-address', fontSize: 'var(--account_p3)', lineHeight: 'var(--account_lineHeight)', textLength: 24 }),
+                React.createElement(SkeletonInitial, { className: 'item-address', fontSize: 'var(--account_p3)', lineHeight: 'var(--account_lineHeight)', textLength: 16 }),
+                React.createElement(SkeletonInitial, { className: 'item-address-end', fontSize: 'var(--account_p3)', lineHeight: 'var(--account_lineHeight)', textLength: 27 })))));
+};
+export default SkeletonAddressSelect;

package/dist/modules/address/SelectAddress/Skeleton/style.d.ts

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

package/dist/modules/address/SelectAddress/Skeleton/style.js

@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+const SkeletonAddressSelectStyle = styled.div `
+	--account_checkoutMTop: var(--sp16x);
+	--account_changeAddressWrapMBot: var(--sp5x);
+
+	margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
+	margin-right: calc(-1 * calc(var(--account_itemDistance) / 2));
+
+	.item-internal-wrap {
+		border-color: #eff1f2;
+	}
+
+	&.address-checkout-template {
+		margin-bottom: var(--account_checkoutMTop);
+
+		.title {
+			margin-bottom: var(--account_changeAddressWrapMBot);
+		}
+	}
+
+	.wrapper-title {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-end;
+	}
+
+	.item-address {
+		margin-top: var(--account_smallMarginDistance);
+
+		&-end {
+			margin-top: var(--account_marginTopSize);
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_checkoutMTop: var(--sp11x);
+		--account_changeAddressWrapMBot: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_checkoutMTop: var(--sp8x);
+		--account_changeAddressWrapMBot: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_checkoutMTop: var(--sp8x);
+		--account_changeAddressWrapMBot: 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_checkoutMTop: var(--sp8x);
+		--account_changeAddressWrapMBot: 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}) {
+		--account_checkoutMTop: var(--sp8x);
+		--account_changeAddressWrapMBot: 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}) {
+		--account_checkoutMTop: var(--sp8x);
+		--account_changeAddressWrapMBot: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_checkoutMTop: var(--sp10x);
+		--account_changeAddressWrapMBot: var(--sp2x);
+		margin-top: calc(var(--sp2x) * -1);
+	}
+`;
+export default SkeletonAddressSelectStyle;

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

@@ -3,7 +3,7 @@ import { Text } from '@weareconceptstudio/core';
 //* Style
 import ShippingBillingInfoStyle from './style';
 import { useAddressContext } from '../AddressProvider';
-// TODO: address info to component
+// TODO: Address info to component
 const ShippingBillingInfo = memo(({ className, shipping_address, billing_address }) => {
     const { addressType } = useAddressContext();
     return (React.createElement(ShippingBillingInfoStyle, { className: `${className || ''}` },

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

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

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

@@ -1,18 +1,19 @@
+import { useUi } from '@weareconceptstudio/core';
 import React from 'react';
 //* Styles
 import SkeletonCartTemplateStyle from './style';
 //* Files Skeleton
 import { skeletonCategoryName, skeletonMenuTitle, skeletonShopUrl, skeletonCategoryNameAdapting } from './icons';
+//*Component
 import SkeletonItemCart from './SkeletonItem';
-import { useUi } from '@weareconceptstudio/core';
-const SkeletonCartTemplate = ({ shopUrl }) => {
+const SkeletonCartTemplate = ({ shopUrl, isCheckout }) => {
     const { winWidth } = useUi();
-    return (React.createElement(SkeletonCartTemplateStyle, null,
+    return (React.createElement(SkeletonCartTemplateStyle, { className: isCheckout ? 'checkout-style' : ' ' },
         React.createElement("div", { className: 'left-bar' },
             shopUrl ? React.createElement("div", { className: 'wrapper-url' }, skeletonShopUrl) : React.createElement(React.Fragment, null),
             React.createElement("div", { className: 'wrapper-cat' },
                 React.createElement("div", { className: 'title-wrapper' }, skeletonMenuTitle),
-                React.createElement("div", { className: 'order-items-line' }),
+                isCheckout ? null : React.createElement("div", { className: 'order-items-line' }),
                 winWidth < 1510 ? (React.createElement("div", { className: 'category-name' }, skeletonCategoryNameAdapting)) : (React.createElement("div", { className: 'category-name' }, Array.from({ length: 4 }).map((_, i) => {
                     return React.createElement("div", { key: i }, skeletonCategoryName);
                 })))),

package/dist/modules/cart/CartTemplate/Skeleton/style.js

@@ -4,6 +4,7 @@ const SkeletonCartTemplateStyle = styled.section `
 	--account_spaceLineMBot: var(--sp7x);
 	--account_orderItemsTitleWrapPB: var(--sp3x);
 	--account_itemWrapPadTB: var(--sp5x);
+	--account_titleEditWrapperMBot: var(--sp5x);
 
 	svg {
 		display: block;
@@ -65,22 +66,31 @@ const SkeletonCartTemplateStyle = styled.section `
 		background-color: #eff1f2;
 	}
 
+	&.checkout-style {
+		.title-wrapper {
+			margin-bottom: var(--account_titleEditWrapperMBot);
+		}
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_spaceLineMBot: var(--sp5x);
 		--account_orderItemsTitleWrapPB: var(--sp3x);
 		--account_itemWrapPadTB: var(--sp4x);
+		--account_titleEditWrapperMBot: var(--sp4x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--account_spaceLineMBot: var(--sp4x);
 		--account_orderItemsTitleWrapPB: var(--sp2x);
 		--account_itemWrapPadTB: var(--sp3x);
+		--account_titleEditWrapperMBot: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
 		--account_spaceLineMBot: var(--sp4x);
 		--account_orderItemsTitleWrapPB: var(--sp2x);
 		--account_itemWrapPadTB: var(--sp3x);
+		--account_titleEditWrapperMBot: var(--sp3x);
 
 		.category-name,
 		.cart-desktop-wrapper {
@@ -92,6 +102,7 @@ const SkeletonCartTemplateStyle = styled.section `
 		--account_spaceLineMBot: var(--sp3x);
 		--account_orderItemsTitleWrapPB: var(--sp2x);
 		--account_itemWrapPadTB: var(--sp3x);
+		--account_titleEditWrapperMBot: var(--sp4x);
 
 		.skeleton-cart-middle {
 			padding-left: var(--sp1x);
@@ -111,6 +122,7 @@ const SkeletonCartTemplateStyle = styled.section `
 		--account_spaceLineMBot: var(--sp3x);
 		--account_orderItemsTitleWrapPB: var(--sp2x);
 		--account_itemWrapPadTB: var(--sp3x);
+		--account_titleEditWrapperMBot: var(--sp3x);
 
 		.skeleton-cart-middle {
 			padding-left: var(--sp1x);
@@ -130,6 +142,7 @@ const SkeletonCartTemplateStyle = styled.section `
 		--account_spaceLineMBot: var(--sp3x);
 		--account_orderItemsTitleWrapPB: var(--sp2x);
 		--account_itemWrapPadTB: var(--sp3x);
+		--account_titleEditWrapperMBot: var(--sp3x);
 
 		.skeleton-cart-middle {
 			padding-left: var(--sp1x);
@@ -147,6 +160,7 @@ const SkeletonCartTemplateStyle = styled.section `
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--account_spaceLineMBot: 0;
+		--account_titleEditWrapperMBot: var(--sp2x);
 
 		.category-name {
 			display: none;

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

@@ -17,7 +17,7 @@ const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout
     const { translate } = useTranslation();
     const { items, itemsCount, shippingCost, loading, subtotal, total } = useCart();
     return (React.createElement(Page, { className: 'cart use-account' },
-        React.createElement(AccountContainer, null,
+        React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CartTemplateStyle, null,
                 React.createElement(TotalCheckout, { total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, loading: loading, buttonProps: {
                         url: checkoutUrl,

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

@@ -3,9 +3,9 @@ import { Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
 import { handlePriceCheckFunc } from '../../../../utils/_functions';
 import { AccountButton } from '../../../../components';
-//TODO: Fake
-const pathname = '/cart/';
+import { useAccountContext } from '../../../../AccountProvider';
 const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency }) => {
+    const { handleProductClick } = useAccountContext();
     const selectionList = useMemo(() => {
         if (select) {
             const selectList = [];
@@ -22,7 +22,7 @@ const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency })
                 React.createElement("div", { className: `image-wrapper` },
                     React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
                 React.createElement("div", { className: `col-1-right-wrap` },
-                    React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, url: `/menu/${data.product.slug}`, className: `capitalize title-btn`, target: pathname === '/cart/' || pathname === '/checkout' ? '_blank' : '_self' }),
+                    React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize title-btn`, onClick: () => handleProductClick(data.product) }),
                     React.createElement("div", { className: `right-first-item-wrap` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 })),
                     React.createElement("div", { className: `right-second-item-wrap` },

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

@@ -3,9 +3,9 @@ import { Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
 import { AccountButton } from '../../../../components';
 import { handlePriceCheckFunc } from '../../../../utils/_functions';
-//TODO: Fake
-const pathname = '/cart/';
+import { useAccountContext } from '../../../../AccountProvider';
 const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) => {
+    const { handleProductClick } = useAccountContext();
     const selectionList = useMemo(() => {
         if (select) {
             const selectList = [];
@@ -21,7 +21,7 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
                 React.createElement("div", { className: `mobile-image-wrap` },
                     React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
                 React.createElement("div", { className: `mobile-info-wrap` },
-                    React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, url: `/menu/${data.product.slug}`, className: `capitalize mobile-info-wrap-title`, target: pathname === '/cart/' || pathname === '/checkout/' ? '_blank' : '_self' }),
+                    React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize mobile-info-wrap-title`, onClick: () => handleProductClick(data.product) }),
                     React.createElement("div", { className: 'mobile-info-item' },
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 })),
                     React.createElement("div", { className: 'mobile-info-item' },
@@ -46,9 +46,9 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
                         data.product?.sale_price ? (React.createElement("div", null,
                             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-total-discounted-price`, text: `${data.sale_total} ${currency}` }),
                             React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price`, text: handlePriceCheckFunc(data.product.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-total-price2`, text: `${data.total} ${currency}` }))))),
-            pathname === '/cart/' && (React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
+            React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
                 React.createElement("div", { className: 'empty' }),
-                React.createElement("div", { className: `favorite-remove-mobile-wrap` }, remove && (React.createElement(AccountButton, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product.id }) })))))),
+                React.createElement("div", { className: `favorite-remove-mobile-wrap` }, remove && (React.createElement(AccountButton, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product.id }) }))))),
         React.createElement("div", { className: 'line' })));
 });
 export default ItemMobile;

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

@@ -8,6 +8,10 @@ import StepShipping from './StepShipping';
 import AccountContainer from '../../../components/AccountContainer';
 //* Styles
 import CheckoutTemplateStyle from './style';
+//* Skeleton
+import SkeletonCartTemplate from '../../cart/CartTemplate/Skeleton';
+import SequenceSkeleton from '../../../components/Sequence/Skeleton';
+import SkeletonAddressSelect from '../../address/SelectAddress/Skeleton';
 const CheckoutTemplate = () => {
     const { checkoutAddressId } = useAddressContext();
     const { useCart } = useAccountContext();
@@ -47,9 +51,9 @@ const CheckoutTemplate = () => {
         checkStep.isShipping ? handleCheckoutFirstStep() : handleCheckoutSecondStep();
     }, [checkStep]);
     return (React.createElement(Page, { className: 'checkout use-account' },
-        React.createElement(AccountContainer, null,
+        React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CheckoutTemplateStyle, null,
-                React.createElement(TotalCheckout, { isCheckout: true, total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, isShipping: checkStep.isShipping, checkoutData: checkoutData, fillCheckoutData: fillCheckoutData, buttonProps: {
+                React.createElement(TotalCheckout, { isCheckout: true, total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, isShipping: checkStep.isShipping, checkoutData: checkoutData, fillCheckoutData: fillCheckoutData, loading: addressLoading, buttonProps: {
                         url: false,
                         disabled: false,
                         handleClick: handleCheckoutBtn,
@@ -57,6 +61,9 @@ const CheckoutTemplate = () => {
                         text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
                     } }, !addressLoading ? (React.createElement(React.Fragment, null,
                     React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
-                    checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : null)))));
+                    checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,
+                    React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
+                    React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
+                    React.createElement(SkeletonCartTemplate, { isCheckout: true }))))))));
 };
 export default CheckoutTemplate;

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

@@ -13,9 +13,9 @@ const ThankYouTemplate = ({ orderNumber }) => {
     useEffect(() => {
         cart.clearCart();
     }, []);
-    return (React.createElement(Page, { className: 'use-account' },
+    return (React.createElement(Page, { className: 'thank-you-message use-account' },
         React.createElement(ThankYouMessageStyle, null,
-            React.createElement(AccountContainer, null,
+            React.createElement(AccountContainer, { className: 'second-version' },
                 React.createElement(Sequence, { step: 'confirmed' }),
                 React.createElement("div", { className: `confirmation-wrapper` },
                     React.createElement("div", { className: 'confirmation-image' }, confirmImage),

package/dist/modules/order/OrderedItems/index.js

@@ -4,10 +4,9 @@ import { handlePriceCheckFunc } from '../../../utils/_functions';
 import { useAccountContext } from '../../../AccountProvider';
 import { AccountButton } from '../../../components';
 import OrderedItemsStyle from './style';
-// TODO: product url
 const OrderedItems = ({ data: items, status }) => {
     const { winWidth } = useUi();
-    const { currency } = useAccountContext();
+    const { currency, handleProductClick } = useAccountContext();
     //! Store order items
     const storeOrderedItems = useMemo(() => {
         return items?.length > 0
@@ -17,7 +16,7 @@ const OrderedItems = ({ data: items, status }) => {
                         React.createElement("div", { className: `image-wrapper` },
                             React.createElement(Image, { src: item.product.image.src, alt: item.product.image.alt })),
                         React.createElement("div", { className: `col-1-right-wrap` },
-                            React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, className: `ordered-item-title`, url: `/menu/${item.product.slug}` }),
+                            React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, className: `ordered-item-title`, onClick: () => handleProductClick(item.product) }),
                             item.color ? (React.createElement("div", { className: `right-first-item-wrap` },
                                 React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
                                 "\u00A0",
@@ -40,7 +39,7 @@ const OrderedItems = ({ data: items, status }) => {
                     React.createElement("div", { className: `mobile-image-wrap` },
                         React.createElement(Image, { src: item.product.image.src, alt: item.product.image.alt })),
                     React.createElement("div", { className: `mobile-info-wrap` },
-                        React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, url: `/menu/${item.product.slug}`, className: `ordered-item-mobile-title` }),
+                        React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, className: `ordered-item-mobile-title`, onClick: () => handleProductClick(item.product) }),
                         item.color ? (React.createElement("div", { className: `mobile-info-item` },
                             React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
                             "\u00A0",
@@ -62,7 +61,7 @@ const OrderedItems = ({ data: items, status }) => {
                             React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `total` }),
                             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.total, currency) })))))))
             : null;
-    }, [items, currency, winWidth, status]);
+    }, [items, currency, winWidth, status, handleProductClick]);
     return (React.createElement(OrderedItemsStyle, { className: `ordered-items-wrapper` },
         React.createElement(Text, { className: 'account-p account-p1 account-font-bold account-primary-color1 ', text: 'orderItems' }),
         React.createElement("div", { className: 'line' }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/account",
-	"version": "0.2.2",
+	"version": "0.2.4",
 	"description": "Concept Studio Account",
 	"author": "Concept Studio",
 	"license": "ISC",