@weareconceptstudio/account 0.3.2 → 0.3.4

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

@@ -1,6 +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);
@@ -15,29 +16,18 @@ 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;
-	}
-
-	.line {
-		width: 100%;
-		height: 2px;
-		background-color: var(--account_primaryColor5);
-		margin: var(--account_lineMTop) 0 var(--account_lineMBottom);
-	}
-
-	.custom-payment-options {
-		width: var(--account_radioWrapperWidth) !important;
+	.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);
@@ -45,6 +35,7 @@ const PaymentStyle = 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_payMethodsItemDistance: var(--sp4x);
+		--account_payButtonMarginT: var(--sp4x);
 		--account_payMethodsWrapMarginT: var(--sp3x);
 		--account_lineMTop: var(--sp3x);
 		--account_lineMBottom: var(--sp4x);
@@ -52,6 +43,7 @@ const PaymentStyle = 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_payMethodsItemDistance: var(--sp3x);
+		--account_payButtonMarginT: var(--sp4x);
 		--account_payMethodsWrapMarginT: var(--sp3x);
 		--account_lineMTop: var(--sp3x);
 		--account_lineMBottom: var(--sp3x);
@@ -59,6 +51,7 @@ const PaymentStyle = 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_payMethodsItemDistance: var(--sp2x);
+		--account_payButtonMarginT: var(--sp3x);
 		--account_payMethodsWrapMarginT: var(--sp3x);
 		--account_lineMTop: var(--sp2-5x);
 		--account_lineMBottom: var(--sp2x);
@@ -66,6 +59,7 @@ const PaymentStyle = 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_payMethodsItemDistance: var(--sp3x);
+		--account_payButtonMarginT: var(--sp3x);
 		--account_payMethodsWrapMarginT: var(--sp2x);
 		--account_lineMTop: var(--sp2-5x);
 		--account_lineMBottom: var(--sp2x);
@@ -73,6 +67,7 @@ const PaymentStyle = styled.div `
 
 	@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);
@@ -80,6 +75,7 @@ const PaymentStyle = styled.div `
 
 	@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);

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,8 +1,6 @@
 import styled from 'styled-components';
-const SelectPaymentMethodPopupStyle = styled.section `
-	--account_cancelAndSaveWrapMTop: var(--sp5x);
-	--account_cancelDistance: var(--sp5x);
-	--account_selectAddressWrapMBot: var(--sp5x);
+const PaymentWrapStyle = styled.section `
+	--account_selectPaymentWrapMBot: var(--sp5x);
 	--account_payMethodsItemDistance: var(--sp5x);
 	--account_payMethodsItemInternalPad: var(--sp2x);
 	--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
@@ -18,7 +16,7 @@ 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 {
@@ -32,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;
@@ -53,9 +38,7 @@ 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_selectPaymentWrapMBot: var(--sp4x);
 		--account_payMethodsItemDistance: var(--sp5x);
 		--account_payMethodsItemInternalPad: var(--sp2x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
@@ -64,9 +47,7 @@ const SelectPaymentMethodPopupStyle = styled.section `
 	}
 
 	@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_selectPaymentWrapMBot: var(--sp3x);
 		--account_payMethodsItemDistance: var(--sp4x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
@@ -75,9 +56,7 @@ const SelectPaymentMethodPopupStyle = styled.section `
 	}
 
 	@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_selectPaymentWrapMBot: var(--sp3x);
 		--account_payMethodsItemDistance: var(--sp3x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
@@ -86,9 +65,7 @@ const SelectPaymentMethodPopupStyle = styled.section `
 	}
 
 	@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);
@@ -97,9 +74,7 @@ const SelectPaymentMethodPopupStyle = styled.section `
 	}
 
 	@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_selectPaymentWrapMBot: var(--sp3x);
 		--account_payMethodsItemDistance: var(--sp3x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: calc(50% - var(--account_payMethodsItemDistance) / 2);
@@ -108,9 +83,7 @@ const SelectPaymentMethodPopupStyle = styled.section `
 	}
 
 	@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);
@@ -119,29 +92,12 @@ const SelectPaymentMethodPopupStyle = styled.section `
 	}
 
 	@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_selectPaymentWrapMBot: var(--sp3x);
 		--account_payMethodsItemDistance: var(--sp1x);
 		--account_payMethodsItemInternalPad: var(--sp1-5x);
 		--account_radioWrapperWidth: 100%;
 		--account_lineMTop: var(--sp2x);
 		--account_lineMBottom: 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;
+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;

package/dist/translations/en.d.ts

@@ -37,6 +37,8 @@ declare const _default: {
     accountSettings: string;
     orderHistory: string;
     signOut: string;
+    name: string;
+    namePlaceholder: string;
     firstName: string;
     first_name: string;
     firstNamePlaceholder: string;
@@ -88,6 +90,7 @@ declare const _default: {
     inProgress: string;
     orderDetails: string;
     deliverDate: string;
+    usedBalance: string;
     sortBy: string;
     sortByWithSymbol: string;
     delivered: string;

package/dist/translations/en.js

@@ -37,6 +37,9 @@ export default {
     accountSettings: 'Account settings',
     orderHistory: 'Order history',
     signOut: 'Sign out',
+    //! Name
+    name: 'Name',
+    namePlaceholder: 'Name',
     //! First Name
     firstName: 'First name',
     first_name: 'First name:',
@@ -96,6 +99,7 @@ export default {
     inProgress: 'In progress',
     orderDetails: 'Order details',
     deliverDate: 'Deliver date',
+    usedBalance: 'Used Balance',
     sortBy: 'Sort by',
     sortByWithSymbol: 'Sort by:',
     delivered: 'Delivered',

package/dist/translations/hy.d.ts

@@ -37,6 +37,8 @@ declare const _default: {
     accountSettings: string;
     orderHistory: string;
     signOut: string;
+    name: string;
+    namePlaceholder: string;
     firstName: string;
     first_name: string;
     firstNamePlaceholder: string;
@@ -88,6 +90,7 @@ declare const _default: {
     inProgress: string;
     orderDetails: string;
     deliverDate: string;
+    usedBalance: string;
     sortBy: string;
     sortByWithSymbol: string;
     delivered: string;

package/dist/translations/hy.js

@@ -37,6 +37,9 @@ export default {
     accountSettings: 'Account settings',
     orderHistory: 'Order history',
     signOut: 'Sign out',
+    //! Name
+    name: 'Name',
+    namePlaceholder: 'Name',
     //! First Name
     firstName: 'First name',
     first_name: 'First name:',
@@ -96,6 +99,7 @@ export default {
     inProgress: 'In progress',
     orderDetails: 'Order details',
     deliverDate: 'Deliver date',
+    usedBalance: 'Used Balance',
     sortBy: 'Sort by',
     sortByWithSymbol: 'Sort by:',
     delivered: 'Delivered',

package/dist/translations/index.d.ts

@@ -38,6 +38,8 @@ declare const _default: {
         accountSettings: string;
         orderHistory: string;
         signOut: string;
+        name: string;
+        namePlaceholder: string;
         firstName: string;
         first_name: string;
         firstNamePlaceholder: string;
@@ -89,6 +91,7 @@ declare const _default: {
         inProgress: string;
         orderDetails: string;
         deliverDate: string;
+        usedBalance: string;
         sortBy: string;
         sortByWithSymbol: string;
         delivered: string;
@@ -244,6 +247,8 @@ declare const _default: {
         accountSettings: string;
         orderHistory: string;
         signOut: string;
+        name: string;
+        namePlaceholder: string;
         firstName: string;
         first_name: string;
         firstNamePlaceholder: string;
@@ -295,6 +300,7 @@ declare const _default: {
         inProgress: string;
         orderDetails: string;
         deliverDate: string;
+        usedBalance: string;
         sortBy: string;
         sortByWithSymbol: string;
         delivered: string;
@@ -450,6 +456,8 @@ declare const _default: {
         accountSettings: string;
         orderHistory: string;
         signOut: string;
+        name: string;
+        namePlaceholder: string;
         firstName: string;
         first_name: string;
         firstNamePlaceholder: string;
@@ -501,6 +509,7 @@ declare const _default: {
         inProgress: string;
         orderDetails: string;
         deliverDate: string;
+        usedBalance: string;
         sortBy: string;
         sortByWithSymbol: string;
         delivered: string;

package/dist/translations/ru.d.ts

@@ -37,6 +37,8 @@ declare const _default: {
     accountSettings: string;
     orderHistory: string;
     signOut: string;
+    name: string;
+    namePlaceholder: string;
     firstName: string;
     first_name: string;
     firstNamePlaceholder: string;
@@ -88,6 +90,7 @@ declare const _default: {
     inProgress: string;
     orderDetails: string;
     deliverDate: string;
+    usedBalance: string;
     sortBy: string;
     sortByWithSymbol: string;
     delivered: string;

package/dist/translations/ru.js

@@ -37,6 +37,9 @@ export default {
     accountSettings: 'Account settings',
     orderHistory: 'Order history',
     signOut: 'Sign out',
+    //! Name
+    name: 'Name',
+    namePlaceholder: 'Name',
     //! First Name
     firstName: 'First name',
     first_name: 'First name:',
@@ -96,6 +99,7 @@ export default {
     inProgress: 'In progress',
     orderDetails: 'Order details',
     deliverDate: 'Deliver date',
+    usedBalance: 'Used Balance',
     sortBy: 'Sort by',
     sortByWithSymbol: 'Sort by:',
     delivered: 'Delivered',

package/package.json

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

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

@@ -1,3 +0,0 @@
-export default SelectPaymentMethodPopup;
-declare const SelectPaymentMethodPopup: React.MemoExoticComponent<() => React.JSX.Element>;
-import React from 'react';

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

@@ -1,35 +0,0 @@
-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';
-import { useCheckoutContext } from '../../../modules';
-import { useAccountContext } from '../../../AccountProvider';
-const SelectPaymentMethodPopup = Memo(() => {
-    const { closePopup } = useUi();
-    const { useUser } = useAccountContext();
-    const { checkoutData, fillCheckoutData } = useCheckoutContext();
-    const [selectedPaymentType, setSelectedPaymentType] = useState(checkoutData.paymentType);
-    const [selectedCard, setSelectedCard] = useState('');
-    const { user } = useUser();
-    const handlePaymentMethodChangeSubmit = () => {
-        fillCheckoutData('paymentType', selectedPaymentType);
-        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("div", { className: `flex-wrapper` },
-            React.createElement(AddNewCard, { title: 'addNewCard' }),
-            user?.cards?.map((card, index) => (React.createElement(CardComp, { key: index, cardOption: card, selectedPayment: selectedCard, onSelect: setSelectedCard })))),
-        React.createElement("div", { className: 'line' }),
-        React.createElement(PaymentMethodsComp, { checkoutData: { ...checkoutData, paymentType: selectedPaymentType }, selectPayment: setSelectedPaymentType, selectedPayment: selectedPaymentType, 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;