@weareconceptstudio/account 0.3.4 → 0.3.6

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

@@ -90,6 +90,7 @@ const AccountStyle = styled.section `
 			width: var(--account_rightBarWidth);
 			padding: 0 calc(var(--account_colDistance) / 2);
 			margin-top: var(--account_stickyMarTop);
+			position: relative;
 
 			.max-width-wrap {
 				width: 100%;
@@ -239,6 +240,20 @@ const AccountStyle = styled.section `
 				padding: 0 var(--account_contPaddingLR);
 			}
 
+			.right-bar {
+				height: 100vh;
+				animation: heightMobile 1s ease-out 1.8s forwards;
+
+				@keyframes heightMobile {
+					0% {
+						height: 100vh;
+					}
+					100% {
+						height: auto;
+					}
+				}
+			}
+
 			.space-line {
 				width: 100%;
 				border-bottom: 1px solid var(--account_primaryColor5);
@@ -277,6 +292,20 @@ const AccountStyle = styled.section `
 				padding: 0 var(--account_contPaddingLR);
 			}
 
+			.right-bar {
+				height: 150vh;
+				animation: heightMobile 1s ease-out 1.8s forwards;
+
+				@keyframes heightMobile {
+					0% {
+						height: 100vh;
+					}
+					100% {
+						height: auto;
+					}
+				}
+			}
+
 			.space-line {
 				width: 100%;
 				border-bottom: 1px solid var(--account_primaryColor5);

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/checkout/CheckoutTemplate/index.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { api, Page } from '@weareconceptstudio/core';
+import React, { useCallback, useRef, useState } from 'react';
+import { Page } from '@weareconceptstudio/core';
 import { Sequence, TotalCheckout } from '../../../components';
 import { useAddressContext } from '../../address';
 import { useAccountContext } from '../../../AccountProvider';
@@ -26,8 +26,19 @@ const CheckoutTemplate = () => {
     const handleCheckoutFirstStep = () => {
         firstStepFormRef.current.submit();
     };
+    const [loadingProcessToPayment, setLoadingProcessToPayment] = useState(false);
     const handleCheckoutBtn = useCallback(() => {
-        checkStep.isShipping ? handleCheckoutFirstStep() : handleCheckout();
+        if (checkStep.isShipping) {
+            handleCheckoutFirstStep();
+        }
+        else {
+            setLoadingProcessToPayment(true);
+            handleCheckout().finally(() => {
+                setTimeout(() => {
+                    setLoadingProcessToPayment(false);
+                }, 1000);
+            });
+        }
     }, [checkStep]);
     return (React.createElement(Page, { className: 'checkout use-account' },
         React.createElement(AccountContainer, { className: `second-version` },
@@ -38,6 +49,7 @@ const CheckoutTemplate = () => {
                         handleClick: handleCheckoutBtn,
                         type: checkStep.isShipping ? 'submit' : 'button',
                         text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
+                        loadingButton: loadingProcessToPayment,
                     } }, !addressLoading ? (React.createElement(React.Fragment, null,
                     React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
                     checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,

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,17 +1,17 @@
 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 addNew = async () => {
-        return await api.post('add-card').then((res) => {
+const AddNewCard = ({ className, isCheckout }) => {
+    const addNewCard = async () => {
+        return await api.post('add-card', { backUrl: `${window.location.href}`, isCheckout }).then((res) => {
             if (res.redirect_url) {
                 window.location.href = res.redirect_url;
             }
         });
     };
-    return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}`, onClick: addNew },
+    return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}`, onClick: addNewCard },
         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: 'addNewCard' }))));

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

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

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

@@ -1,18 +1,13 @@
 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, isCheckout }) => {
     const { openPopup } = useUi();
-    const formatCardNumber = (number) => {
-        if (!number)
-            return '';
-        return number.replace(/(.{4})/g, '$1 ').trim();
-    };
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
         openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteCardMessage', description: 'confirmDeleteCard', onRemove: () => deleteCard(cardOption.id) }), {
@@ -20,17 +15,17 @@ 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 }),
-            React.createElement(Text, { className: `card-number account-p account-p1 account-font-regular`, text: formatCardNumber(cardOption.number) })),
+            React.createElement(Text, { className: `card-number account-p account-p1 account-font-regular`, text: cardOption.number })),
         React.createElement("div", { className: `card-wrap-bottom` },
             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` }))));
+            !isCheckout && selectedPayment != cardOption.id ? (React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `account-card-remove-btn account-p account-p3 account-font-regular` })) : null)));
 };
-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/Payment/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Text, api } from '@weareconceptstudio/core';
+import { useCheckoutContext } from '../../checkout';
+//* Components
+import AccountButton from '../../../components/AccountButton';
+import PaymentMethods from '../PaymentMethods';
+import SelectedPayment from '../SelectedPayment';
+//* Style
+import PaymentStyle from './style';
+import { useAccountContext } from '../../../AccountProvider';
+const Payment = ({ title, onClick, className }) => {
+    const { useUser } = useAccountContext();
+    const { checkoutData, fillCheckoutData } = useCheckoutContext();
+    const { user } = useUser();
+    const addNewCard = async () => {
+        return await api.post('add-card', { backUrl: `${window.location.href}`, isCheckout: true }).then((res) => {
+            if (res.redirect_url) {
+                window.location.href = res.redirect_url;
+            }
+        });
+    };
+    const setSelectedPayment = (value) => {
+        fillCheckoutData('paymentType', value);
+        if (value == 'card') {
+            addNewCard();
+        }
+    };
+    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 }),
+            user.default_payment_method && (React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
+        user.default_payment_method ? (React.createElement(SelectedPayment, null)) : (React.createElement(PaymentMethods, { selectedPayment: checkoutData.paymentType, setSelectedPayment: setSelectedPayment }))));
+};
+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,29 @@
+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.short_number),
+            item.card.is_expired ? (React.createElement(Text, { tag: 'span', className: 'card-exp-date', text: 'cardExpired' })) : null))));
+};
+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,15 @@
+import React from 'react';
+import { useAccountContext } from '../../../AccountProvider';
+//* Components
+import PaymentMethodItem from '../PaymentMethodItem';
+//* Style
+import PaymentMethodsStyle from './style';
+const PaymentMethods = ({ className, selectedPayment, setSelectedPayment }) => {
+    const { paymentOptions, useUser } = useAccountContext();
+    const { user } = useUser();
+    const paymentMethods = useMemo(() => {
+        return !!user.default_payment_method ? paymentOptions : [{ label: 'Card', value: 'card' }, ...paymentOptions];
+    }, [user, paymentOptions]);
+    return (React.createElement(PaymentMethodsStyle, { className: `payment-item-container ${className || ''}` }, paymentMethods.map((item, index) => (React.createElement(PaymentMethodItem, { key: index, item: item, 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, isCheckout: isCheckout })))),
         React.createElement("div", { className: 'line' }),
-        React.createElement(PaymentMethodsComp, { showAll: true, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })));
+        React.createElement(PaymentMethods, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })));
 };
 export default PaymentWrap;