@weareconceptstudio/account 0.3.4 → 0.3.5

package/dist/AccountProvider.js

@@ -18,6 +18,28 @@ export const useAccountContext = () => {
 export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }) => {
     const { addTranslation } = useTranslation();
     const { openPopup } = useUi();
+    const paymentOptions = [
+        {
+            label: 'Cash',
+            value: 'cash_on_delivery',
+        },
+        {
+            label: 'Idram',
+            value: 'idram',
+        },
+        {
+            label: 'POS TERMINAL',
+            value: 'pos_terminal',
+        },
+        {
+            label: 'Telcell',
+            value: 'telcell',
+        },
+        {
+            label: 'Inecopay',
+            value: 'inecopay',
+        },
+    ];
     useEffect(() => {
         addTranslation(translations, 'prepend');
     }, []);
@@ -29,7 +51,7 @@ export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', child
             openPopup(productPopup, { ...product, className: 'popup-product-block' });
         }
     }, [productUrlPrefix, productPopup]);
-    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick } },
+    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick, paymentOptions } },
         React.createElement(CheckoutProvider, null,
             React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
                 React.createElement(ThemeProvider, { theme: theme },

package/dist/components/TotalCheckout/index.js

@@ -30,11 +30,11 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                 event.preventDefault();
             }
         };
-        if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+        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) {
+                    if (!user?.balance && itemsCount && i == 1) {
                         return;
                     }
                     else {
@@ -44,7 +44,7 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
             }
         }
         return () => {
-            if ((!itemsCount || !user.balance) && innerCollapseRef.current) {
+            if ((!itemsCount || !user?.balance) && innerCollapseRef.current) {
                 const inputField = innerCollapseRef.current.querySelectorAll('.base-input');
                 [...inputField].map((item) => {
                     item.removeEventListener('keydown', handleKeyDown);
@@ -71,10 +71,10 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
                     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,
-                user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
+                React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
                     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,
+                        React.createElement(MuramoneyComp, { 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, { 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/modules/checkout/CheckoutTemplate/StepReview/index.js

@@ -3,7 +3,7 @@ import { useUi } from '@weareconceptstudio/core';
 //* Components
 import { SelectAddress } from '../../../address';
 import { SimpleCartItems } from '../../../cart';
-import PaymentComp from '../../../payment/PaymentComp';
+import Payment from '../../../payment/Payment';
 import SelectPaymentMethodPopup from '../../../payment/SelectPaymentMethodPopup';
 const StepReview = ({ items }) => {
     const { openPopup } = useUi();
@@ -12,7 +12,7 @@ const StepReview = ({ items }) => {
     }, []);
     return (React.createElement("div", { className: 'step-review' },
         React.createElement(SelectAddress, null),
-        React.createElement(PaymentComp, { title: 'payment', onClick: handleSelectPopup }),
+        React.createElement(Payment, { title: 'payment', onClick: handleSelectPopup }),
         React.createElement(SimpleCartItems, { data: items, smallFontSize: true, title: 'orderItems', className: `checkout-mt`, additionalParameters: {
                 remove: false,
                 select: false,

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

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

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Text, api } from '@weareconceptstudio/core';
-import { popupCardSVG } from '../PaymentMethodsComp/icons';
+import { popupCardSVG } from '../icons';
 //* Style
 import AddNewCardStyle from './style';
-const AddNewCard = ({ className }) => {
+const AddNewCard = ({ className, isCheckout }) => {
     const addNew = async () => {
-        return await api.post('add-card').then((res) => {
+        return await api.post('add-card', { backUrl: `${window.location.href}${isCheckout ? '?c=paymentMethods' : ''}` }).then((res) => {
             if (res.redirect_url) {
                 window.location.href = res.redirect_url;
             }

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

@@ -1,5 +1,5 @@
-export default CardComp;
-declare function CardComp({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }: {
+export default Card;
+declare function Card({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }: {
     cardOption: any;
     className: any;
     selectedPayment: any;

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

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
-import { mastercardSVG, visaSVG } from '../PaymentMethodsComp/icons';
+import { mastercardSVG, visaSVG } from '../icons';
 //* Components
 import WarningMessageForPopup from '../../../components/WarningMessageForPopup';
 import AccountButton from '../../../components/AccountButton';
 //* Style
-import CardCompStyle from './style';
-const CardComp = ({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }) => {
+import CardStyle from './style';
+const Card = ({ cardOption, className, selectedPayment, setSelectedPayment, deleteCard }) => {
     const { openPopup } = useUi();
     const formatCardNumber = (number) => {
         if (!number)
@@ -20,11 +20,11 @@ const CardComp = ({ cardOption, className, selectedPayment, setSelectedPayment,
             accountIcon: true,
         });
     }, [cardOption.id, deleteCard]);
-    return (React.createElement(CardCompStyle, { className: `card-container ${cardOption.is_expired ? 'expired' : ''} ${className || ''}` },
+    return (React.createElement(CardStyle, { className: `card-container ${cardOption.is_expired ? 'expired' : ''} ${className || ''}` },
         React.createElement("div", { className: `card-wrap-top` },
             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("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === cardOption.id ? '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`, text: cardOption.name }),
@@ -33,4 +33,4 @@ const CardComp = ({ cardOption, className, selectedPayment, setSelectedPayment,
             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;
+export default Card;

package/dist/modules/payment/Card/style.d.ts

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

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-const CardCompStyle = styled.div `
+const CardStyle = styled.div `
 	--account_addCardTextMTop: var(--sp2x);
 	--account_itemBorderRadius: var(--sp1-5x);
 	--account_itemInternalWrapPad: var(--sp4x);
@@ -214,4 +214,4 @@ const CardCompStyle = styled.div `
 		}
 	}
 `;
-export default CardCompStyle;
+export default CardStyle;

package/dist/modules/payment/{PaymentComp → Payment}/index.d.ts

@@ -1,5 +1,5 @@
-export default PaymentComp;
-declare function PaymentComp({ title, onClick, className }: {
+export default Payment;
+declare function Payment({ title, onClick, className }: {
     title: any;
     onClick: any;
     className: any;

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

@@ -3,15 +3,16 @@ import { Text } from '@weareconceptstudio/core';
 import { useCheckoutContext } from '../../checkout';
 //* Components
 import AccountButton from '../../../components/AccountButton';
-import PaymentMethodsComp from '../PaymentMethodsComp';
+import PaymentMethods from '../PaymentMethods';
+import SelectedPayment from '../SelectedPayment';
 //* Style
-import PaymentCompStyle from './style';
-const PaymentComp = ({ title, onClick, className }) => {
+import PaymentStyle from './style';
+const Payment = ({ title, onClick, className }) => {
     const { checkoutData, fillCheckoutData } = useCheckoutContext();
-    return (React.createElement(PaymentCompStyle, { className: `item-container ${className || ''}` },
+    return (React.createElement(PaymentStyle, { 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, setSelectedPayment: (value) => fillCheckoutData('paymentType', value) })));
+        checkoutData.paymentType ? (React.createElement(SelectedPayment, null)) : (React.createElement(PaymentMethods, { selectedPayment: checkoutData.paymentType, setSelectedPayment: (value) => fillCheckoutData('paymentType', value) }))));
 };
-export default PaymentComp;
+export default Payment;

package/dist/modules/payment/Payment/style.d.ts

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

package/dist/modules/payment/{PaymentComp → Payment}/style.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-const PaymentCompStyle = styled.div `
+const PaymentStyle = styled.div `
 	--account_checkoutMTop: var(--sp16x);
 	--account_changePaymentWrapMBot: var(--sp5x);
 
@@ -47,4 +47,4 @@ const PaymentCompStyle = styled.div `
 		--account_changePaymentWrapMBot: var(--sp2x);
 	}
 `;
-export default PaymentCompStyle;
+export default PaymentStyle;

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

@@ -0,0 +1,9 @@
+export default PaymentMethodItem;
+declare function PaymentMethodItem({ item, selectedPayment, setSelectedPayment, singlePayment, isCardType }: {
+    item: any;
+    selectedPayment: any;
+    setSelectedPayment: any;
+    singlePayment: any;
+    isCardType: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text } from '@weareconceptstudio/core';
+import { cardSVG, idramSVG, telcellSVG, cashSVG, posTerminalSVG, inecopaySVG, mastercardSVG, visaSVG } from '../icons';
+import PaymentMethodItemStyle from './style';
+const icons = {
+    card: cardSVG,
+    idram: idramSVG,
+    telcell: telcellSVG,
+    cash_on_delivery: cashSVG,
+    pos_terminal: posTerminalSVG,
+    inecopay: inecopaySVG,
+    'MasterCard': mastercardSVG,
+    'Visa': visaSVG,
+};
+const isNumeric = (value) => !isNaN(value) && !isNaN(parseFloat(value));
+const PaymentMethodItem = ({ item, selectedPayment, setSelectedPayment, singlePayment, isCardType }) => {
+    return (React.createElement(PaymentMethodItemStyle, { "$singlePayment": singlePayment },
+        React.createElement("div", { className: 'payment-option-top' },
+            React.createElement("div", { className: 'payment-item-left' },
+                React.createElement("div", null, icons[item.value]),
+                React.createElement(Text, { className: 'payment-label account-p account-p3 account-font-regular account-primary-color1' }, item.label)),
+            React.createElement("div", { key: item.value, className: `circle-selected-wrap cursor-pointer ${selectedPayment === item.value || (item.value == 'card' && isNumeric(selectedPayment)) || singlePayment ? 'active' : ''}`, onClick: () => !singlePayment && setSelectedPayment(item.value) },
+                React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === item.value || (item.value == 'card' && isNumeric(selectedPayment)) || singlePayment ? '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' })))),
+        isCardType && singlePayment && (React.createElement("div", { className: 'card-details' },
+            React.createElement("span", { className: 'card-number' }, item.card.number),
+            React.createElement("span", { className: 'card-exp-date' },
+                "Exp. Date ",
+                item.card.exp_date)))));
+};
+export default PaymentMethodItem;

package/dist/modules/payment/PaymentMethodItem/style.d.ts

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

package/dist/modules/payment/{PaymentMethodsComp → PaymentMethodItem}/style.js

@@ -1,62 +1,54 @@
 import styled from 'styled-components';
-const PaymentMethodsCompStyle = styled.div `
+const PaymentMethodItemStyle = styled.div `
 	--account_itemBorderRadius: var(--sp1-5x);
 	--account_itemInternalPadTB: var(--sp2x);
 	--account_itemInternalPadLR: var(--sp4x);
-	--account_flexWrapperMTop: var(--sp2x);
 	--account_itemDistance: var(--sp5x);
 	--account_circleSize: var(--sp4x);
 	--account_checkSize: var(--sp2x);
 
-	display: flex;
-	flex-wrap: wrap;
-	row-gap: var(--account_flexWrapperMTop);
-	column-gap: var(--account_itemDistance);
+	width: ${(props) => (props.$singlePayment ? '100%' : 'calc(50% - var(--account_itemDistance) / 2)')};
+	border: 2px solid var(--account_primaryColor5);
+	border-radius: var(--account_itemBorderRadius);
+	padding: var(--account_itemInternalPadTB) var(--account_itemInternalPadLR);
+	padding-left: calc(var(--account_itemInternalPadLR) - 4px);
 
-	.custom-payment-options {
-		width: ${(props) => (props.$singlePayment ? '100%' : 'calc(50% - var(--account_itemDistance) / 2)')};
-		border: 2px solid var(--account_primaryColor5);
-		border-radius: var(--account_itemBorderRadius);
-		padding: var(--account_itemInternalPadTB) var(--account_itemInternalPadLR);
-		padding-left: calc(var(--account_itemInternalPadLR) - 4px);
+	.payment-option-top {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 
-		.payment-option-top {
+		.payment-item-left {
 			display: flex;
-			justify-content: space-between;
+			justify-content: flex-start;
 			align-items: center;
-
-			.payment-item-left {
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				gap: var(--sp1x);
-			}
+			gap: var(--sp1x);
 		}
+	}
 
-		.card-details {
-			display: flex;
-			flex-direction: column;
-			gap: var(--sp1x);
-			margin-top: var(--sp1x);
-			color: var(--account_primaryColor1);
+	.card-details {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp1x);
+		margin-top: var(--sp1x);
+		color: var(--account_primaryColor1);
+		font-size: var(--account_p);
+		line-height: var(--account_lineHeight);
+		font-family: var(--account_Font);
+		font-weight: 400;
+
+		.card-exp-date {
 			font-size: var(--account_p);
-			line-height: var(--account_lineHeight);
-			font-family: var(--account_Font);
-			font-weight: 400;
-
-			.card-exp-date {
-				font-size: var(--account_p);
-			}
-			.card-number {
-				display: inline-flex; /* Align items inline and center vertically */
-				align-items: center;
-			}
-			.card-number .star {
-				display: inline-block;
-				align-self: center; /* Center the * vertically */
-				font-size: inherit; /* Match the font size of the card number */
-				line-height: inherit; /* Match the line height */
-			}
+		}
+		.card-number {
+			display: inline-flex; /* Align items inline and center vertically */
+			align-items: center;
+		}
+		.card-number .star {
+			display: inline-block;
+			align-self: center; /* Center the * vertically */
+			font-size: inherit; /* Match the font size of the card number */
+			line-height: inherit; /* Match the line height */
 		}
 	}
 
@@ -93,7 +85,6 @@ const PaymentMethodsCompStyle = styled.div `
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
 		--account_itemInternalPadTB: var(--sp2x);
 		--account_itemInternalPadLR: var(--sp3x);
-		--account_flexWrapperMTop: var(--sp2x);
 		--account_itemDistance: var(--sp5x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
@@ -102,7 +93,6 @@ const PaymentMethodsCompStyle = styled.div `
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp3x);
-		--account_flexWrapperMTop: var(--sp1-5x);
 		--account_itemDistance: var(--sp4x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
@@ -111,7 +101,6 @@ const PaymentMethodsCompStyle = styled.div `
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp3x);
-		--account_flexWrapperMTop: var(--sp1-5x);
 		--account_itemDistance: var(--sp3x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
@@ -120,7 +109,6 @@ const PaymentMethodsCompStyle = styled.div `
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp2x);
-		--account_flexWrapperMTop: var(--sp1-5x);
 		--account_itemDistance: var(--sp2x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
@@ -129,7 +117,6 @@ const PaymentMethodsCompStyle = styled.div `
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp2x);
-		--account_flexWrapperMTop: var(--sp1-5x);
 		--account_itemDistance: var(--sp3x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
@@ -139,8 +126,6 @@ const PaymentMethodsCompStyle = styled.div `
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp1-5x);
 		--account_itemBorderRadius: var(--sp1x);
-		--account_flexWrapperMTop: var(--sp1-5x);
-		--account_flexWrapperMTop: var(--sp2x);
 		--account_itemDistance: var(--sp2x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
@@ -149,7 +134,6 @@ const PaymentMethodsCompStyle = styled.div `
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp1-5x);
-		--account_flexWrapperMTop: var(--sp1-5x);
 		--account_itemDistance: var(--sp1x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
@@ -159,4 +143,4 @@ const PaymentMethodsCompStyle = styled.div `
 		}
 	}
 `;
-export default PaymentMethodsCompStyle;
+export default PaymentMethodItemStyle;

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+//* Components
+import PaymentMethodItem from '../PaymentMethodItem';
+//* Style
+import PaymentMethodsStyle from './style';
+import { useAccountContext } from '../../../AccountProvider';
+const PaymentMethods = ({ className, selectedPayment, setSelectedPayment }) => {
+    const { paymentOptions } = useAccountContext();
+    return (React.createElement(PaymentMethodsStyle, { className: `payment-item-container ${className || ''}` }, paymentOptions.map((item, index) => (React.createElement(PaymentMethodItem, { item: item, index: index, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })))));
+};
+export default PaymentMethods;

package/dist/modules/payment/PaymentMethods/style.d.ts

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

package/dist/modules/payment/PaymentMethods/style.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+const PaymentMethodsStyle = styled.div `
+	--account_flexWrapperMTop: var(--sp2x);
+	--account_itemDistance: var(--sp5x);
+
+	display: flex;
+	flex-wrap: wrap;
+	row-gap: var(--account_flexWrapperMTop);
+	column-gap: var(--account_itemDistance);
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_flexWrapperMTop: var(--sp2x);
+		--account_itemDistance: 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_flexWrapperMTop: var(--sp1-5x);
+		--account_itemDistance: 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_flexWrapperMTop: var(--sp1-5x);
+		--account_itemDistance: 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_flexWrapperMTop: var(--sp1-5x);
+		--account_itemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_flexWrapperMTop: var(--sp1-5x);
+		--account_itemDistance: 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_flexWrapperMTop: var(--sp2x);
+		--account_itemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_flexWrapperMTop: var(--sp1-5x);
+		--account_itemDistance: var(--sp1x);
+	}
+`;
+export default PaymentMethodsStyle;

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

@@ -1,21 +1,30 @@
 'use client';
-import React, { useState } from 'react';
-import { api, Text } from '@weareconceptstudio/core';
+import React, { useState, useCallback } from 'react';
+import { api, Text, useUi } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../../AccountProvider';
 import { useCheckoutContext } from '../../checkout';
 //* Components
-import { AccountButton } from '../../../components';
+import { AccountButton, WarningMessageForPopup } from '../../../components';
 import PaymentWrap from '../PaymentWrap';
 //* Style
 import PaymentStyle from './style';
 const PaymentMethodsTemplate = () => {
+    const { openPopup } = useUi();
     const { useUser } = useAccountContext();
     const { user } = useUser();
     const { fillCheckoutData } = useCheckoutContext();
     const [selectedPayment, setSelectedPayment] = useState(user.default_payment_method);
+    //! Handle Popup
+    const handleSuccessPopup = useCallback(() => {
+        openPopup(React.createElement(WarningMessageForPopup, { title: 'yourSettingsHaveBeenSaved', description: 'yourSettingsHaveBeenSaved' }), {
+            className: 'messagePopup',
+            accountIcon: true,
+        });
+    }, []);
     const handlePaymentMethodChangeSubmit = async () => {
         await api.post('update-payment-method', { payment_method: selectedPayment }).then(() => {
             fillCheckoutData('paymentType', selectedPayment);
+            handleSuccessPopup();
         });
     };
     return (React.createElement(PaymentStyle, null,

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

@@ -1,6 +1,7 @@
 export default PaymentWrap;
-declare function PaymentWrap({ selectedPayment, setSelectedPayment }: {
+declare function PaymentWrap({ selectedPayment, setSelectedPayment, isCheckout }: {
     selectedPayment: any;
     setSelectedPayment: any;
+    isCheckout?: boolean;
 }): React.JSX.Element;
 import React from 'react';

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

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
+import { api } from '@weareconceptstudio/core';
 //* Components
-import PaymentMethodsComp from '../PaymentMethodsComp';
 import AddNewCard from '../AddNewCard';
-import CardComp from '../CardComp';
+import Card from '../Card';
+import PaymentMethods from '../PaymentMethods';
 //* Style
 import PaymentWrapStyle from './style';
 import { useAccountContext } from '../../../AccountProvider';
-import { api } from '@weareconceptstudio/core';
-const PaymentWrap = ({ selectedPayment, setSelectedPayment }) => {
+const PaymentWrap = ({ selectedPayment, setSelectedPayment, isCheckout = false }) => {
     const { useUser } = useAccountContext();
     const { user } = useUser();
     const [cards, setCards] = useState(user.cards);
@@ -18,9 +18,9 @@ const PaymentWrap = ({ selectedPayment, setSelectedPayment }) => {
     };
     return (React.createElement(PaymentWrapStyle, null,
         React.createElement("div", { className: `flex-wrapper` },
-            React.createElement(AddNewCard, null),
-            cards?.map((card, index) => (React.createElement(CardComp, { key: index, cardOption: card, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment, deleteCard: deleteCard })))),
+            React.createElement(AddNewCard, { isCheckout: isCheckout }),
+            cards?.map((card, index) => (React.createElement(Card, { key: index, cardOption: card, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment, deleteCard: deleteCard })))),
         React.createElement("div", { className: 'line' }),
-        React.createElement(PaymentMethodsComp, { showAll: true, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })));
+        React.createElement(PaymentMethods, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })));
 };
 export default PaymentWrap;

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

@@ -17,7 +17,7 @@ const SelectPaymentMethodPopup = () => {
     return (React.createElement(SelectPaymentMethodPopupStyle, null,
         React.createElement("div", { className: `select-payment-wrap` },
             React.createElement(Text, { tag: `h6`, className: 'account-p account-p2 account-font-bold account-primary-color1', text: 'selectPaymentMethod' })),
-        React.createElement(PaymentWrap, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment }),
+        React.createElement(PaymentWrap, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment, isCheckout: true }),
         React.createElement("div", { className: `cancel-and-save-wrap` },
             React.createElement(AccountButton, { btnType: `green-large-text`, text: `cancel`, onClick: closePopup }),
             React.createElement(AccountButton, { btnType: `full-width`, text: `saveAndApply`, onClick: handlePaymentMethodChangeSubmit }))));

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

@@ -0,0 +1,3 @@
+export default SelectedPayment;
+declare function SelectedPayment(): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import PaymentMethodItem from '../PaymentMethodItem';
+import { useAccountContext } from '../../../AccountProvider';
+import { useCheckoutContext } from '../../checkout';
+const isNumeric = (value) => !isNaN(value) && !isNaN(parseFloat(value));
+// if (cardDetails && !showAll) {
+//     filteredOptions = filteredOptions.map((option) =>
+//         option.value === 'credit_card'
+//             ? {
+//                     ...option,
+//                     label: <span className='card-type'>{cardDetails.card_type}</span>,
+//                 }
+//             : option
+//     );
+// }
+// const cardDetails = isNumeric(checkoutData.paymentType)
+// 	? {
+// 			card_type: 'MasterCard', // Or 'Visa', based on your logic
+// 			number: '**** **** **** 1234',
+// 			expDate: '12/24',
+// 		}
+// 	: null;
+const SelectedPayment = () => {
+    const { paymentOptions, useUser } = useAccountContext();
+    const { checkoutData } = useCheckoutContext();
+    const { user } = useUser();
+    const isCardType = useMemo(() => {
+        return isNumeric(checkoutData.paymentType);
+    }, [checkoutData.paymentType]);
+    const selectedItem = useMemo(() => {
+        if (isCardType) {
+            const selectedCard = user.cards.find((item) => item.id == checkoutData.paymentType);
+            return {
+                label: selectedCard.name,
+                value: selectedCard.brand,
+                card: selectedCard,
+            };
+        }
+        else {
+            return paymentOptions.find((item) => item.value == checkoutData.paymentType);
+        }
+    }, [isCardType, checkoutData.paymentType]);
+    return (React.createElement(PaymentMethodItem, { singlePayment: true, isCardType: isCardType, item: selectedItem }));
+};
+export default SelectedPayment;

package/package.json

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

package/dist/modules/payment/CardComp/style.d.ts

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

package/dist/modules/payment/PaymentComp/style.d.ts

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

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

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

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

@@ -1,86 +0,0 @@
-import React from 'react';
-import { Text } from '@weareconceptstudio/core';
-import { cardSVG, idramSVG, telcellSVG, cashSVG, posTerminalSVG, inecopaySVG } from './icons';
-import { useCheckoutContext } from '../../checkout';
-//* Style
-import PaymentMethodsCompStyle from './style';
-const isNumeric = (value) => !isNaN(value) && !isNaN(parseFloat(value));
-const PaymentMethodsComp = ({ className, showAll, selectedPayment, setSelectedPayment }) => {
-    let paymentOptions = [
-        {
-            label: 'Cash',
-            value: 'cash_on_delivery',
-            svg: cashSVG,
-        },
-        {
-            label: 'Idram',
-            value: 'idram',
-            svg: idramSVG,
-        },
-        {
-            label: 'POS TERMINAL',
-            value: 'pos_terminal',
-            svg: posTerminalSVG,
-        },
-        {
-            label: 'Telcell',
-            value: 'telcell',
-            svg: telcellSVG,
-        },
-        {
-            label: 'Inecopay',
-            value: 'inecopay',
-            svg: inecopaySVG,
-        },
-    ];
-    if (!showAll) {
-        paymentOptions = [
-            {
-                label: 'Card',
-                value: 'credit_card',
-                svg: cardSVG,
-            },
-            ...paymentOptions,
-        ];
-    }
-    const { checkoutData } = useCheckoutContext();
-    const cardDetails = isNumeric(checkoutData.paymentType)
-        ? {
-            card_type: 'MasterCard', // Or 'Visa', based on your logic
-            number: '**** **** **** 1234',
-            expDate: '12/24',
-        }
-        : null;
-    let filteredOptions;
-    if (showAll) {
-        filteredOptions = paymentOptions;
-    }
-    else if (checkoutData.paymentType) {
-        filteredOptions = paymentOptions.filter((option) => option.value === (isNumeric(checkoutData.paymentType) ? 'credit_card' : checkoutData.paymentType));
-    }
-    else {
-        filteredOptions = paymentOptions;
-    }
-    if (cardDetails && !showAll) {
-        filteredOptions = filteredOptions.map((option) => option.value === 'credit_card'
-            ? {
-                ...option,
-                label: React.createElement("span", { className: 'card-type' }, cardDetails.card_type),
-            }
-            : option);
-    }
-    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 || (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' },
-            React.createElement("span", { className: 'card-number' }, cardDetails.number),
-            React.createElement("span", { className: 'card-exp-date' },
-                "Exp. Date ",
-                cardDetails.expDate))))))));
-};
-export default PaymentMethodsComp;

package/dist/modules/payment/PaymentMethodsComp/style.d.ts

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