@weareconceptstudio/account 0.3.0 → 0.3.1

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

@@ -0,0 +1,14 @@
+export const balanceFields = [
+    {
+        fieldType: 'input',
+        labelProps: {
+            // label: 'muramoneyCodeLabel',
+            name: 'balance',
+            // required: false,
+            errorKey: 'balance',
+        },
+        fieldProps: {
+            placeholder: 'balancePlaceholder',
+        },
+    },
+];

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

@@ -0,0 +1,9 @@
+export default PaymentComp;
+declare function PaymentComp({ title, onClick, className, fillCheckoutData, checkoutData }: {
+    title: any;
+    onClick: any;
+    className: any;
+    fillCheckoutData: any;
+    checkoutData: any;
+}): React.JSX.Element;
+import React from 'react';

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

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

package/dist/components/TotalCheckout/PaymentComp/style.d.ts

@@ -0,0 +1,2 @@
+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/components/TotalCheckout/PaymentComp/style.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+const PaymentCompStyle = styled.div `
+	--account_checkoutMTop: var(--sp16x);
+	--account_changePaymentWrapMBot: var(--sp5x);
+
+	margin-top: var(--account_checkoutMTop);
+
+	.change-payment-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: var(--account_changePaymentWrapMBot);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_checkoutMTop: var(--sp11x);
+		--account_changePaymentWrapMBot: 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_checkoutMTop: var(--sp8x);
+		--account_changePaymentWrapMBot: 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_checkoutMTop: var(--sp8x);
+		--account_changePaymentWrapMBot: 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_checkoutMTop: var(--sp8x);
+		--account_changePaymentWrapMBot: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_checkoutMTop: var(--sp8x);
+		--account_changePaymentWrapMBot: 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_checkoutMTop: var(--sp8x);
+		--account_changePaymentWrapMBot: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_checkoutMTop: var(--sp10x);
+		--account_changePaymentWrapMBot: var(--sp2x);
+	}
+`;
+export default PaymentCompStyle;

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

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

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

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Text } from '@weareconceptstudio/core';
+//* Style
+import PaymentMethodsCompStyle from './style';
+const PaymentMethodsComp = ({ className, fillCheckoutData, checkoutData, showAll }) => {
+    const paymentOptions = [
+        {
+            label: 'Cash',
+            value: 'cash_on_delivery',
+            svg: '/images/payment/cash.svg',
+        },
+        {
+            label: 'Card',
+            value: 'credit_card',
+            svg: '/images/payment/card.svg',
+        },
+        {
+            label: 'Idram',
+            value: 'idram',
+            svg: '/images/payment/idram.svg',
+        },
+        {
+            label: 'POS TERMINAL',
+            value: 'pos_terminal',
+            svg: '/images/payment/pos-terminal.svg',
+        },
+        {
+            label: 'Telcell',
+            value: 'telcell',
+            svg: '/images/payment/telcell.svg',
+        },
+        {
+            label: 'Inecopay',
+            value: 'inecopay',
+            svg: '/images/payment/inecopay.svg',
+        },
+    ];
+    const [selectedPayment, setSelectedPayment] = useState(checkoutData.paymentType || '');
+    const cardDetails = checkoutData.paymentType === 'credit_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 === 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.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 },
+        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(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("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/components/TotalCheckout/PaymentMethodsComp/style.d.ts

@@ -0,0 +1,2 @@
+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;

package/dist/components/TotalCheckout/PaymentMethodsComp/style.js

@@ -0,0 +1,162 @@
+import styled from 'styled-components';
+const PaymentMethodsCompStyle = styled.div `
+	--account_itemBorderRadius: var(--sp1-5x);
+	--account_itemInternalPadTB: var(--sp2x);
+	--account_itemInternalPadLR: var(--sp4x);
+	--account_flexWrapperMTop: var(--sp2x);
+	--account_itemDistance: var(--sp3x);
+	--account_circleSize: var(--sp4x);
+	--account_checkSize: var(--sp2x);
+
+	display: flex;
+	flex-wrap: wrap;
+	row-gap: var(--account_flexWrapperMTop);
+	column-gap: var(--account_itemDistance);
+
+	.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-item-left {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				gap: var(--sp1x);
+			}
+		}
+
+		.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);
+			}
+			.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 */
+			}
+		}
+	}
+
+	.circle-selected-wrap {
+		width: var(--account_circleSize) !important;
+		height: var(--account_circleSize) !important;
+		border-radius: 50%;
+		border: 2px solid var(--account_primaryColor5);
+		background-color: var(--account_backgroundColor);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.selected,
+		.note-selected {
+			color: var(--account_backgroundColor);
+		}
+
+		&.active {
+			border: 2px solid var(--account_primaryColor1);
+			background-color: var(--account_primaryColor1);
+		}
+
+		.checkbox-icon {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			width: var(--account_checkSize);
+			height: var(--account_checkSize);
+			fill: var(--account_backgroundColor);
+		}
+	}
+
+	@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(--sp3x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+	}
+
+	@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(--sp3x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+	}
+
+	@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(--sp2x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+	}
+
+	@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);
+	}
+
+	@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(--sp2x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--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);
+	}
+
+	@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(--sp2x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+
+		.custom-payment-options {
+			width: 100%;
+		}
+	}
+`;
+export default PaymentMethodsCompStyle;

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

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

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

@@ -1,29 +1,32 @@
 import React, { useState } from 'react';
-import { Text } from '@weareconceptstudio/core';
+import { Text, CollapseItem } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import AccountButton from '../../AccountButton';
 import { promoCodeFields } from './utils';
 //* Style
 import PromoCodeCompStyle from './style';
-// TODO: Fake Promo Text
-const fakePromoText = '10% of first order';
-const PromoCodeComp = ({ isPromoCode = true }) => {
+const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
     //! States
-    const [show, setShow] = useState(true);
     const [couponCode, setCouponCode] = useState(false);
+    const [disable, setDisable] = useState(false);
     //! On Finish
     const onFinish = () => {
         setCouponCode(true);
+        setDisable(true);
     };
-    return isPromoCode ? (React.createElement(PromoCodeCompStyle, null, show ? (React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium promo-code-text', text: 'gotPromotionCode', onClick: () => {
-            setShow(false);
-        } })) : couponCode ? (React.createElement("div", { className: `promo-code-success-block` },
-        React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-success-text' }, fakePromoText),
-        React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: () => {
-                setCouponCode(false);
-            } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
-            className: 'promo-code-container',
-        } },
-        React.createElement(AccountButton, { text: `add`, type: 'submit', btnType: `promo-code-version` }))))) : null;
+    return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: 'collapse-distance' },
+        React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
+                React.createElement("div", null,
+                    React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },
+                        React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
+                        React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color1 account-font-medium promo-code-text', text: 'gotPromotionCode' })), description: React.createElement(React.Fragment, null, couponCode ? (React.createElement("div", { className: `promo-code-success-block` },
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-success-text' }, promo_code),
+                React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: () => {
+                        setCouponCode(false);
+                    } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
+                    className: 'promo-code-container',
+                } },
+                React.createElement(AccountButton, { text: `add`, type: 'submit', btnType: `promo-code-version` })))) }))) : null;
 };
 export default PromoCodeComp;

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

@@ -6,8 +6,10 @@ const PromoCodeCompStyle = styled.div `
 	--account_promoCodeInputPadLR: var(--sp2x);
 	--account_promoCodeContainerGap: var(--sp2x);
 
-	margin-top: var(--account_promoCodeCompDistance);
-	margin-bottom: calc(var(--account_promoCodeCompDistance) - var(--sp2x));
+	--account_promoCodeBlockMarTop: var(--sp3x);
+	--account_promoCodeBlockPadTop: var(--sp3x);
+
+	border-top: 1px solid rgba(0, 0, 0, 0.4);
 
 	.promo-code-container {
 		display: flex;
@@ -34,15 +36,6 @@ const PromoCodeCompStyle = styled.div `
 		width: fit-content;
 		transition: color var(--account_trTime) ease-out;
 		cursor: pointer;
-
-		/* //! Mouse Detect */
-		@media (pointer: fine) {
-			@media (hover: hover) {
-				&:hover {
-					color: var(--account_primaryColor3);
-				}
-			}
-		}
 	}
 
 	.promo-code-success-block {

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

@@ -0,0 +1,3 @@
+export default SelectPaymentMethodPopup;
+declare const SelectPaymentMethodPopup: React.NamedExoticComponent<object>;
+import React from 'react';

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

@@ -0,0 +1,65 @@
+import React, { memo as Memo, useEffect, useState } from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+//* Components
+import AccountButton from '../../AccountButton';
+import PaymentMethodsComp from '../PaymentMethodsComp';
+import AddNewCard from '../AddNewCard';
+import CardComp from '../CardComp';
+//* Style
+import SelectPaymentMethodPopupStyle from './style';
+const SelectPaymentMethodPopup = Memo(({ title, type, fillCheckoutData, checkoutData }) => {
+    const { openPopup, closePopup } = useUi();
+    const [selectedPaymentType, setSelectedPaymentType] = useState(checkoutData.paymentType);
+    const [selectedCard, setSelectedCard] = useState('');
+    useEffect(() => {
+        setSelectedPaymentType(checkoutData.paymentType);
+    }, [checkoutData.paymentType]);
+    const handlePaymentMethodChangeSubmit = () => {
+        fillCheckoutData('paymentType', selectedPaymentType);
+        if (selectedPaymentType === 'credit_card') {
+            fillCheckoutData('selectedCard', selectedCard);
+        }
+        closePopup();
+    };
+    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));
+    };
+    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: title })),
+        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: 'line' }),
+        React.createElement(PaymentMethodsComp, { checkoutData: { ...checkoutData, paymentType: selectedPaymentType }, fillCheckoutData: (key, val) => {
+                if (key === 'paymentType')
+                    setSelectedPaymentType(val);
+            }, showAll: 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 }))));
+});
+export default SelectPaymentMethodPopup;

package/dist/components/TotalCheckout/SelectPaymentMethodPopup/style.d.ts

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