@weareconceptstudio/account 0.3.1 → 0.3.3

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

@@ -1,44 +1,52 @@
-import React, { useState } from 'react';
+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 PaymentMethodsComp = ({ className, fillCheckoutData, checkoutData, showAll }) => {
-    const paymentOptions = [
+const isNumeric = (value) => !isNaN(value) && !isNaN(parseFloat(value));
+const PaymentMethodsComp = ({ className, showAll, selectedPayment, setSelectedPayment }) => {
+    let paymentOptions = [
         {
             label: 'Cash',
             value: 'cash_on_delivery',
-            svg: '/images/payment/cash.svg',
-        },
-        {
-            label: 'Card',
-            value: 'credit_card',
-            svg: '/images/payment/card.svg',
+            svg: cashSVG,
         },
         {
             label: 'Idram',
             value: 'idram',
-            svg: '/images/payment/idram.svg',
+            svg: idramSVG,
         },
         {
             label: 'POS TERMINAL',
             value: 'pos_terminal',
-            svg: '/images/payment/pos-terminal.svg',
+            svg: posTerminalSVG,
         },
         {
             label: 'Telcell',
             value: 'telcell',
-            svg: '/images/payment/telcell.svg',
+            svg: telcellSVG,
         },
         {
             label: 'Inecopay',
             value: 'inecopay',
-            svg: '/images/payment/inecopay.svg',
+            svg: inecopaySVG,
         },
     ];
-    const [selectedPayment, setSelectedPayment] = useState(checkoutData.paymentType || '');
-    const cardDetails = checkoutData.paymentType === 'credit_card'
+    if (!showAll) {
+        paymentOptions = [
+            {
+                label: 'Card',
+                value: 'credit_card',
+                svg: cardSVG,
+            },
+            ...paymentOptions,
+        ];
+    }
+    const { checkoutData } = useCheckoutContext();
+    const cardDetails = isNumeric(checkoutData.paymentType)
         ? {
-            type: 'MasterCard', // Or 'Visa', based on your logic
+            card_type: 'MasterCard', // Or 'Visa', based on your logic
             number: '**** **** **** 1234',
             expDate: '12/24',
         }
@@ -48,7 +56,7 @@ const PaymentMethodsComp = ({ className, fillCheckoutData, checkoutData, showAll
         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;
@@ -57,20 +65,16 @@ const PaymentMethodsComp = ({ className, fillCheckoutData, checkoutData, showAll
         filteredOptions = filteredOptions.map((option) => option.value === 'credit_card'
             ? {
                 ...option,
-                label: React.createElement("span", { className: 'card-type' }, cardDetails.type),
+                label: React.createElement("span", { className: 'card-type' }, cardDetails.card_type),
             }
             : option);
     }
-    const handleSelect = (value) => {
-        setSelectedPayment(value);
-        fillCheckoutData('paymentType', value);
-    };
-    return (React.createElement(PaymentMethodsCompStyle, { className: `payment-item-container ${className || ''}`, singlePayment: !!checkoutData.paymentType }, filteredOptions.map((option) => (React.createElement("div", { className: 'custom-payment-options', key: option.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("img", { src: option.svg, alt: `${option.label} icon` }),
+                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/{components/TotalCheckout → modules/payment}/PaymentMethodsComp/style.js

@@ -4,7 +4,7 @@ const PaymentMethodsCompStyle = styled.div `
 	--account_itemInternalPadTB: var(--sp2x);
 	--account_itemInternalPadLR: var(--sp4x);
 	--account_flexWrapperMTop: var(--sp2x);
-	--account_itemDistance: var(--sp3x);
+	--account_itemDistance: var(--sp5x);
 	--account_circleSize: var(--sp4x);
 	--account_checkSize: var(--sp2x);
 
@@ -14,7 +14,7 @@ const PaymentMethodsCompStyle = styled.div `
 	column-gap: var(--account_itemDistance);
 
 	.custom-payment-options {
-		width: ${(props) => (props.singlePayment ? '100%' : 'calc(50% - var(--account_itemDistance) / 2)')};
+		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);
@@ -94,7 +94,7 @@ const PaymentMethodsCompStyle = styled.div `
 		--account_itemInternalPadTB: var(--sp2x);
 		--account_itemInternalPadLR: var(--sp3x);
 		--account_flexWrapperMTop: var(--sp2x);
-		--account_itemDistance: var(--sp3x);
+		--account_itemDistance: var(--sp5x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
 	}
@@ -103,7 +103,7 @@ const PaymentMethodsCompStyle = styled.div `
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp3x);
 		--account_flexWrapperMTop: var(--sp1-5x);
-		--account_itemDistance: var(--sp3x);
+		--account_itemDistance: var(--sp4x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
 	}
@@ -112,7 +112,7 @@ const PaymentMethodsCompStyle = styled.div `
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp3x);
 		--account_flexWrapperMTop: var(--sp1-5x);
-		--account_itemDistance: var(--sp2x);
+		--account_itemDistance: var(--sp3x);
 		--account_circleSize: var(--sp3x);
 		--account_checkSize: var(--sp1-5x);
 	}
@@ -130,7 +130,7 @@ const PaymentMethodsCompStyle = styled.div `
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp2x);
 		--account_flexWrapperMTop: var(--sp1-5x);
-		--account_itemDistance: var(--sp2x);
+		--account_itemDistance: var(--sp3x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
 	}
@@ -150,7 +150,7 @@ const PaymentMethodsCompStyle = styled.div `
 		--account_itemInternalPadTB: var(--sp1-5x);
 		--account_itemInternalPadLR: var(--sp1-5x);
 		--account_flexWrapperMTop: var(--sp1-5x);
-		--account_itemDistance: var(--sp2x);
+		--account_itemDistance: var(--sp1x);
 		--account_circleSize: var(--sp2-5x);
 		--account_checkSize: var(--sp1x);
 

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

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

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

@@ -1,41 +1,28 @@
 'use client';
 import React, { useState } from 'react';
-import { Text } from '@weareconceptstudio/core';
+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';
-import AddNewCard from '../../../components/TotalCheckout/AddNewCard';
-import CardComp from '../../../components/TotalCheckout/CardComp';
-const PaymentMethodsTemplate = ({}) => {
-    const [selectedCard, setSelectedCard] = useState('');
-    const [cardOptions, setCardOptions] = useState([
-        {
-            id: 1,
-            type: 'MasterCard',
-            number: '3122 4577 8799 8877',
-            fullName: 'Sasoun Papelyan',
-            expDate: '12/24',
-        },
-        {
-            id: 2,
-            type: 'Visa',
-            number: '4577 1234 3122 1234',
-            fullName: 'Gohar Vardevanyan',
-            expDate: '12/25',
-        },
-        {
-            id: 3,
-            type: 'MasterCard',
-            number: '8799 1234 3122 1234',
-            fullName: 'Sasoun Papelyan',
-            expDate: '12/27',
-        },
-    ]);
-    const handleDelete = (cardId) => {
-        setCardOptions((prevOptions) => prevOptions.filter((card) => card.id !== cardId));
+const PaymentMethodsTemplate = () => {
+    const { useUser } = useAccountContext();
+    const { user } = useUser();
+    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(Text, { tag: `h6`, className: `account-font-medium account-primary-color1 title`, text: `myCards` }),
-        React.createElement("div", { className: `flex-wrapper` },
-            React.createElement(AddNewCard, { title: 'addNewCard' }),
-            cardOptions.map((card, index) => (React.createElement(CardComp, { key: index, cardOption: card, selectedPayment: selectedCard, onSelect: setSelectedCard, onDelete: handleDelete }))))));
+        React.createElement("div", { className: 'account-payment-block' },
+            React.createElement(Text, { tag: `h6`, className: `account-font-medium account-primary-color1 title`, text: `myCards` }),
+            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;

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

@@ -1,7 +1,11 @@
 import styled from 'styled-components';
 const PaymentStyle = styled.div `
-	--account_payMethodsItemDistance: var(--sp3x);
 	--account_payMethodsWrapMarginT: var(--sp4x);
+	--account_payButtonMarginT: var(--sp6x);
+	--account_lineMTop: var(--sp4x);
+	--account_lineMBottom: var(--sp4x);
+	--account_payMethodsItemDistance: var(--sp5x);
+	--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
 
 	.account-payment-method {
 		margin-top: unset;
@@ -12,42 +16,70 @@ const PaymentStyle = styled.div `
 	}
 
 	.flex-wrapper {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--account_payMethodsItemDistance);
 		margin-top: var(--account_payMethodsWrapMarginT);
 	}
 
-	.new-card-container {
-		position: relative;
+	.account-payment-btn-wrapper {
+		display: flex;
+		justify-content: end;
+		margin-top: var(--account_payButtonMarginT);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
-		--account_payMethodsItemDistance: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp5x);
+		--account_payButtonMarginT: var(--sp5x);
+		--account_payMethodsWrapMarginT: var(--sp4x);
+		--account_lineMTop: var(--sp3x);
+		--account_lineMBottom: var(--sp4x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
-		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemDistance: var(--sp4x);
+		--account_payButtonMarginT: var(--sp4x);
+		--account_payMethodsWrapMarginT: var(--sp3x);
+		--account_lineMTop: var(--sp3x);
+		--account_lineMBottom: 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_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemDistance: var(--sp3x);
+		--account_payButtonMarginT: var(--sp4x);
+		--account_payMethodsWrapMarginT: var(--sp3x);
+		--account_lineMTop: var(--sp3x);
+		--account_lineMBottom: 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_payMethodsItemDistance: var(--sp2x);
+		--account_payButtonMarginT: var(--sp3x);
+		--account_payMethodsWrapMarginT: var(--sp3x);
+		--account_lineMTop: var(--sp2-5x);
+		--account_lineMBottom: 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_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemDistance: var(--sp3x);
+		--account_payButtonMarginT: var(--sp3x);
+		--account_payMethodsWrapMarginT: var(--sp2x);
+		--account_lineMTop: var(--sp2-5x);
+		--account_lineMBottom: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
 		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payButtonMarginT: var(--sp2x);
+		--account_payMethodsWrapMarginT: var(--sp3x);
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
-		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsItemDistance: var(--sp1x);
+		--account_payButtonMarginT: var(--sp1-5x);
+		--account_payMethodsWrapMarginT: var(--sp2x);
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: var(--sp2x);
+		--account_radioWrapperWidth: 100%;
 	}
 `;
 export default PaymentStyle;

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

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

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+//* Components
+import PaymentMethodsComp from '../PaymentMethodsComp';
+import AddNewCard from '../AddNewCard';
+import CardComp from '../CardComp';
+//* Style
+import PaymentWrapStyle from './style';
+import { useAccountContext } from '../../../AccountProvider';
+import { api } from '@weareconceptstudio/core';
+const PaymentWrap = ({ selectedPayment, setSelectedPayment }) => {
+    const { useUser } = useAccountContext();
+    const { user } = useUser();
+    const [cards, setCards] = useState(user.cards);
+    const deleteCard = async (cardId) => {
+        await api.post('delete-card', { card_id: cardId }).then(() => {
+            setCards((prev) => prev.filter((item) => item.id != cardId));
+        });
+    };
+    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("div", { className: 'line' }),
+        React.createElement(PaymentMethodsComp, { showAll: true, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })));
+};
+export default PaymentWrap;

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

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

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

@@ -1,12 +1,10 @@
 import styled from 'styled-components';
-const SelectPaymentMethodPopupStyle = styled.section `
-	--account_cancelAndSaveWrapMTop: var(--sp5x);
-	--account_cancelDistance: var(--sp5x);
-	--account_selectAddressWrapMBot: var(--sp5x);
-	--account_payMethodsItemDistance: var(--sp3x);
+const PaymentWrapStyle = styled.section `
+	--account_selectPaymentWrapMBot: var(--sp5x);
+	--account_payMethodsItemDistance: var(--sp5x);
 	--account_payMethodsItemInternalPad: var(--sp2x);
 	--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
-	--account_lineMTop: var(--sp3x);
+	--account_lineMTop: var(--sp4x);
 	--account_lineMBottom: var(--sp4x);
 
 	.new-card-container {
@@ -18,19 +16,13 @@ const SelectPaymentMethodPopupStyle = styled.section `
 		flex-wrap: wrap;
 		justify-content: space-between;
 		align-items: center;
-		margin-bottom: var(--account_selectAddressWrapMBot);
+		margin-bottom: var(--account_selectPaymentWrapMBot);
 	}
 
 	.flex-wrapper {
 		display: flex;
 		flex-wrap: wrap;
 		gap: var(--account_payMethodsItemDistance);
-
-		/* .item-container {
-			&:not(:nth-child(1), :nth-child(2)) {
-				margin-top: var(--account_payMethodsItemDistance) !important;
-			}
-		} */
 	}
 
 	.custom-payment-options {
@@ -38,19 +30,6 @@ const SelectPaymentMethodPopupStyle = styled.section `
 		padding: var(--account_payMethodsItemInternalPad) !important;
 	}
 
-	.cancel-and-save-wrap {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		margin-top: var(--account_cancelAndSaveWrapMTop);
-
-		.btn-wrap {
-			&:first-child {
-				margin-right: var(--account_cancelDistance);
-			}
-		}
-	}
-
 	.line {
 		width: 100%;
 		height: 2px;
@@ -59,95 +38,66 @@ const SelectPaymentMethodPopupStyle = styled.section `
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
-		--account_cancelAndSaveWrapMTop: var(--sp4x);
-		--account_cancelDistance: var(--sp3x);
-		--account_selectAddressWrapMBot: var(--sp4x);
-		--account_payMethodsItemDistance: var(--sp3x);
+		--account_selectPaymentWrapMBot: var(--sp4x);
+		--account_payMethodsItemDistance: var(--sp5x);
 		--account_payMethodsItemInternalPad: var(--sp2x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
-		--account_lineMTop: var(--sp2-5x);
-		--account_lineMBottom: var(--sp3x);
+		--account_lineMTop: var(--sp3x);
+		--account_lineMBottom: var(--sp4x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
-		--account_cancelAndSaveWrapMTop: var(--sp3x);
-		--account_cancelDistance: var(--sp3x);
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp2x);
+		--account_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp4x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
-		--account_lineMTop: var(--sp2x);
-		--account_lineMBottom: var(--sp3x);
+		--account_lineMTop: var(--sp3x);
+		--account_lineMBottom: 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_cancelAndSaveWrapMTop: var(--sp3x);
-		--account_cancelDistance: var(--sp3x);
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp2x);
+		--account_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp3x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
-		--account_lineMTop: var(--sp2x);
+		--account_lineMTop: var(--sp3x);
 		--account_lineMBottom: 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_cancelAndSaveWrapMTop: var(--sp3x);
-		--account_cancelDistance: var(--sp2-5x);
-		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_selectPaymentWrapMBot: var(--sp3x);
 		--account_payMethodsItemDistance: var(--sp2x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
-		--account_lineMTop: var(--sp2x);
+		--account_lineMTop: var(--sp2-5x);
 		--account_lineMBottom: 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_cancelAndSaveWrapMTop: var(--sp3x);
-		--account_cancelDistance: var(--sp2-5x);
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp2x);
+		--account_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp3x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
-		--account_lineMTop: var(--sp2x);
+		--account_lineMTop: var(--sp2-5x);
 		--account_lineMBottom: var(--sp2x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
-		--account_cancelAndSaveWrapMTop: var(--sp3x);
-		--account_cancelDistance: var(--sp2-5x);
-		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_selectPaymentWrapMBot: var(--sp3x);
 		--account_payMethodsItemDistance: var(--sp2x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
-		--account_lineMTop: var(--sp1-5x);
-		--account_lineMBottom: var(--sp2x);
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
-		--account_cancelAndSaveWrapMTop: var(--sp3x);
-		--account_cancelDistance: var(--sp2x);
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp2x);
+		--account_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp1x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: 100%;
-		--account_lineMTop: var(--sp1-5x);
-		--account_lineMBottom: var(--sp1-5x);
-
-		.cancel-and-save-wrap {
-			flex-direction: column-reverse;
-
-			.btn-wrap {
-				&:first-child {
-					margin-right: 0;
-					margin-top: var(--account_cancelDistance);
-				}
-
-				&:last-child {
-					width: 100%;
-				}
-			}
-		}
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBottom: var(--sp2x);
 	}
 `;
-export default SelectPaymentMethodPopupStyle;
+export default PaymentWrapStyle;

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

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

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

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+import { useCheckoutContext } from '../../checkout';
+//* Components
+import AccountButton from '../../../components/AccountButton';
+import PaymentWrap from '../PaymentWrap';
+//* Style
+import SelectPaymentMethodPopupStyle from './style';
+const SelectPaymentMethodPopup = () => {
+    const { closePopup } = useUi();
+    const { checkoutData, fillCheckoutData } = useCheckoutContext();
+    const [selectedPayment, setSelectedPayment] = useState(checkoutData.paymentType);
+    const handlePaymentMethodChangeSubmit = () => {
+        fillCheckoutData('paymentType', selectedPayment);
+        closePopup();
+    };
+    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("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 }))));
+};
+export default SelectPaymentMethodPopup;

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

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+const SelectPaymentMethodPopupStyle = styled.section `
+	--account_selectPaymentTitleMBot: var(--sp4x);
+	--account_cancelAndSaveWrapMTop: var(--sp5x);
+	--account_cancelDistance: var(--sp5x);
+
+	.cancel-and-save-wrap {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-top: var(--account_cancelAndSaveWrapMTop);
+
+		.btn-wrap {
+			&:first-child {
+				margin-right: var(--account_cancelDistance);
+			}
+		}
+	}
+
+	.select-payment-wrap {
+		margin-bottom: var(--account_selectPaymentTitleMBot);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_selectPaymentTitleMBot: var(--sp4x);
+		--account_cancelAndSaveWrapMTop: var(--sp4x);
+		--account_cancelDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_selectPaymentTitleMBot: var(--sp4x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_selectPaymentTitleMBot: var(--sp4x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: 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_selectPaymentTitleMBot: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_selectPaymentTitleMBot: var(--sp2-5x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_selectPaymentTitleMBot: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_selectPaymentTitleMBot: var(--sp2x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_cancelDistance: var(--sp2x);
+
+		.cancel-and-save-wrap {
+			flex-direction: column-reverse;
+
+			.btn-wrap {
+				&:first-child {
+					margin-right: 0;
+					margin-top: var(--account_cancelDistance);
+				}
+
+				&:last-child {
+					width: 100%;
+				}
+			}
+		}
+	}
+`;
+export default SelectPaymentMethodPopupStyle;