@weareconceptstudio/account 0.3.7 → 0.3.8

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

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

package/dist/components/Loader/index.js

@@ -1,18 +1,29 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 //* Styles
 import LoaderStyle from './style';
-const Loader = ({ className }) => {
+const Loader = ({ className, pathname }) => {
     //! State
     const [loaderState, setLoaderState] = useState('');
+    const intervalStart = useRef();
+    const intervalEnd = useRef();
+    const intervalRerender = useRef();
     useEffect(() => {
-        setTimeout(() => {
+        intervalStart.current = setTimeout(() => {
             setLoaderState('start');
         }, 100);
-        setTimeout(() => {
-            setLoaderState('end');
+        intervalEnd.current = setTimeout(() => {
+            setLoaderState('start end');
         }, 2000);
-    }, []);
+        intervalRerender.current = setTimeout(() => {
+            setLoaderState('initial');
+        }, 2200);
+        return () => {
+            clearTimeout(intervalStart.current);
+            clearTimeout(intervalEnd.current);
+            clearTimeout(intervalRerender.current);
+        };
+    }, [pathname]);
     return (React.createElement(LoaderStyle, { className: `${loaderState || ''}` },
         React.createElement("div", { className: `loader  ${className || ''}` },
             React.createElement("div", { className: 'cont' },

package/dist/components/Loader/style.js

@@ -3,6 +3,9 @@ const LoaderStyle = styled.div `
 	--sizeCircle: calc(var(--sp12x) + var(--sp0-5x));
 	--sizeLine: var(--sp2-5x);
 
+	opacity: 1;
+	visibility: visible;
+
 	&:before {
 		content: '';
 		position: absolute;
@@ -12,7 +15,8 @@ const LoaderStyle = styled.div `
 		height: 100%;
 		background-color: var(--account_backgroundColor);
 		z-index: 1;
-		transition: 1s linear;
+		opacity: 1;
+		visibility: visible;
 	}
 
 	.loader {
@@ -25,6 +29,8 @@ const LoaderStyle = styled.div `
 		height: 100vh;
 		z-index: 10;
 		pointer-events: none;
+		opacity: 1;
+		visibility: visible;
 
 		&:before {
 			background-color: var(--account_backgroundColor);
@@ -37,24 +43,22 @@ const LoaderStyle = styled.div `
 			left: 0;
 			width: 100%;
 			height: 100%;
-			transition: 1s linear 1.8s;
+			opacity: 1;
 		}
 
 		.cont {
 			position: absolute;
 			top: 50%;
 			left: 50%;
-			transform: translate(-50%, -50%);
+			transform: translate(-50%, -50%) scale(1);
 			width: var(--sizeCircle);
 			height: var(--sizeCircle);
-			transition: 0.5s linear 1.5s;
 
 			span {
 				background-color: var(--account_primaryColor1);
 				height: var(--sizeLine);
 				width: 0;
 				position: absolute;
-				transition: 0.5s ease-out 1s;
 
 				&.line-top {
 					bottom: calc(100% + var(--sizeLine));
@@ -83,32 +87,50 @@ const LoaderStyle = styled.div `
 					width: 100%;
 					height: 100%;
 					background: linear-gradient(45deg, rgba(167, 0, 222, 1) 0%, rgba(254, 0, 133, 1) 100%);
-					transition: 0.5s ease-in-out;
 				}
 			}
 		}
 	}
 
+	&.initial {
+		opacity: 0;
+		visibility: hidden;
+		transition: 0s linear;
+
+		&:before {
+			visibility: hidden;
+		}
+	}
+
 	&.start {
 		&:before {
-			opacity: 0;
+			opacity: 1;
+			visibility: visible;
 		}
 
 		.loader {
+			opacity: 1;
+			visibility: visible;
+
 			&:before {
-				opacity: 0;
+				opacity: 1;
+				transition: 1s linear 1.8s;
+				visibility: visible;
 			}
 
 			.cont {
 				transform: translate(-50%, -50%) scale(0);
+				transition: 0.5s linear 1.5s;
 
 				span {
 					width: 100%;
+					transition: 0.5s ease-out 1s;
 				}
 
 				.circle {
 					&:before {
-						top: 0;
+						top: 0%;
+						transition: 0.5s ease-in-out;
 					}
 				}
 			}
@@ -120,6 +142,7 @@ const LoaderStyle = styled.div `
 		.loader {
 			opacity: 0;
 			visibility: hidden;
+			transition: 0.2s linear;
 		}
 	}
 

package/dist/components/TotalCheckout/BalanceComp/index.js

@@ -15,9 +15,7 @@ const BalanceComp = ({ isBalance = true, currency, balance, useBalance, balanceH
         balanceHandler(values.balance);
     };
     return isBalance ? (React.createElement(BalanceCompStyle, { className: `collapse-distance ${getItemCount && balance ? ' ' : 'disable'}` },
-        React.createElement(CollapseItem, { disable: disable, 
-            // status={'open'}
-            title: React.createElement(React.Fragment, null,
+        React.createElement(CollapseItem, { disable: useBalance || disable, title: React.createElement(React.Fragment, null,
                 React.createElement("div", { className: 'inner-wrapper-icon' },
                     React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
                         React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),

package/dist/components/TotalCheckout/PromoCodeComp/index.js

@@ -14,7 +14,7 @@ const PromoCodeComp = ({ isPromoCode = true, promo_code, getItemCount }) => {
         setCouponCode(true);
         setDisable(true);
     };
-    return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${getItemCount ? ' ' : ' disable'}` },
+    return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${getItemCount ? '' : 'disable'}` },
         React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
                 React.createElement("div", { className: 'inner-wrapper-icon' },
                     React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },

package/dist/components/TotalCheckout/index.js

@@ -13,9 +13,9 @@ import TotalCheckoutStyle from './style';
 import SkeletonTotalCheckout from './Skeleton';
 // TODO: Promo code
 const promo_code = '10% of first order';
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, isCheckout = false }) => {
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps }) => {
     const { currency, useCart, useUser } = useAccountContext();
-    const { fillCheckoutData, fillCart } = useCheckoutContext();
+    const { fillCheckoutData, fillCart, checkoutBtnDisabled, isCheckoutPage } = useCheckoutContext();
     const { addressLoading } = useAddressContext();
     const { user } = useUser();
     const { itemsCount, shippingCost, freeShippingRange, shippingCostValue, total, subtotal, useBalance, loading } = useCart();
@@ -70,12 +70,12 @@ 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-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-currency2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
-                !isCheckout ? (React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, shippingCostValue: shippingCostValue, freeShippingRange: freeShippingRange })) : null,
+                !isCheckoutPage ? (React.createElement(FreeShippingComp, { currency: currency, shippingCost: shippingCost, shippingCostValue: shippingCostValue, freeShippingRange: freeShippingRange })) : null,
                 React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
                     React.createElement("div", { ref: innerCollapseRef },
                         React.createElement(BalanceComp, { getItemCount: itemsCount, balance: user?.balance || 0, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
                         React.createElement(PromoCodeComp, { getItemCount: itemsCount, promo_code: promo_code }))),
-                isCheckout && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, { fillCheckoutData: fillCheckoutData }) : null,
-                React.createElement(AccountButton, { loading: buttonProps.loadingButton, 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))))));
+                isCheckoutPage && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, { fillCheckoutData: fillCheckoutData }) : null,
+                React.createElement(AccountButton, { loading: buttonProps.loadingButton, url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, className: `sticky-wrap-btn`, disabled: checkoutBtnDisabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick() }))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });
 export default TotalCheckout;

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

@@ -18,6 +18,9 @@ const AccountTemplate = ({ isFullWidth = true, menuOptions = [], children }) =>
         return menuOptions.map((menuItem, index) => (React.createElement(Link, { key: index, href: menuItem.url, className: `menu-item ${menuItem.className ? menuItem.className : ''}`, ...menuItem.options },
             React.createElement(Text, { tag: `span`, className: `account-p account-p1 account-font-bold sidebar-item`, text: menuItem.name }))));
     }, [menuOptions]);
+    const loadingComponent = useMemo(() => {
+        return (React.createElement(Loader, { className: 'account', pathname: window.location.pathname }));
+    }, [window.location.pathname]);
     return user && isLoggedIn ? (React.createElement(Page, { className: 'account use-account' },
         React.createElement(AccountStyle, { className: 'account-container' },
             React.createElement("div", { className: 'account-wrap' },
@@ -30,7 +33,7 @@ const AccountTemplate = ({ isFullWidth = true, menuOptions = [], children }) =>
                         React.createElement(Text, { text: 'signOut', onClick: signOut, className: 'account-p account-p1 account-error-color account-font-bold sign-out' }))),
                 lineStore,
                 React.createElement("div", { className: `right-bar` },
-                    React.createElement(Loader, { className: 'account' }),
+                    loadingComponent,
                     React.createElement("div", { className: `max-width-wrap ${isFullWidth ? 'full-max-width' : ''}` }, children)))))) : null;
 };
 export default AccountTemplate;

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

@@ -242,7 +242,8 @@ const AccountStyle = styled.section `
 
 			.right-bar {
 				height: 100vh;
-				animation: heightMobile 1s ease-out 1.8s forwards;
+				animation: heightMobile 1s ease-out 1.6s forwards;
+				overflow: hidden;
 
 				@keyframes heightMobile {
 					0% {
@@ -293,8 +294,9 @@ const AccountStyle = styled.section `
 			}
 
 			.right-bar {
-				height: 150vh;
-				animation: heightMobile 1s ease-out 1.8s forwards;
+				height: 100vh;
+				animation: heightMobile 1s ease-out 1.6s forwards;
+				overflow: hidden;
 
 				@keyframes heightMobile {
 					0% {

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

@@ -7,7 +7,7 @@ import AccountButton from '../../../components/AccountButton';
 import { CheckboxIcon, CheckboxCheckedIcon } from '../../../utils/icons';
 //* Style
 import AddressFormStyle from './style';
-const AddressForm = Memo(({ title, data, type, isCheckoutPage = false }) => {
+const AddressForm = Memo(({ title, data, type }) => {
     const { formFields, createAddress, updateAddress } = useAddressContext();
     const { closePopup } = useUi();
     //! States
@@ -22,7 +22,7 @@ const AddressForm = Memo(({ title, data, type, isCheckoutPage = false }) => {
         };
         setIsDisabled(true);
         return (!isDisabled &&
-            eval(data?.id ? `updateAddress({data: newData, addressId: data.id, type, isCheckoutPage})` : `createAddress({data: newData, type, isCheckoutPage})`).then(() => {
+            eval(data?.id ? `updateAddress({data: newData, addressId: data.id, type})` : `createAddress({data: newData, type})`).then(() => {
                 closePopup();
             }));
     }, [data, isChecked, createAddress, updateAddress, isDisabled]);

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

@@ -18,7 +18,7 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
         });
     }, [data]);
     const handleEditAddressPopup = useCallback(() => {
-        openPopup(React.createElement(AddressForm, { title: type === 'billing' ? `updateYourBillingAddress` : type == 'shipping' ? `updateYourShippingAddress` : 'updateYourAddress', data: data, isCheckoutPage: select_address }), {
+        openPopup(React.createElement(AddressForm, { title: type === 'billing' ? `updateYourBillingAddress` : type == 'shipping' ? `updateYourShippingAddress` : 'updateYourAddress', data: data }), {
             accountIcon: true,
         });
     }, [data]);

package/dist/modules/address/AddressProvider.js

@@ -8,7 +8,7 @@ export const useAddressContext = () => {
 };
 export const AddressProvider = ({ addressType, addressFormFields = [], useUser, children }) => {
     const { isLoggedIn } = useUser();
-    const { fillCheckoutData, fillCart } = useCheckoutContext();
+    const { fillCheckoutData, fillCart, isCheckoutPage } = useCheckoutContext();
     const [addressLoading, setAddressLoading] = useState(false);
     const [addresses, setAddresses] = useState(addressType ? { billing: [], shipping: [] } : []);
     const [selectedAddresses, setSelectedAddresses] = useState(addressType ? { billing: {}, shipping: {} } : {});
@@ -35,7 +35,7 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
             });
         }
     }, [isLoggedIn]);
-    const createAddress = async ({ data, type, isCheckoutPage }) => {
+    const createAddress = async ({ data, type }) => {
         return await api.post('addresses', data).then((res) => {
             if (addressType) {
             }
@@ -51,7 +51,7 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
             }
         });
     };
-    const updateAddress = async ({ data, addressId, type, isCheckoutPage }) => {
+    const updateAddress = async ({ data, addressId, type }) => {
         return await api.put(`addresses/${addressId}`, data).then((res) => {
             if (addressType) {
             }

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

@@ -18,7 +18,7 @@ const SelectAddressPopup = Memo(({ title, type }) => {
     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 }), {
+        openPopup(React.createElement(AddressForm, { title: type == 'shipping' ? `addNewShippingAddress` : type == 'billing' ? 'addNewBillingAddress' : 'addNewAddress', type: type }), {
             accountIcon: true,
         });
     };

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

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

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

@@ -1,19 +1,21 @@
-import { useUi } from '@weareconceptstudio/core';
 import React from 'react';
+import { useUi } from '@weareconceptstudio/core';
+import { useCheckoutContext } from '../../../checkout';
 //* Styles
 import SkeletonCartTemplateStyle from './style';
 //* Files Skeleton
 import { skeletonCategoryName, skeletonMenuTitle, skeletonShopUrl, skeletonCategoryNameAdapting } from './icons';
 //*Component
 import SkeletonItemCart from './SkeletonItem';
-const SkeletonCartTemplate = ({ shopUrl, isCheckout }) => {
+const SkeletonCartTemplate = ({ shopUrl }) => {
     const { winWidth } = useUi();
-    return (React.createElement(SkeletonCartTemplateStyle, { className: isCheckout ? 'checkout-style' : ' ' },
+    const { isCheckoutPage } = useCheckoutContext();
+    return (React.createElement(SkeletonCartTemplateStyle, { className: isCheckoutPage ? '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),
-                isCheckout ? null : React.createElement("div", { className: 'order-items-line' }),
+                isCheckoutPage ? 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/index.d.ts

@@ -1,8 +1,7 @@
 export default CartTemplate;
-declare function CartTemplate({ children, actions, btnDisabled, checkoutUrl, moreMenu }: {
+declare function CartTemplate({ children, actions, checkoutUrl, moreMenu }: {
     children: any;
     actions: any;
-    btnDisabled: any;
     checkoutUrl?: string;
     moreMenu: any;
 }): React.JSX.Element;

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

@@ -12,7 +12,7 @@ const leftArrow = (React.createElement("svg", { fill: 'none', viewBox: '0 0 16 1
 import CartTemplateStyle from './style';
 //* Skeleton
 import SkeletonCartTemplate from './Skeleton';
-const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout/', moreMenu }) => {
+const CartTemplate = ({ children, actions, checkoutUrl = '/checkout/', moreMenu }) => {
     const { shopUrl, useCart } = useAccountContext();
     const { translate } = useTranslation();
     const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue } = useCart();
@@ -21,7 +21,6 @@ const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout
             React.createElement(CartTemplateStyle, null,
                 React.createElement(TotalCheckout, { total: total, loading: loading, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, freeShippingRange: freeShippingRange, shippingCostValue: shippingCostValue, buttonProps: {
                         url: checkoutUrl,
-                        disabled: btnDisabled,
                         text: 'proceedToCheckout',
                     } }, !loading ? (itemsCount > 0 ? (React.createElement(React.Fragment, null,
                     shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, className: `back-to-shop` },

package/dist/modules/checkout/CheckoutProvider.js

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useState, useRef, useEffect, useCallback } from 'react';
-import { api, useTranslation } from '@weareconceptstudio/core';
+import React, { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { api, useTranslation, isNumeric } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
 const CheckoutContext = createContext(null);
 export const useCheckoutContext = () => {
@@ -9,16 +9,30 @@ export const useCheckoutContext = () => {
 export const CheckoutProvider = ({ children }) => {
     const { selectedLang } = useTranslation();
     const { useCart, useUser } = useAccountContext();
-    const { getCart } = useCart();
+    const { getCart, itemsCount } = useCart();
     const { user } = useUser();
+    const form = useRef();
     const [checkoutData, setCheckoutData] = useState({
         addressId: null,
         useBalance: null,
         note: '',
         paymentType: user?.default_payment_method || null,
     });
-    const form = useRef();
     const [idramForm, setIdramForm] = useState();
+    const isCheckoutPage = useMemo(() => {
+        return window.location.href.includes('checkout');
+    }, [window.location.href]);
+    const checkoutBtnDisabled = useMemo(() => {
+        let isDisabled = false;
+        if (isCheckoutPage && isNumeric(checkoutData.paymentType)) {
+            const selectedCard = user?.cards?.find((card) => card.id == checkoutData.paymentType);
+            isDisabled = selectedCard.is_expired;
+        }
+        if (!itemsCount) {
+            isDisabled = true;
+        }
+        return isDisabled;
+    }, [checkoutData.paymentType, user, isCheckoutPage, itemsCount]);
     const fillCheckoutData = (key, value) => {
         setCheckoutData((prev) => ({
             ...prev,
@@ -33,7 +47,15 @@ export const CheckoutProvider = ({ children }) => {
         });
     }, [checkoutData]);
     const handleCheckout = async () => {
-        return await api.post('checkout', checkoutData).then((res) => {
+        let data = { ...checkoutData };
+        if (isNumeric(checkoutData.paymentType)) {
+            data.paymentType = 'credit_card';
+            data.card_id = Number(checkoutData.paymentType);
+        }
+        if (checkoutData.paymentType == 'credit_card') {
+            data.card_id = 0;
+        }
+        return await api.post('checkout', data).then((res) => {
             if (res.redirect_url) {
                 window.location.href = res.redirect_url;
             }
@@ -60,6 +82,8 @@ export const CheckoutProvider = ({ children }) => {
             fillCheckoutData,
             handleCheckout,
             fillCart,
+            checkoutBtnDisabled,
+            isCheckoutPage,
         } },
         children,
         idramForm));

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

@@ -43,9 +43,8 @@ const CheckoutTemplate = () => {
     return (React.createElement(Page, { className: 'checkout use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CheckoutTemplateStyle, null,
-                React.createElement(TotalCheckout, { isCheckout: true, isShipping: checkStep.isShipping, buttonProps: {
+                React.createElement(TotalCheckout, { isShipping: checkStep.isShipping, buttonProps: {
                         url: false,
-                        disabled: false,
                         handleClick: handleCheckoutBtn,
                         type: checkStep.isShipping ? 'submit' : 'button',
                         text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
@@ -55,6 +54,6 @@ const CheckoutTemplate = () => {
                     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 }))))))));
+                    React.createElement(SkeletonCartTemplate, null))))))));
 };
 export default CheckoutTemplate;

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

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
-import { handlePriceCheckFunc, numToLocalString, Text, useTranslation } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc, Text, useTranslation } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../../AccountProvider';
-import OrderDetailsStyle from './style';
 import OrderStatus from '../OrderStatus';
+import OrderDetailsStyle from './style';
 const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, total, shippingCost, usedBalance }) => {
     const { translate } = useTranslation();
     const { currency } = useAccountContext();

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

@@ -7,7 +7,6 @@ import OrderedItems from '../OrderedItems';
 import { ShippingBillingInfo } from '../../address';
 //* Style
 import OrderIndividualTemplateStyle from './style';
-// TODO: status change
 const OrderIndividualTemplate = ({ uniqueKey }) => {
     const [data, setData] = useState();
     const [loading, setLoading] = useState(true);
@@ -23,6 +22,6 @@ const OrderIndividualTemplate = ({ uniqueKey }) => {
             React.createElement("div", { className: `details-shipping-billing-wrap` },
                 React.createElement(OrderDetails, { className: `col-50`, ...data }),
                 React.createElement(ShippingBillingInfo, { className: `col-50`, billing_address: data?.billingAddress, shipping_address: data?.shippingAddress })),
-            React.createElement(OrderedItems, { data: data.items, dataId: data.id, status: data.status })))) : null;
+            React.createElement(OrderedItems, { dataId: data.id, data: data.items, status: data.status })))) : null;
 };
 export default OrderIndividualTemplate;

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

@@ -1,25 +1,8 @@
 import React from 'react';
 import { Text } from '@weareconceptstudio/core';
-{
-    /* {data.status === 'delivered' ? (
-                    <Text
-                        className={`account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item delivered`}
-                        text={'delivered'}
-                    />
-                ) : data.status === 'canceled' ? (
-                    <Text
-                        className={`account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item canceled`}
-                        text={'canceled'}
-                    />
-                ) : (
-                    <Text
-                        className={`account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item in-progress`}
-                        text={'inProgress'}
-                    />
-                )} */
-}
-// In order individual added className value
+import OrderStatusStyle from './style';
 const OrderStatus = ({ status, className = '' }) => {
-    return (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item ${status} ${className}`, text: status }));
+    return (React.createElement(OrderStatusStyle, null,
+        React.createElement(Text, { className: `account-p account-p4 account-font-bold status-item ${status} ${className}`, text: status })));
 };
 export default OrderStatus;

package/dist/modules/order/OrderStatus/style.d.ts

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

package/dist/modules/order/OrderStatus/style.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+const OrderStatusStyle = styled.div `
+	.status-item {
+		/* //! Default */
+		color: var(--account_backgroundColor);
+		background-color: var(--account_primaryColor1);
+
+		&.canceled {
+			color: var(--account_statusCanceledColor);
+			background-color: var(--account_statusCanceledBgColor);
+		}
+
+		&.accepted {
+			color: var(--account_statusAcceptedColor);
+			background-color: var(--account_statusAcceptedBgColor);
+		}
+
+		&.processing {
+			color: var(--account_statusProcessingColor);
+			background-color: var(--account_statusProcessingBgColor);
+		}
+
+		&.delivered {
+			color: var(--account_statusDeliveredColor);
+			background-color: var(--account_statusDeliveredBgColor);
+		}
+
+		&.payment_failed {
+			color: var(--account_statusPaymentFailedColor);
+			background-color: var(--account_statusPaymentFailedBgColor);
+		}
+
+		&.pending {
+			color: var(--account_statusPendingColor);
+			background-color: var(--account_statusPendingBgColor);
+		}
+
+		&.completed {
+			color: var(--account_statusCompletedColor);
+			background-color: var(--account_statusCompletedBgColor);
+		}
+	}
+`;
+export default OrderStatusStyle;

package/dist/modules/order/OrdersList/OrderItem/index.js

@@ -1,10 +1,8 @@
 import React, { memo as Memo } from 'react';
 import { handlePriceCheckFunc, Text } from '@weareconceptstudio/core';
-import { useAccountContext } from '../../../../AccountProvider';
 import { AccountButton } from '../../../../components';
 import OrderStatus from '../../OrderStatus';
-const OrderItem = Memo(({ data }) => {
-    const { currency } = useAccountContext();
+const OrderItem = Memo(({ data, currency }) => {
     return (React.createElement("div", { className: `order-table-item-wrap` },
         React.createElement("div", { className: `col-item od-col-1 nowrap` },
             React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.date })),

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

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Text, useTranslation, useUi, api, handlePriceCheckFunc } from '@weareconceptstudio/core';
+import { useAccountContext } from '../../../AccountProvider';
 //* Components
 import { Pagination, AccountButton } from '../../../components';
 import OrderItem from './OrderItem';
@@ -10,6 +11,7 @@ import OrdersListStyle from './style';
 const OrdersList = () => {
     const { translate } = useTranslation();
     const { winWidth } = useUi();
+    const { currency } = useAccountContext();
     const [loading, setLoading] = useState(true);
     const [data, setData] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
@@ -43,7 +45,7 @@ const OrdersList = () => {
                     React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 nowrap align-right`, text: `totalPrice` })),
                 React.createElement("div", { className: `order-table-title-wrap od-col-6` })),
             React.createElement("div", { className: `order-table-items-wrap` }, data.map((item, index) => {
-                return (React.createElement(OrderItem, { key: index, data: item }));
+                return (React.createElement(OrderItem, { key: index, data: item, currency: currency }));
             })))) : (React.createElement("div", { className: `mobile-orders-wrap` }, data.map((item, index) => {
             return (React.createElement("div", { key: index, className: `mobile-order-item-wrap` },
                 React.createElement("div", { className: `first-col-wrap` },
@@ -63,7 +65,7 @@ const OrdersList = () => {
                             React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: item.itemsCount })),
                         React.createElement("div", { className: `left-item-wrap last` },
                             React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('totalPrice')}:` }),
-                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: handlePriceCheckFunc(item.total, item.currency) }))),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: handlePriceCheckFunc(item.total, currency) }))),
                     React.createElement("div", { className: `right-wrap` },
                         React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history/${item.id}` })))));
         })));

package/dist/modules/payment/AddNewCard/index.d.ts

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