@weareconceptstudio/account 0.2.3 → 0.2.4

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/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/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/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/package.json

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