@weareconceptstudio/account 0.3.9 → 0.4.1

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

@@ -29,7 +29,7 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
         React.createElement("div", { className: `item-internal-wrap` },
             React.createElement("div", { className: `relative-wrapper` },
                 React.createElement("div", { className: `personal-data-wrap` }, data.displayLines.map((line, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 ${index == 0 ? 'account-font-bold' : 'account-font-regular'} ${index % 2 != 0 ? 'col-wrap' : ''} account-primary-color1`, text: line })))),
-                data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style is-default`, text: `${type === 'shipping' ? 'defaultShippingAddress' : type == 'billing' ? 'defaultBillingAddress' : 'defaultAddress'}` })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style opacity-zero`, text: `empty` })),
+                data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color3 margin-style is-default`, text: `${type === 'shipping' ? 'defaultShippingAddress' : type == 'billing' ? 'defaultBillingAddress' : 'defaultAddress'}` })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style opacity-zero`, text: `empty` })),
                 select_address && (React.createElement("div", { className: `circle-selected-wrap cursor-pointer ${checkedId == data.id ? 'active' : ''}`, onClick: () => setCheckedId(data.id) },
                     React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedAddresses?.id === data.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' }))))),

package/dist/modules/auth/SignUpTemplate/utils.d.ts

@@ -20,4 +20,12 @@ export declare const defaultFormFields: ({
     fieldProps: {
         placeholder: string;
     };
+} | {
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+        rules?: undefined;
+    };
+    fieldProps?: undefined;
 })[];

package/dist/modules/auth/SignUpTemplate/utils.js

@@ -30,6 +30,13 @@ export const defaultFormFields = [
             placeholder: 'emailPlaceholder',
         },
     },
+    {
+        fieldType: 'phone',
+        labelProps: {
+            label: 'phone_input',
+            name: 'phone',
+        },
+    },
     {
         fieldType: 'password',
         labelProps: {

package/dist/modules/checkout/CheckoutProvider.js

@@ -16,7 +16,7 @@ export const CheckoutProvider = ({ children }) => {
         addressId: null,
         useBalance: null,
         note: '',
-        paymentType: user?.default_payment_method || null,
+        paymentType: user?.payment_method || null,
     });
     const [idramForm, setIdramForm] = useState();
     const isCheckoutPage = useMemo(() => {

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

@@ -7,7 +7,6 @@ import { useCheckoutContext } from '../CheckoutProvider';
 import StepReview from './StepReview';
 import StepShipping from './StepShipping';
 import AccountContainer from '../../../components/AccountContainer';
-import Loader from '../../../components/Loader';
 //* Styles
 import CheckoutTemplateStyle from './style';
 //* Skeleton
@@ -19,7 +18,7 @@ const CheckoutTemplate = () => {
     const { hasCheckoutAddress, addressLoading } = useAddressContext();
     const { handleCheckout } = useCheckoutContext();
     const { useCart } = useAccountContext();
-    const { items, itemsCount } = useCart();
+    const { items, itemsCount, loading } = useCart();
     const checkStep = {
         isShipping: !hasCheckoutAddress,
         isReview: hasCheckoutAddress,
@@ -41,9 +40,13 @@ const CheckoutTemplate = () => {
             });
         }
     }, [checkStep]);
+    useEffect(() => {
+        if (!itemsCount && !loading) {
+            window.location.href = '/';
+        }
+    }, [itemsCount, loading]);
     return (React.createElement(Page, { className: 'checkout use-account' },
-        React.createElement(Loader, { className: 'checkout', pathname: window.location.pathname }),
-        itemsCount ? (React.createElement(AccountContainer, { className: `second-version` },
+        React.createElement(AccountContainer, { className: `second-version` },
             React.createElement(CheckoutTemplateStyle, null,
                 React.createElement(TotalCheckout, { isShipping: checkStep.isShipping, buttonProps: {
                         url: false,
@@ -51,11 +54,11 @@ const CheckoutTemplate = () => {
                         type: checkStep.isShipping ? 'submit' : 'button',
                         text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
                         loadingButton: loadingProcessToPayment,
-                    } }, !addressLoading ? (React.createElement(React.Fragment, null,
+                    } }, !addressLoading && itemsCount ? (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,
                     React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
                     React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
-                    React.createElement(SkeletonCartTemplate, null))))))) : null));
+                    React.createElement(SkeletonCartTemplate, null))))))));
 };
 export default CheckoutTemplate;

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

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

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

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { api } from '@weareconceptstudio/core';
+import { useAccountContext } from '../../../AccountProvider';
+import AddNewCard from '../AddNewCard';
+import Card from '../Card';
+import CardsStyle from './style';
+const Cards = ({ 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(CardsStyle, null,
+        React.createElement("div", { className: `cards-wrapper` },
+            React.createElement(AddNewCard, null),
+            cards?.map((card, index) => (React.createElement(Card, { key: index, cardOption: card, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment, deleteCard: deleteCard }))))));
+};
+export default Cards;

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

@@ -0,0 +1,2 @@
+export default CardsStyle;
+declare const CardsStyle: 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/Cards/style.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+const CardsStyle = styled.div `
+	--account_payMethodsWrapMarginT: var(--sp4x);
+	--account_payMethodsItemDistance: var(--sp5x);
+
+	.new-card-container {
+		position: relative;
+	}
+
+	.cards-wrapper {
+		margin-top: var(--account_payMethodsWrapMarginT);
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--account_payMethodsItemDistance);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_selectPaymentWrapMBot: var(--sp4x);
+		--account_payMethodsItemDistance: var(--sp4x);
+		--account_payMethodsWrapMarginT: 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_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp3x);
+		--account_payMethodsWrapMarginT: 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_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp3x);
+		--account_payMethodsWrapMarginT: 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_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsWrapMarginT: 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_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp3x);
+		--account_payMethodsWrapMarginT: 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_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp2x);
+		--account_payMethodsWrapMarginT: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_selectPaymentWrapMBot: var(--sp3x);
+		--account_payMethodsItemDistance: var(--sp1x);
+		--account_payMethodsWrapMarginT: var(--sp2x);
+	}
+`;
+export default CardsStyle;

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

@@ -18,7 +18,7 @@ const Payment = ({ title, onClick, 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 }),
-            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 }))));
+            user.payment_method && (React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
+        user.payment_method ? (React.createElement(SelectedPayment, null)) : (React.createElement(PaymentMethods, { selectedPayment: checkoutData.paymentType, setSelectedPayment: setSelectedPayment }))));
 };
 export default Payment;

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

@@ -8,7 +8,7 @@ const PaymentMethods = ({ className, selectedPayment, setSelectedPayment }) => {
     const { paymentOptions, useUser } = useAccountContext();
     const { user } = useUser();
     const paymentMethods = useMemo(() => {
-        return !!user.default_payment_method ? paymentOptions : [{ label: 'Card', value: 'credit_card' }, ...paymentOptions];
+        return !!user.payment_method ? paymentOptions : [{ label: 'Card', value: 'credit_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 })))));
 };

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

@@ -1,36 +1,11 @@
-import React, { useState, useCallback } from 'react';
-import { api, Text, useUi } from '@weareconceptstudio/core';
-import { useAccountContext } from '../../../AccountProvider';
-import { useCheckoutContext } from '../../checkout';
-//* Components
-import { AccountButton, WarningMessageForPopup } from '../../../components';
-import PaymentWrap from '../PaymentWrap';
-//* Style
+import React from 'react';
+import { Text } from '@weareconceptstudio/core';
+import Cards from '../Cards';
 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,
         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: `save`, onClick: handlePaymentMethodChangeSubmit })))));
+            React.createElement(Cards, null))));
 };
 export default PaymentMethodsTemplate;

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

@@ -1,85 +1,7 @@
 import styled from 'styled-components';
 const PaymentStyle = styled.div `
-	--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;
-	}
-
 	.title {
 		font-size: var(--account_p1);
 	}
-
-	.flex-wrapper {
-		margin-top: var(--account_payMethodsWrapMarginT);
-	}
-
-	.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(--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(--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(--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(--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(--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.js

@@ -1,25 +1,12 @@
-import React, { useState } from 'react';
-import { api } from '@weareconceptstudio/core';
+import React from 'react';
 //* Components
-import AddNewCard from '../AddNewCard';
-import Card from '../Card';
+import Cards from '../Cards';
 import PaymentMethods from '../PaymentMethods';
 //* Style
 import PaymentWrapStyle from './style';
-import { useAccountContext } from '../../../AccountProvider';
 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(Card, { key: index, cardOption: card, selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment, deleteCard: deleteCard })))),
+        React.createElement(Cards, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment }),
         React.createElement("div", { className: 'line' }),
         React.createElement(PaymentMethods, { selectedPayment: selectedPayment, setSelectedPayment: setSelectedPayment })));
 };

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

@@ -1,15 +1,9 @@
 import styled from 'styled-components';
 const PaymentWrapStyle = styled.section `
 	--account_selectPaymentWrapMBot: var(--sp5x);
-	--account_payMethodsItemDistance: var(--sp5x);
-	--account_payMethodsItemInternalPad: var(--sp2x);
 	--account_lineMTop: var(--sp4x);
 	--account_lineMBottom: var(--sp4x);
 
-	.new-card-container {
-		position: relative;
-	}
-
 	.select-payment-wrap {
 		display: flex;
 		flex-wrap: wrap;
@@ -18,12 +12,6 @@ const PaymentWrapStyle = styled.section `
 		margin-bottom: var(--account_selectPaymentWrapMBot);
 	}
 
-	.flex-wrapper {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--account_payMethodsItemDistance);
-	}
-
 	.line {
 		width: 100%;
 		height: 2px;
@@ -33,56 +21,42 @@ const PaymentWrapStyle = 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_selectPaymentWrapMBot: var(--sp4x);
-		--account_payMethodsItemDistance: var(--sp4x);
-		--account_payMethodsItemInternalPad: var(--sp2x);
 		--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_selectPaymentWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp3x);
-		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--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_selectPaymentWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp3x);
-		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--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_selectPaymentWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp2x);
-		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--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_selectPaymentWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp3x);
-		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--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_selectPaymentWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp2x);
-		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_lineMTop: var(--sp2x);
 		--account_lineMBottom: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--account_selectPaymentWrapMBot: var(--sp3x);
-		--account_payMethodsItemDistance: var(--sp1x);
-		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_lineMTop: var(--sp2x);
 		--account_lineMBottom: var(--sp2x);
 	}

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

@@ -23,6 +23,6 @@ const SelectedPayment = () => {
             return paymentOptions.find((item) => item.value == checkoutData.paymentType);
         }
     }, [isCardType, checkoutData.paymentType]);
-    return (React.createElement(PaymentMethodItem, { singlePayment: true, isCardType: isCardType, item: selectedItem }));
+    return selectedItem ? (React.createElement(PaymentMethodItem, { singlePayment: true, isCardType: isCardType, item: selectedItem })) : null;
 };
 export default SelectedPayment;

package/package.json

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