@weareconceptstudio/account 0.2.9 → 0.3.1

package/dist/components/AccountButton/style.js

@@ -181,7 +181,8 @@ const AccountButtonStyle = styled.div `
 		}
 	}
 
-	&.promo-code-version {
+	&.promo-code-version,
+	&.muramoney-version {
 		width: fit-content;
 
 		a,

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Text, Image } from '@weareconceptstudio/core';
+//* Style
+import AddNewCardStyle from './style';
+const AddNewCard = ({ title, className }) => {
+    return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}` },
+        React.createElement("div", { className: `new-card-wrap` },
+            React.createElement(Image, { src: '/images/card.svg', alt: 'card', className: 'ard-svg' }),
+            React.createElement(Text, { className: `account-add-card-text account-p account-p3 account-font-medium account-primary-color1`, text: title }))));
+};
+export default AddNewCard;

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

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

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+const AddNewCardStyle = styled.div `
+	--account_addCardTextMTop: var(--sp2x);
+	--account_itemBorderRadius: var(--sp1-5x);
+	--account_itemDistance: var(--sp3x);
+	--account_addCardHeight: var(--sp46x);
+
+	background-color: var(--neutral15);
+	width: calc(50% - var(--account_itemDistance) / 2);
+	height: var(--account_addCardHeight);
+	border-radius: var(--account_itemBorderRadius);
+	cursor: pointer;
+
+	.new-card-wrap {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	.account-add-card-text {
+		text-decoration: underline;
+		margin-top: var(--account_addCardTextMTop);
+	}
+
+	img {
+		position: unset !important;
+		height: unset !important;
+		width: unset !important;
+		inset: unset !important;
+	}
+
+	.image-cont {
+		position: unset !important;
+		padding-top: unset !important;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_addCardTextMTop: var(--sp1-5x);
+		--account_itemDistance: var(--sp3x);
+		--account_addCardHeight: var(--sp35x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_addCardTextMTop: var(--sp1-5x);
+		--account_itemDistance: var(--sp2x);
+		--account_addCardHeight: var(--sp27x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_addCardTextMTop: var(--sp1-5x);
+		--account_itemDistance: var(--sp2x);
+		--account_addCardHeight: var(--sp27x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_addCardTextMTop: var(--sp1x);
+		--account_itemDistance: var(--sp2x);
+		--account_addCardHeight: var(--sp25x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_addCardTextMTop: var(--sp1x);
+		--account_itemDistance: var(--sp2x);
+		--account_addCardHeight: var(--sp24x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_itemBorderRadius: var(--sp1x);
+		--account_addCardTextMTop: var(--sp1x);
+		--account_addCardHeight: var(--sp19x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_addCardTextMTop: var(--sp1x);
+		--account_itemDistance: var(--sp2x);
+		--account_addCardHeight: var(--sp21x);
+		width: 100%;
+
+		.new-card-wrap {
+			left: 46%;
+			transform: translate(-46%, -50%);
+		}
+	}
+`;
+export default AddNewCardStyle;

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

@@ -0,0 +1,9 @@
+export default CardComp;
+declare function CardComp({ cardOption, className, selectedPayment, onSelect, onDelete }: {
+    cardOption: any;
+    className: any;
+    selectedPayment: any;
+    onSelect: any;
+    onDelete: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { Text, Image, useUi } from '@weareconceptstudio/core';
+import WarningMessageForPopup from '../../WarningMessageForPopup';
+import AccountButton from '../../AccountButton';
+//* Style
+import CardCompStyle from './style';
+const isExpired = (expDate) => {
+    const [month, year] = expDate.split('/').map(Number);
+    const expDateObject = new Date(`20${year}`, month, 0);
+    return expDateObject < new Date();
+};
+const CardComp = ({ cardOption, className, selectedPayment, onSelect, onDelete }) => {
+    const expired = isExpired(cardOption.expDate);
+    const { openPopup } = useUi();
+    //! Handle Popups
+    const handleDeletePopup = useCallback(() => {
+        openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteCardMessage', description: 'confirmDeleteCard', onRemove: () => onDelete(cardOption.id) }), {
+            className: 'messagePopup',
+            accountIcon: true,
+        });
+    }, [onDelete, cardOption.id]);
+    return (React.createElement(CardCompStyle, { className: `card-container ${expired ? 'expired' : ''} ${className || ''}` },
+        React.createElement("div", { className: `card-wrap-top` },
+            React.createElement("div", { className: 'card-svg' }, cardOption && cardOption.type === 'MasterCard' ? (React.createElement(Image, { src: '/images/payment/mastercard.svg', alt: 'mastercard', className: 'mastercard-svg' })) : (React.createElement(Image, { src: '/images/payment/visa.svg', alt: 'visa', className: 'visa-svg' }))),
+            !expired ? (React.createElement("div", { key: cardOption.number, className: `circle-selected-wrap cursor-pointer ${selectedPayment === cardOption.number ? 'active' : ''}`, onClick: () => onSelect(cardOption.number) },
+                React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === cardOption.number ? 'selected' : 'note-selected'}` },
+                    React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' })))) : null),
+        React.createElement("div", { className: `card-wrap-center` },
+            React.createElement(Text, { className: `card-full-name account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: cardOption.fullName }),
+            React.createElement(Text, { className: `card-number
+						account-p account-p1 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: cardOption.number })),
+        React.createElement("div", { className: `card-wrap-bottom` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: expired ? 'cardExpired' : `Exp. Date ${cardOption.expDate}` }),
+            React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `account-card-remove-btn account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}` }))));
+};
+export default CardComp;

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

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

@@ -0,0 +1,203 @@
+import styled from 'styled-components';
+const CardCompStyle = styled.div `
+	--account_addCardTextMTop: var(--sp2x);
+	--account_itemBorderRadius: var(--sp1-5x);
+	--account_itemInternalWrapPad: var(--sp4x);
+	--account_itemDistance: var(--sp3x);
+	--account_addCardHeight: var(--sp46x);
+	--account_circleSize: var(--sp4x);
+	--account_checkSize: var(--sp2x);
+
+	background: radial-gradient(1200.63% 320.19% at 200.62% 129.89%, #ff57b9 0%, #d700ff 78.18%);
+	border-radius: var(--account_itemBorderRadius);
+	width: calc(50% - var(--account_itemDistance) / 2);
+	height: var(--account_addCardHeight);
+	padding: var(--account_itemInternalWrapPad);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	&.expired {
+		background: #fff4f8;
+		border: 2px solid var(--account_primaryColor3);
+		width: calc(50% - (var(--account_itemDistance) / 2) - 2px);
+	}
+
+	.card-wrap-top,
+	.card-wrap-bottom {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.card-wrap-center {
+		display: flex;
+		flex-direction: column;
+		gap: 22px;
+	}
+
+	.card-svg {
+		background-color: var(--account_backgroundColor);
+		border-radius: 4px;
+		width: 64px;
+		height: 36px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.card-svg {
+		img {
+			width: 32px !important;
+		}
+		width: 64px;
+		height: 36px;
+	}
+
+	img {
+		position: absolute;
+		height: unset !important;
+		width: unset !important;
+		inset: unset !important;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.image-cont {
+		position: relative;
+		padding-top: unset !important;
+	}
+
+	.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);
+		}
+	}
+
+	.account-card-remove-btn button {
+		font-weight: 400 !important;
+	}
+
+	.account-primary-color3 button {
+		color: var(--account_primaryColor3) !important;
+	}
+	.account_backgroundColor button {
+		color: var(--account_backgroundColor) !important;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_addCardTextMTop: var(--sp2x);
+		--account_itemInternalWrapPad: var(--sp3x);
+		--account_ItemDistance: var(--sp3x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+		--account_addCardHeight: var(--sp35x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_addCardTextMTop: var(--sp2x);
+		--account_itemInternalWrapPad: var(--sp3x);
+		--account_ItemDistance: var(--sp2x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+		--account_addCardHeight: var(--sp27x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_addCardTextMTop: var(--sp1-5x);
+		--account_itemInternalWrapPad: var(--sp3x);
+		--account_ItemDistance: var(--sp2x);
+		--account_circleSize: var(--sp3x);
+		--account_checkSize: var(--sp1-5x);
+		--account_addCardHeight: var(--sp27x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_addCardTextMTop: var(--sp1x);
+		--account_itemInternalWrapPad: var(--sp2x);
+		--account_circleSize: var(--sp2-5x);
+		--account_ItemDistance: var(--sp2x);
+		--account_checkSize: var(--sp1x);
+		--account_addCardHeight: var(--sp25x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_addCardTextMTop: var(--sp1x);
+		--account_itemInternalWrapPad: var(--sp2x);
+		--account_ItemDistance: var(--sp2x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+		--account_addCardHeight: var(--sp24x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_addCardHeight: 167px;
+		--account_itemBorderRadius: var(--sp1x);
+		--account_itemInternalWrapPad: var(--sp2x);
+		--account_ItemDistance: var(--sp2x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+		--account_addCardHeight: var(--sp19x);
+
+		.card-wrap-center {
+			gap: 4px;
+		}
+
+		.card-svg {
+			img {
+				width: 23px !important;
+			}
+			width: 38px;
+			height: 22px;
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_addCardHeight: 139px;
+		--account_addCardTextMTop: var(--sp0-5x);
+		--account_itemInternalWrapPad: var(--sp1-5x);
+		--account_ItemDistance: var(--sp2x);
+		--account_circleSize: var(--sp2-5x);
+		--account_checkSize: var(--sp1x);
+		--account_addCardHeight: var(--sp21x);
+
+		width: 100% !important;
+
+		.card-wrap-center {
+			gap: 4px;
+		}
+
+		.card-svg {
+			img {
+				width: 23px !important;
+			}
+			width: 38px;
+			height: 22px;
+		}
+	}
+`;
+export default CardCompStyle;

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CollapseContainer, CollapseItem, Text } from '@weareconceptstudio/core';
+import { Input } from '@weareconceptstudio/form';
+import CommentCompStyle from './style';
+const CommentComp = () => {
+    return (React.createElement(CommentCompStyle, { className: 'collapse-distance' },
+        React.createElement(CollapseContainer, null,
+            React.createElement(CollapseItem, { status: 'open', title: React.createElement(React.Fragment, null,
+                    React.createElement("div", null,
+                        React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
+                            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 comment-text', text: 'comment' })), description: React.createElement(Input.TextArea, { containerClassName: `comment-field`, placeholder: 'checkoutCommentPlaceholder', onChange: (e) => fillCheckoutData('note', e.target.value), className: `account-p account-p3 account-font-regular account-primary-color1` }) }))));
+};
+export default CommentComp;

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

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+const CommentCompStyle = styled.div `
+	border-top: 1px solid rgba(0, 0, 0, 0.4);
+
+	/* //! 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+	}
+
+	/* //! Mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+	}
+`;
+export default CommentCompStyle;

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

@@ -1,6 +1,6 @@
 export default FreeShippingComp;
-declare function FreeShippingComp({ fakeShippingCost, freeShippingRange, shippingCost, currency }: {
-    fakeShippingCost: any;
+declare function FreeShippingComp({ shippingCostValue, freeShippingRange, shippingCost, currency }: {
+    shippingCostValue: any;
     freeShippingRange: any;
     shippingCost: any;
     currency: any;

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { useTranslation } from '@weareconceptstudio/core';
-import { handlePriceCheckFunc } from '../../../utils/_functions';
+import { handlePriceCheckFunc, useTranslation } from '@weareconceptstudio/core';
 //* Style
 import FreeShippingCompStyle from './style';
-const FreeShippingComp = ({ fakeShippingCost, freeShippingRange, shippingCost, currency }) => {
+const FreeShippingComp = ({ shippingCostValue, freeShippingRange, shippingCost, currency }) => {
     const { translate } = useTranslation();
     return freeShippingRange ? (React.createElement(FreeShippingCompStyle, null,
         React.createElement("svg", { fill: 'none', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
@@ -17,7 +16,7 @@ const FreeShippingComp = ({ fakeShippingCost, freeShippingRange, shippingCost, c
         React.createElement("span", { className: 'free-shipping-comp-attr' },
             React.createElement("span", null, translate('youHaveReachedFreeShipping')),
             React.createElement("span", { className: 'range-value' },
-                handlePriceCheckFunc(fakeShippingCost, currency),
+                handlePriceCheckFunc(shippingCostValue, currency),
                 "!")))) : null;
 };
 export default FreeShippingComp;

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

@@ -10,7 +10,7 @@ const FreeShippingCompStyle = styled.div `
 	gap: var(--account_freeShippingAttrGap);
 
 	margin: var(--account_freeShippingBlockDistance) 0;
-	margin-bottom: calc(var(--account_freeShippingBlockDistance) - var(--sp2x));
+	margin-bottom: 0;
 	background-color: var(--account_surfaceColor);
 	padding: var(--account_freeShippingBlockPadTB) var(--account_freeShippingBlockPadLR);
 	border-radius: var(--sp1x);

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

@@ -0,0 +1,9 @@
+export default MuramoneyComp;
+declare function MuramoneyComp({ isMuramoney, currency, balance, useBalance, balanceHandler }: {
+    isMuramoney?: boolean;
+    currency: any;
+    balance: any;
+    useBalance: any;
+    balanceHandler: any;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Text, CollapseItem, useTranslation, handlePriceCheckFunc } from '@weareconceptstudio/core';
+import { FormBuilder } from '@weareconceptstudio/form';
+import AccountButton from '../../AccountButton';
+import { balanceFields } from './utils';
+//* Style
+import MuramoneyCompStyle from './style';
+const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, balanceHandler }) => {
+    const { translate } = useTranslation();
+    //! States
+    const [disable, setDisable] = useState(false);
+    //! On Finish
+    const onFinish = (values) => {
+        setDisable(true);
+        balanceHandler(values.balance);
+    };
+    return isMuramoney ? (React.createElement(MuramoneyCompStyle, { className: 'collapse-distance' },
+        React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
+                React.createElement("div", null,
+                    React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
+                        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 muramoney-text' }, `${translate('useYourMoney')} (${handlePriceCheckFunc(balance, currency)} ${translate('balanceLowercase')})`)), description: React.createElement(React.Fragment, null, useBalance ? (React.createElement("div", { className: `muramoney-success-block` },
+                React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-success-text' }, handlePriceCheckFunc(useBalance, currency)),
+                React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-remove-text', onClick: () => {
+                        balanceHandler(null);
+                    } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `muramoney-block`, formOptions: {
+                    className: 'muramoney-container',
+                } },
+                React.createElement(AccountButton, { text: `add`, type: 'submit', btnType: `muramoney-version` })))) }))) : null;
+};
+export default MuramoneyComp;

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

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

@@ -0,0 +1,117 @@
+import styled from 'styled-components';
+const MuramoneyCompStyle = styled.div `
+	--account_muramoneyCompDistance: var(--sp5x);
+
+	--account_muramoneyInputPadTB: var(--sp2x);
+	--account_muramoneyInputPadLR: var(--sp2x);
+	--account_muramoneyContainerGap: var(--sp2x);
+
+	border-top: 1px solid rgba(0, 0, 0, 0.4);
+
+	.muramoney-container {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--account_muramoneyContainerGap);
+	}
+
+	.muramoney-version {
+		width: fit-content !important;
+		height: fit-content !important;
+		margin-top: unset !important;
+	}
+
+	.muramoney-block {
+		flex: 1;
+
+		.base-input {
+			padding: var(--account_muramoneyInputPadTB) var(--account_muramoneyInputPadLR) !important;
+			border: 2px solid var(--account_primaryColor2) !important;
+		}
+	}
+
+	.muramoney-text {
+		width: fit-content;
+		transition: color var(--account_trTime) ease-out;
+		cursor: pointer;
+	}
+
+	.muramoney-success-block {
+		display: flex;
+		gap: var(--account_muramoneyContainerGap);
+		justify-content: space-between;
+		padding: var(--account_muramoneyInputPadTB) var(--account_muramoneyInputPadLR);
+		border-radius: var(--sp1x);
+		border: 2px solid var(--account_surfaceColor);
+		background-color: var(--account_surfaceColor);
+	}
+
+	.muramoney-remove-text {
+		text-decoration-line: underline;
+		text-decoration-style: solid;
+		text-decoration-skip-ink: none;
+		text-decoration-thickness: auto;
+		text-underline-offset: auto;
+		text-underline-position: from-font;
+		transition: color var(--account_trTime) ease-out;
+		cursor: pointer;
+
+		/* //! Mouse Detect */
+		@media (pointer: fine) {
+			@media (hover: hover) {
+				&:hover {
+					color: var(--account_primaryColor3);
+				}
+			}
+		}
+	}
+
+	/* //! 1920 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_muramoneyCompDistance: var(--sp3-5x);
+
+		--account_muramoneyContainerGap: var(--sp2x);
+	}
+
+	/* //! 1510 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_muramoneyCompDistance: var(--sp4x);
+
+		--account_muramoneyContainerGap: var(--sp2x);
+	}
+
+	/* //! 1440 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_muramoneyCompDistance: var(--sp3x);
+
+		--account_muramoneyContainerGap: var(--sp2x);
+	}
+
+	/* //! 1280 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_muramoneyCompDistance: var(--sp3x);
+
+		--account_muramoneyContainerGap: var(--sp1x);
+	}
+
+	/* //! 1024 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_muramoneyCompDistance: var(--sp3x);
+
+		--account_muramoneyContainerGap: var(--sp1x);
+	}
+
+	/* //! 768 */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_muramoneyCompDistance: var(--sp3x);
+
+		--account_muramoneyContainerGap: var(--sp1x);
+	}
+
+	/* //! Mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_muramoneyCompDistance: var(--sp3x);
+
+		--account_muramoneyContainerGap: var(--sp1x);
+	}
+`;
+export default MuramoneyCompStyle;

package/dist/components/TotalCheckout/MuramoneyComp/utils.d.ts

@@ -0,0 +1,10 @@
+export declare const balanceFields: {
+    fieldType: string;
+    labelProps: {
+        name: string;
+        errorKey: string;
+    };
+    fieldProps: {
+        placeholder: string;
+    };
+}[];