@weareconceptstudio/account 0.3.2 → 0.3.3

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

@@ -0,0 +1,2 @@
+export default Loader;
+declare function Loader(): import("react").JSX.Element;

package/dist/components/Loader/index.js

@@ -0,0 +1,7 @@
+//* Styles
+import LoaderStyle from './style';
+//* Component
+const Loader = () => {
+    return React.createElement(LoaderStyle, null);
+};
+export default Loader;

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

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

package/dist/components/Loader/style.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+const LoaderStyle = styled.div ``;
+export default LoaderStyle;

package/dist/components/TotalCheckout/MuramoneyComp/index.d.ts

@@ -1,9 +1,10 @@
 export default MuramoneyComp;
-declare function MuramoneyComp({ isMuramoney, currency, balance, useBalance, balanceHandler }: {
+declare function MuramoneyComp({ isMuramoney, currency, balance, useBalance, balanceHandler, getItemCount }: {
     isMuramoney?: boolean;
     currency: any;
     balance: any;
     useBalance: any;
     balanceHandler: any;
+    getItemCount: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -5,7 +5,7 @@ import AccountButton from '../../AccountButton';
 import { balanceFields } from './utils';
 //* Style
 import MuramoneyCompStyle from './style';
-const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, balanceHandler }) => {
+const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, balanceHandler, getItemCount }) => {
     const { translate } = useTranslation();
     //! States
     const [disable, setDisable] = useState(false);
@@ -14,7 +14,7 @@ const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, bala
         setDisable(true);
         balanceHandler(values.balance);
     };
-    return isMuramoney ? (React.createElement(MuramoneyCompStyle, { className: 'collapse-distance' },
+    return isMuramoney ? (React.createElement(MuramoneyCompStyle, { className: `collapse-distance ${getItemCount && balance ? ' ' : 'disable'}` },
         React.createElement(CollapseItem, { disable: disable, 
             // status={'open'}
             title: React.createElement(React.Fragment, null,

package/dist/components/TotalCheckout/MuramoneyComp/utils.d.ts

@@ -6,5 +6,6 @@ export declare const balanceFields: {
     };
     fieldProps: {
         placeholder: string;
+        type: string;
     };
 }[];

package/dist/components/TotalCheckout/MuramoneyComp/utils.js

@@ -9,6 +9,7 @@ export const balanceFields = [
         },
         fieldProps: {
             placeholder: 'balancePlaceholder',
+            type: 'number',
         },
     },
 ];

package/dist/components/TotalCheckout/PromoCodeComp/index.d.ts

@@ -1,6 +1,7 @@
 export default PromoCodeComp;
-declare function PromoCodeComp({ isPromoCode, promo_code }: {
+declare function PromoCodeComp({ isPromoCode, promo_code, getItemCount }: {
     isPromoCode?: boolean;
     promo_code: any;
+    getItemCount: any;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -5,7 +5,7 @@ import AccountButton from '../../AccountButton';
 import { promoCodeFields } from './utils';
 //* Style
 import PromoCodeCompStyle from './style';
-const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
+const PromoCodeComp = ({ isPromoCode = true, promo_code, getItemCount }) => {
     //! States
     const [couponCode, setCouponCode] = useState(false);
     const [disable, setDisable] = useState(false);
@@ -14,7 +14,7 @@ const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
         setCouponCode(true);
         setDisable(true);
     };
-    return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: 'collapse-distance' },
+    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

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
 import { Text, CollapseContainer, handlePriceCheckFunc, numToLocalString } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
 import { useAddressContext, useCheckoutContext } from '../../modules';
@@ -11,7 +11,7 @@ import CommentComp from './CommentComp';
 import TotalCheckoutStyle from './style';
 //* Skeleton
 import SkeletonTotalCheckout from './Skeleton';
-// TODO: Muramoney & Promo code
+// TODO: Promo code
 const promo_code = '10% of first order';
 const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, isCheckout = false }) => {
     const { currency, useCart, useUser } = useAccountContext();
@@ -22,6 +22,36 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
     const handleBalance = (amount) => {
         fillCart('useBalance', amount);
     };
+    const innerCollapseRef = useRef(null);
+    //! disable keypress on input
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+            }
+        };
+        if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+            let inputField = innerCollapseRef.current.querySelectorAll('.base-input');
+            if (inputField.length) {
+                [...inputField].forEach((item, i) => {
+                    if (!user.balance && itemsCount && i == 1) {
+                        return;
+                    }
+                    else {
+                        item.addEventListener('keydown', handleKeyDown);
+                    }
+                });
+            }
+        }
+        return () => {
+            if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+                const inputField = innerCollapseRef.current.querySelectorAll('.base-input');
+                [...inputField].map((item) => {
+                    item.removeEventListener('keydown', handleKeyDown);
+                });
+            }
+        };
+    });
     return (React.createElement(TotalCheckoutStyle, null,
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),
@@ -42,8 +72,9 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                     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,
                 user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
-                    React.createElement(MuramoneyComp, { balance: user.balance, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
-                    React.createElement(PromoCodeComp, { promo_code: promo_code }))) : null,
+                    React.createElement("div", { ref: innerCollapseRef },
+                        React.createElement(MuramoneyComp, { getItemCount: itemsCount, balance: user.balance, currency: currency, balanceHandler: handleBalance, useBalance: useBalance }),
+                        React.createElement(PromoCodeComp, { getItemCount: itemsCount, promo_code: promo_code })))) : null,
                 isCheckout && typeof isShipping === 'boolean' && !isShipping ? React.createElement(CommentComp, { fillCheckoutData: fillCheckoutData }) : null,
                 React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, className: `sticky-wrap-btn`, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick() }))) : (React.createElement(SkeletonTotalCheckout, null))))));
 });

package/dist/components/TotalCheckout/style.js

@@ -172,6 +172,16 @@ const TotalCheckoutStyle = styled.section `
 	.collapse-distance {
 		margin-top: var(--account_collapseSmallDistance);
 		padding-top: var(--account_collapseSmallDistance);
+
+		&.disable {
+			#collapse-description {
+				button {
+					pointer-events: none;
+					border-color: var(--account_primaryColor5);
+					color: var(--account_primaryColor5);
+				}
+			}
+		}
 	}
 
 	.muramoney-container,

package/dist/modules/account/AccountBalanceTemplate/HistoryBalance/ItemHistory/index.js

@@ -1,9 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 import { Text, useTranslation } from '@weareconceptstudio/core';
+import { useAccountContext } from '../../../../../AccountProvider';
 //* Styles
 import ItemHistoryStyle from './style';
 const ItemHistory = ({ date, activity, value, action_type }) => {
     const { translate } = useTranslation();
+    const { useCart } = useAccountContext();
+    const { currency } = useCart();
     //! Refs
     const titleWrapperRef = useRef();
     const getSizeItem = useRef();
@@ -36,7 +39,9 @@ const ItemHistory = ({ date, activity, value, action_type }) => {
             React.createElement(Text, { className: `account-primary-color1 account-font-medium account-p account-p1 amount-info-text ${action_type}` },
                 React.createElement(Text, { className: 'account-primary-color1 account-font-medium account-p1 mobile-amount-info-text first-letter', tag: 'span' }, translate('balanceCategoryAmount')),
                 ' ',
-                value)),
+                value,
+                " ",
+                currency)),
         React.createElement("div", { className: 'line-info' })));
 };
 export default ItemHistory;

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

@@ -28,6 +28,11 @@ const AddressFormStyle = styled.div `
 					--account_antFormItemWidth: 100%;
 				}
 			}
+
+			.empty-form-item {
+				width: var(--account_antFormItemWidth);
+				padding: 0 calc(var(--account_formItemDistance) / 2);
+			}
 		}
 
 		.default-info-wrap {

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

@@ -24,6 +24,11 @@ const ShippingBillingFormStyle = styled.div `
 				--account_antFormItemWidth: 100%;
 			}
 		}
+
+		.empty-form-item {
+			width: var(--account_antFormItemWidth);
+			padding: 0 calc(var(--account_formItemDistance) / 2);
+		}
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {

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

@@ -11,9 +11,6 @@ const ShippingBillingInfo = memo(({ className, shipping_address, billing_address
         React.createElement("div", { className: `info-space-line` }),
         React.createElement("div", { className: `info-wrap shipped` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 value`, text: `shippedTo` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.first_name} ${shipping_address.last_name}` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.address_1}, ${shipping_address.address_2 ? shipping_address.address_2 + ',' : ''}` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: `${shipping_address.city}` }),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 phone`, text: `${shipping_address.phone}` }))));
+            shipping_address.map((item) => (React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: item }))))));
 });
 export default ShippingBillingInfo;

package/dist/modules/checkout/CheckoutProvider.js

@@ -8,13 +8,14 @@ export const useCheckoutContext = () => {
 };
 export const CheckoutProvider = ({ children }) => {
     const { selectedLang } = useTranslation();
-    const { useCart } = useAccountContext();
+    const { useCart, useUser } = useAccountContext();
     const { getCart } = useCart();
+    const { user } = useUser();
     const [checkoutData, setCheckoutData] = useState({
         addressId: null,
         useBalance: null,
         note: '',
-        paymentType: 'cash_on_delivery',
+        paymentType: user.default_payment_method,
     });
     const form = useRef();
     const [idramForm, setIdramForm] = useState();

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

@@ -1,9 +1,10 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useUi } from '@weareconceptstudio/core';
+//* Components
 import { SelectAddress } from '../../../address';
 import { SimpleCartItems } from '../../../cart';
-import PaymentComp from '../../../../components/TotalCheckout/PaymentComp';
-import SelectPaymentMethodPopup from '../../../../components/TotalCheckout/SelectPaymentMethodPopup';
+import PaymentComp from '../../../payment/PaymentComp';
+import SelectPaymentMethodPopup from '../../../payment/SelectPaymentMethodPopup';
 const StepReview = ({ items }) => {
     const { openPopup } = useUi();
     const handleSelectPopup = useCallback(() => {

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

@@ -3,7 +3,7 @@ import { handlePriceCheckFunc, numToLocalString, Text, useTranslation } from '@w
 import { useAccountContext } from '../../../AccountProvider';
 import OrderDetailsStyle from './style';
 import OrderStatus from '../OrderStatus';
-const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, total, shippingCost }) => {
+const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, total, shippingCost, usedBalance }) => {
     const { translate } = useTranslation();
     const { currency } = useAccountContext();
     return (React.createElement(OrderDetailsStyle, { className: `${className || ''}` },
@@ -34,6 +34,11 @@ const OrderDetails = memo(({ className, status, date, orderNumber, itemsCount, t
                 translate('shippingCost'),
                 ":"),
             React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: `${shippingCost == 0 ? 'free' : handlePriceCheckFunc(shippingCost, currency)}` })),
+        usedBalance ? (React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('usedBalance'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(usedBalance, currency)))) : null,
         React.createElement("div", { className: `order-detail-item-wrap` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('totalPrice'),

package/dist/{components/TotalCheckout → modules/payment}/AddNewCard/index.d.ts

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

package/dist/{components/TotalCheckout → modules/payment}/AddNewCard/index.js

@@ -3,7 +3,7 @@ import { Text, api } from '@weareconceptstudio/core';
 import { popupCardSVG } from '../PaymentMethodsComp/icons';
 //* Style
 import AddNewCardStyle from './style';
-const AddNewCard = ({ title, className }) => {
+const AddNewCard = ({ className }) => {
     const addNew = async () => {
         return await api.post('add-card').then((res) => {
             if (res.redirect_url) {
@@ -14,6 +14,6 @@ const AddNewCard = ({ title, className }) => {
     return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}`, onClick: addNew },
         React.createElement("div", { className: `new-card-wrap` },
             React.createElement("div", { className: 'account-card-add-icon' }, popupCardSVG),
-            React.createElement(Text, { className: `account-add-card-text account-p account-p3 account-font-medium account-primary-color1`, text: title }))));
+            React.createElement(Text, { className: `account-add-card-text account-p account-p3 account-font-medium account-primary-color1`, text: 'addNewCard' }))));
 };
 export default AddNewCard;

package/dist/{components/TotalCheckout → modules/payment}/CardComp/index.d.ts

@@ -1,8 +1,9 @@
 export default CardComp;
-declare function CardComp({ cardOption, className, selectedPayment, onSelect }: {
+declare function CardComp({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }: {
     cardOption: any;
     className: any;
     selectedPayment: any;
-    onSelect: any;
+    setSelectedPayment: any;
+    deleteCard: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/{components/TotalCheckout → modules/payment}/CardComp/index.js

@@ -1,40 +1,36 @@
 import React, { useCallback } from 'react';
-import { Text, Image, useUi } from '@weareconceptstudio/core';
-import WarningMessageForPopup from '../../WarningMessageForPopup';
-import AccountButton from '../../AccountButton';
+import { Text, useUi } from '@weareconceptstudio/core';
 import { mastercardSVG, visaSVG } from '../PaymentMethodsComp/icons';
+//* Components
+import WarningMessageForPopup from '../../../components/WarningMessageForPopup';
+import AccountButton from '../../../components/AccountButton';
 //* Style
 import CardCompStyle from './style';
-const CardComp = ({ cardOption, className, selectedPayment, onSelect }) => {
-    const expired = cardOption.expired;
+const CardComp = ({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }) => {
     const { openPopup } = useUi();
     const formatCardNumber = (number) => {
         if (!number)
             return '';
         return number.replace(/(.{4})/g, '$1 ').trim();
     };
-    const handleDelete = () => {
-        console.log('test', cardOption.id);
-    };
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
-        openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteCardMessage', description: 'confirmDeleteCard', onRemove: handleDelete }), {
+        openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteCardMessage', description: 'confirmDeleteCard', onRemove: () => deleteCard(cardOption.id) }), {
             className: 'messagePopup',
             accountIcon: true,
         });
-    }, [cardOption.id]);
-    return (React.createElement(CardCompStyle, { className: `card-container ${cardOption.expired ? 'expired' : ''} ${className || ''}` },
+    }, [cardOption.id, deleteCard]);
+    return (React.createElement(CardCompStyle, { className: `card-container ${cardOption.is_expired ? 'expired' : ''} ${className || ''}` },
         React.createElement("div", { className: `card-wrap-top` },
-            React.createElement("div", { className: 'card-svg' }, cardOption && cardOption.card_type === 'MasterCard' ? React.createElement("div", null, mastercardSVG) : React.createElement("div", null, visaSVG)),
-            !expired ? (React.createElement("div", { key: cardOption.number, className: `circle-selected-wrap cursor-pointer ${selectedPayment === cardOption.number ? 'active' : ''}`, onClick: () => onSelect(cardOption.number) },
+            React.createElement("div", { className: 'card-svg' }, cardOption && cardOption.brand === 'MasterCard' ? React.createElement("div", null, mastercardSVG) : React.createElement("div", null, visaSVG)),
+            !cardOption.is_expired ? (React.createElement("div", { key: cardOption.number, className: `circle-selected-wrap cursor-pointer ${selectedPayment == cardOption.id ? 'active' : ''}`, onClick: () => setSelectedPayment(cardOption.id) },
                 React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === cardOption.number ? 'selected' : 'note-selected'}` },
                     React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' })))) : null),
         React.createElement("div", { className: `card-wrap-center` },
-            React.createElement(Text, { className: `card-full-name account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: cardOption.name }),
-            React.createElement(Text, { className: `card-number
-						account-p account-p1 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: formatCardNumber(cardOption.number) })),
+            React.createElement(Text, { className: `card-full-name account-p account-p3 account-font-regular`, text: cardOption.name }),
+            React.createElement(Text, { className: `card-number account-p account-p1 account-font-regular`, text: formatCardNumber(cardOption.number) })),
         React.createElement("div", { className: `card-wrap-bottom` },
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: expired ? 'cardExpired' : `Exp. Date ${cardOption.exp_date}` }),
-            React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `account-card-remove-btn account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}` }))));
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular`, text: cardOption.is_expired ? 'cardExpired' : `Exp. Date ${cardOption.exp_date}` }),
+            React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `account-card-remove-btn account-p account-p3 account-font-regular` }))));
 };
 export default CardComp;

package/dist/{components/TotalCheckout → modules/payment}/CardComp/style.js

@@ -17,12 +17,6 @@ const CardCompStyle = styled.div `
 	flex-direction: column;
 	justify-content: space-between;
 
-	&.expired {
-		background: #fff4f8;
-		border: 2px solid var(--account_primaryColor3);
-		width: calc(50% - (var(--account_itemDistance) / 2) - 2px);
-	}
-
 	.card-wrap-top,
 	.card-wrap-bottom {
 		display: flex;
@@ -35,6 +29,13 @@ const CardCompStyle = styled.div `
 		gap: 22px;
 	}
 
+	.card-full-name,
+	.card-number,
+	.account-card-remove-btn > button,
+	.card-wrap-bottom > p {
+		color: var(--account_backgroundColor);
+	}
+
 	.card-svg {
 		background-color: var(--account_backgroundColor);
 		border-radius: 4px;
@@ -109,6 +110,19 @@ const CardCompStyle = styled.div `
 		color: var(--account_backgroundColor) !important;
 	}
 
+	&.expired {
+		background: #fff4f8;
+		border: 2px solid var(--account_primaryColor3);
+		width: calc(50% - (var(--account_itemDistance) / 2) - 2px);
+
+		.card-full-name,
+		.card-number,
+		.account-card-remove-btn > button,
+		.card-wrap-bottom > p {
+			color: var(--account_primaryColor3);
+		}
+	}
+
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_addCardTextMTop: var(--sp2x);
 		--account_itemInternalWrapPad: var(--sp3x);

package/dist/{components/TotalCheckout → modules/payment}/PaymentComp/index.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import { Text } from '@weareconceptstudio/core';
-import AccountButton from '../../AccountButton';
+import { useCheckoutContext } from '../../checkout';
+//* Components
+import AccountButton from '../../../components/AccountButton';
 import PaymentMethodsComp from '../PaymentMethodsComp';
 //* Style
 import PaymentCompStyle from './style';
-import { useCheckoutContext } from '../../../modules';
 const PaymentComp = ({ title, onClick, className }) => {
     const { checkoutData, fillCheckoutData } = useCheckoutContext();
     return (React.createElement(PaymentCompStyle, { className: `item-container ${className || ''}` },
         React.createElement("div", { className: `change-payment-wrap` },
             React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: title }),
             checkoutData.paymentType && (React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
-        React.createElement(PaymentMethodsComp, { showAll: false, selectedPayment: checkoutData.paymentType, selectPayment: (value) => fillCheckoutData('paymentType', value) })));
+        React.createElement(PaymentMethodsComp, { showAll: false, selectedPayment: checkoutData.paymentType, setSelectedPayment: (value) => fillCheckoutData('paymentType', value) })));
 };
 export default PaymentComp;

package/dist/{components/TotalCheckout → modules/payment}/PaymentMethodsComp/index.d.ts

@@ -1,8 +1,8 @@
 export default PaymentMethodsComp;
-declare function PaymentMethodsComp({ className, showAll, selectedPayment, selectPayment }: {
+declare function PaymentMethodsComp({ className, showAll, selectedPayment, setSelectedPayment }: {
     className: any;
     showAll: any;
     selectedPayment: any;
-    selectPayment: any;
+    setSelectedPayment: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/{components/TotalCheckout → modules/payment}/PaymentMethodsComp/index.js

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Text } from '@weareconceptstudio/core';
-import { cardSVG, idramSVG, telcellSVG, cashSVG, posTerminalSVG, inecopaySVG } from '../PaymentMethodsComp/icons';
-import { useCheckoutContext } from '../../../modules';
+import { cardSVG, idramSVG, telcellSVG, cashSVG, posTerminalSVG, inecopaySVG } from './icons';
+import { useCheckoutContext } from '../../checkout';
 //* Style
 import PaymentMethodsCompStyle from './style';
-const PaymentMethodsComp = ({ className, showAll, selectedPayment, selectPayment }) => {
+const isNumeric = (value) => !isNaN(value) && !isNaN(parseFloat(value));
+const PaymentMethodsComp = ({ className, showAll, selectedPayment, setSelectedPayment }) => {
     let paymentOptions = [
         {
             label: 'Cash',
@@ -43,7 +44,7 @@ const PaymentMethodsComp = ({ className, showAll, selectedPayment, selectPayment
         ];
     }
     const { checkoutData } = useCheckoutContext();
-    const cardDetails = checkoutData.paymentType === 'credit_card'
+    const cardDetails = isNumeric(checkoutData.paymentType)
         ? {
             card_type: 'MasterCard', // Or 'Visa', based on your logic
             number: '**** **** **** 1234',
@@ -55,7 +56,7 @@ const PaymentMethodsComp = ({ className, showAll, selectedPayment, selectPayment
         filteredOptions = paymentOptions;
     }
     else if (checkoutData.paymentType) {
-        filteredOptions = paymentOptions.filter((option) => option.value === checkoutData.paymentType);
+        filteredOptions = paymentOptions.filter((option) => option.value === (isNumeric(checkoutData.paymentType) ? 'credit_card' : checkoutData.paymentType));
     }
     else {
         filteredOptions = paymentOptions;
@@ -68,15 +69,12 @@ const PaymentMethodsComp = ({ className, showAll, selectedPayment, selectPayment
             }
             : option);
     }
-    const handleSelect = (value) => {
-        selectPayment(value);
-    };
     return (React.createElement(PaymentMethodsCompStyle, { className: `payment-item-container ${className || ''}`, "$singlePayment": !!checkoutData.paymentType }, filteredOptions.map((option, index) => (React.createElement("div", { className: 'custom-payment-options', key: index },
         React.createElement("div", { className: 'payment-option-top' },
             React.createElement("div", { className: 'payment-item-left' },
                 React.createElement("div", null, option.svg),
                 React.createElement(Text, { className: 'payment-label account-p account-p3 account-font-regular account-primary-color1' }, option.label)),
-            React.createElement("div", { key: option.value, className: `circle-selected-wrap cursor-pointer ${selectedPayment === option.value ? 'active' : ''}`, onClick: () => handleSelect(option.value) },
+            React.createElement("div", { key: option.value, className: `circle-selected-wrap cursor-pointer ${selectedPayment === option.value || (option.value == 'credit_card' && isNumeric(selectedPayment)) ? 'active' : ''}`, onClick: () => showAll && setSelectedPayment(option.value) },
                 React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === option.value ? 'selected' : 'note-selected'}` },
                     React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' })))),
         option.value === 'credit_card' && cardDetails && !showAll && (React.createElement("div", { className: 'card-details' },

package/dist/modules/payment/PaymentMethodsTemplate/index.js

@@ -1,32 +1,28 @@
 'use client';
 import React, { useState } from 'react';
-import { Text } from '@weareconceptstudio/core';
-import PaymentStyle from './style';
-import AddNewCard from '../../../components/TotalCheckout/AddNewCard';
-import CardComp from '../../../components/TotalCheckout/CardComp';
-import PaymentMethodsComp from '../../../components/TotalCheckout/PaymentMethodsComp';
+import { api, Text } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../../AccountProvider';
+import { useCheckoutContext } from '../../checkout';
+//* Components
+import { AccountButton } from '../../../components';
+import PaymentWrap from '../PaymentWrap';
+//* Style
+import PaymentStyle from './style';
 const PaymentMethodsTemplate = () => {
-    const [selectedCard, setSelectedCard] = useState('');
     const { useUser } = useAccountContext();
     const { user } = useUser();
-    const [checkoutData, setCheckoutData] = useState({
-        note: '',
-        paymentType: '',
-    });
-    const fillCheckoutData = (key, value) => {
-        setCheckoutData((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
+    const { fillCheckoutData } = useCheckoutContext();
+    const [selectedPayment, setSelectedPayment] = useState(user.default_payment_method);
+    const handlePaymentMethodChangeSubmit = async () => {
+        await api.post('update-payment-method', { payment_method: selectedPayment }).then(() => {
+            fillCheckoutData('paymentType', selectedPayment);
+        });
     };
     return (React.createElement(PaymentStyle, null,
         React.createElement("div", { className: 'account-payment-block' },
             React.createElement(Text, { tag: `h6`, className: `account-font-medium account-primary-color1 title`, text: `myCards` }),
-            React.createElement("div", { className: `flex-wrapper` },
-                React.createElement(AddNewCard, { title: 'addNewCard' }),
-                user?.cards?.map((card, index) => (React.createElement(CardComp, { key: index, cardOption: card, selectedPayment: selectedCard, onSelect: setSelectedCard })))),
-            React.createElement("div", { className: 'line' }),
-            React.createElement(PaymentMethodsComp, { checkoutData: checkoutData, fillCheckoutData: fillCheckoutData, showAll: true }))));
+            React.createElement(PaymentWrap, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment }),
+            React.createElement("div", { className: 'account-payment-btn-wrapper' },
+                React.createElement(AccountButton, { btnType: `full-width`, text: `saveAndApply`, onClick: handlePaymentMethodChangeSubmit })))));
 };
 export default PaymentMethodsTemplate;