@weareconceptstudio/account 0.2.5 → 0.2.7

package/dist/components/AccountButton/style.js

@@ -4,12 +4,16 @@ const AccountButtonStyle = styled.div `
 	--account_btnPadLR: var(--sp8x);
 	--account_btnBorderRad: var(--sp1x);
 
-	//! Small icons wrap sizes
+	/* //! Small icons wrap sizes */
 	--account_wrapSize: var(--sp7x);
 
-	//! Small icons size
+	/* //! Small icons size */
 	--account_smallIconsSize: var(--sp2-5x);
 
+	/* //! Promo Code Version */
+	--account_promoCodeVersionPadTB: var(--sp2x);
+	--account_promoCodeVersionPadLR: var(--sp7x);
+
 	display: inline-flex;
 
 	button,
@@ -27,7 +31,8 @@ const AccountButtonStyle = styled.div `
 		border-radius: var(--account_btnBorderRad);
 		transition:
 			background-color var(--account_trTime) ease-out,
-			border var(--account_trTime) ease-out;
+			border var(--account_trTime) ease-out,
+			color var(--account_trTime) ease-out;
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;
@@ -35,10 +40,13 @@ const AccountButtonStyle = styled.div `
 		isolation: isolate;
 		-webkit-appearance: none;
 
-		@media (hover: hover) {
-			&:hover {
-				background-color: var(--account_secondaryColor9);
-				border: 2px solid var(--account_secondaryColor9);
+		/* //! Mouse Detect */
+		@media (pointer: fine) {
+			@media (hover: hover) {
+				&:hover {
+					background-color: var(--account_secondaryColor9);
+					border: 2px solid var(--account_secondaryColor9);
+				}
 			}
 		}
 	}
@@ -57,10 +65,12 @@ const AccountButtonStyle = styled.div `
 			border: 2px solid var(--account_primaryColor14);
 			color: var(--account_primaryColor14);
 
-			@media (hover: hover) {
-				&:hover {
-					border: 2px solid var(--account_secondaryColor9);
-					color: var(--account_secondaryColor9);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						border: 2px solid var(--account_secondaryColor9);
+						color: var(--account_secondaryColor9);
+					}
 				}
 			}
 		}
@@ -79,9 +89,11 @@ const AccountButtonStyle = styled.div `
 			text-decoration: underline;
 			transition: color var(--account_trTime);
 
-			@media (hover: hover) {
-				&:hover {
-					color: var(--account_secondaryColor9);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						color: var(--account_secondaryColor9);
+					}
 				}
 			}
 		}
@@ -101,9 +113,11 @@ const AccountButtonStyle = styled.div `
 			text-decoration: underline;
 			transition: color var(--account_trTime);
 
-			@media (hover: hover) {
-				&:hover {
-					color: var(--account_primaryColor1);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						color: var(--account_primaryColor1);
+					}
 				}
 			}
 		}
@@ -122,9 +136,11 @@ const AccountButtonStyle = styled.div `
 			text-decoration: underline;
 			transition: color var(--account_trTime);
 
-			@media (hover: hover) {
-				&:hover {
-					color: var(--account_primaryColor3);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						color: var(--account_primaryColor3);
+					}
 				}
 			}
 		}
@@ -149,14 +165,41 @@ const AccountButtonStyle = styled.div `
 				fill: var(--account_primaryColor1);
 			}
 
-			@media (hover: hover) {
-				&:hover {
-					color: unset;
-					background-color: var(--account_primaryColor1);
-					border: 2px solid var(--account_primaryColor1);
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						color: unset;
+						background-color: var(--account_primaryColor1);
+						border: 2px solid var(--account_primaryColor1);
+
+						svg {
+							fill: var(--account_backgroundColor);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.promo-code-version {
+		width: fit-content;
 
-					svg {
-						fill: var(--account_backgroundColor);
+		a,
+		button {
+			padding: var(--account_promoCodeVersionPadTB) var(--account_promoCodeVersionPadLR);
+			font-size: var(--account_p4);
+			font-weight: 500;
+			background-color: var(--account_backgroundColor);
+			border: 2px solid var(--account_primaryColor2);
+			color: var(--account_primaryColor2);
+
+			/* //! Mouse Detect */
+			@media (pointer: fine) {
+				@media (hover: hover) {
+					&:hover {
+						background-color: var(--account_primaryColor1);
+						border: 2px solid var(--account_primaryColor1);
+						color: var(--account_backgroundColor);
 					}
 				}
 			}
@@ -177,77 +220,105 @@ const AccountButtonStyle = styled.div `
 		--account_btnPadTB: var(--sp2x);
 		--account_btnPadLR: var(--sp7x);
 
-		//! Small icons wrap sizes
+		/* //! Small icons wrap sizes */
 		--account_wrapSize: var(--sp6x);
 
-		//! Small icons size
+		/* //! Small icons size */
 		--account_smallIconsSize: var(--sp2x);
+
+		/* //! Promo Code Version */
+		--account_promoCodeVersionPadTB: var(--sp2x);
+		--account_promoCodeVersionPadLR: var(--sp7x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
 		--account_btnPadTB: var(--sp1-5x);
 		--account_btnPadLR: var(--sp6x);
 
-		//! Small icons wrap sizes
+		/* //! Small icons wrap sizes */
 		--account_wrapSize: var(--sp5x);
 
-		//! Small icons size
+		/* //! Small icons size */
 		--account_smallIconsSize: var(--sp1-5x);
+
+		/* //! Promo Code Version */
+		--account_promoCodeVersionPadTB: var(--sp2x);
+		--account_promoCodeVersionPadLR: 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_btnPadTB: var(--sp1-5x);
 		--account_btnPadLR: var(--sp6x);
 
-		//! Small icons wrap sizes
+		/* //! Small icons wrap sizes */
 		--account_wrapSize: var(--sp5x);
 
-		//! Small icons size
+		/* //! Small icons size */
 		--account_smallIconsSize: var(--sp1-5x);
+
+		/* //! Promo Code Version */
+		--account_promoCodeVersionPadTB: var(--sp2x);
+		--account_promoCodeVersionPadLR: var(--sp4x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
 		--account_btnPadTB: var(--sp1-5x);
 		--account_btnPadLR: var(--sp6x);
 
-		//! Small icons wrap sizes
+		/* //! Small icons wrap sizes */
 		--account_wrapSize: var(--sp5x);
 
-		//! Small icons size
+		/* //! Small icons size */
 		--account_smallIconsSize: var(--sp1-5x);
+
+		/* //! Promo Code Version */
+		--account_promoCodeVersionPadTB: var(--sp2x);
+		--account_promoCodeVersionPadLR: var(--sp4x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
 		--account_btnPadTB: var(--sp1x);
 		--account_btnPadLR: var(--sp5x);
 
-		//! Small icons wrap sizes
+		/* //! Small icons wrap sizes */
 		--account_wrapSize: var(--sp5x);
 
-		//! Small icons size
+		/* //! Small icons size */
 		--account_smallIconsSize: var(--sp1-5x);
+
+		/* //! Promo Code Version */
+		--account_promoCodeVersionPadTB: var(--sp2x);
+		--account_promoCodeVersionPadLR: var(--sp4x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
 		--account_btnPadTB: var(--sp1-5x);
 		--account_btnPadLR: var(--sp5x);
 
-		//! Small icons wrap sizes
+		/* //! Small icons wrap sizes */
 		--account_wrapSize: var(--sp5x);
 
-		//! Small icons size
+		/* //! Small icons size */
 		--account_smallIconsSize: var(--sp1-5x);
+
+		/* //! Promo Code Version */
+		--account_promoCodeVersionPadTB: var(--sp2x);
+		--account_promoCodeVersionPadLR: var(--sp4x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
 		--account_btnPadTB: var(--sp1-5x);
 		--account_btnPadLR: var(--sp3x);
 
-		//! Small icons wrap sizes
+		/* //! Small icons wrap sizes */
 		--account_wrapSize: var(--sp4x);
 
-		//! Small icons size
+		/* //! Small icons size */
 		--account_smallIconsSize: var(--sp1-5x);
+
+		/* //! Promo Code Version */
+		--account_promoCodeVersionPadTB: var(--sp2x);
+		--account_promoCodeVersionPadLR: var(--sp4x);
 	}
 `;
 export default AccountButtonStyle;

package/dist/components/AccountContainer/index.d.ts

@@ -1,3 +1,10 @@
-export default AccountContainer;
-declare const AccountContainer: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+type AccountContainerProps = {
+    row?: boolean;
+    isSection?: boolean;
+    full?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+declare const AccountContainer: React.ForwardRefExoticComponent<AccountContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default AccountContainer;

package/dist/components/AccountContainer/index.js

@@ -3,14 +3,15 @@ import React, { useRef, useImperativeHandle, forwardRef } from 'react';
 import classNames from 'classnames';
 //* Style
 import AccountContainerStyle from './style';
-const AccountContainer = forwardRef(({ row, isSection, full, className, children }, ref) => {
+const AccountContainer = forwardRef((props, ref) => {
+    const { row, isSection, full, className, children } = props;
     //! Ref
     const contRef = useRef(null);
     //! Imperative Handle
     useImperativeHandle(ref, () => contRef.current, []);
     //! ClassName
     const classString = classNames('container', {
-        [className]: className,
+        [className || '']: !!className,
         ['section']: isSection,
         ['full']: full,
     });

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

@@ -0,0 +1,8 @@
+export default FreeShippingComp;
+declare function FreeShippingComp({ fakeShippingCost, freeShippingRange, shippingCost, currency }: {
+    fakeShippingCost: any;
+    freeShippingRange: any;
+    shippingCost: any;
+    currency?: string;
+}): React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from '@weareconceptstudio/core';
+import { handlePriceCheckFunc } from '../../../utils/_functions';
+//* Style
+import FreeShippingCompStyle from './style';
+const FreeShippingComp = ({ fakeShippingCost, freeShippingRange, shippingCost, currency = 'AMD' }) => {
+    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' },
+            React.createElement("path", { d: 'M21.675 14.475V9.9L17.925 6.15H15.375V4.125H2.85C2.325 4.725 2.025 5.025 1.5 5.55V16.65H3.3C3.3 18.375 4.725 19.8 6.45 19.8C8.175 19.8 9.6 18.375 9.6 16.65H13.35C13.35 18.375 14.775 19.8 16.5 19.8C18.225 19.8 19.65 18.375 19.65 16.65H22.35V14.475H21.675ZM6.45 18.6C5.475 18.6 4.65 17.775 4.65 16.8C4.65 15.825 5.475 15 6.45 15C7.425 15 8.25 15.825 8.25 16.8C8.25 17.775 7.5 18.6 6.45 18.6ZM16.575 18.6C15.6 18.6 14.775 17.775 14.775 16.8C14.775 15.825 15.6 15 16.575 15C17.55 15 18.375 15.825 18.375 16.8C18.375 17.775 17.625 18.6 16.575 18.6ZM19.575 11.1H15.375V7.95H17.025L19.575 10.5V11.1Z' })),
+        React.createElement("span", { className: 'free-shipping-comp-attr' },
+            React.createElement("span", null, translate('freeShippingText1')),
+            React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(freeShippingRange, currency)),
+            React.createElement("span", null, translate('freeShippingText2'))))) : typeof shippingCost != 'number' ? (React.createElement(FreeShippingCompStyle, null,
+        React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', className: 'free-shipping-comp-icon' },
+            React.createElement("path", { d: 'M13.901 5.06321C13.835 5.1324 13.754 5.167 13.658 5.167C13.562 5.167 13.481 5.1324 13.415 5.06321L13.388 5.03491C13.2081 4.84621 12.9981 4.74871 12.7611 4.74242C12.5241 4.73613 12.3111 4.83363 12.1191 5.03491L8.90036 8.40947C8.83437 8.47866 8.75337 8.51326 8.65738 8.51326C8.56139 8.51326 8.48039 8.47866 8.4144 8.40947C8.3484 8.34028 8.3154 8.25537 8.3154 8.15473C8.3154 8.05409 8.3484 7.96917 8.4144 7.89998L11.5912 4.56945C11.8941 4.25181 12.2811 4.08827 12.7461 4.08512C13.2111 4.07883 13.595 4.23608 13.901 4.55687C13.967 4.62606 14 4.71097 14 4.81161C14 4.91225 13.967 4.99717 13.901 5.06636V5.06321ZM6.17655 3.19509C6.24255 3.1259 6.32354 3.09131 6.41954 3.09131C6.51553 3.09131 6.59652 3.1259 6.66252 3.19509L6.79151 3.33033C7.12449 3.67942 7.28648 4.11343 7.28348 4.63864C7.27748 5.16071 7.10949 5.59786 6.77651 5.94695L6.63552 6.09477C6.56953 6.16396 6.48853 6.19855 6.39254 6.19855C6.29655 6.19855 6.21555 6.16396 6.14956 6.09477C6.08356 6.02558 6.05056 5.94066 6.05056 5.84002C6.05056 5.73938 6.08356 5.65447 6.14956 5.58528L6.33554 5.39029C6.55453 5.16071 6.65652 4.89967 6.64152 4.60719C6.62652 4.31471 6.52453 4.06625 6.33554 3.86812L6.17955 3.70458C6.11356 3.63539 6.08056 3.55048 6.08056 3.44984C6.08056 3.3492 6.11356 3.26428 6.17955 3.19509H6.17655ZM8.58538 2.10378C8.65138 2.03459 8.73237 2 8.82837 2C8.92436 2 9.00535 2.03459 9.07135 2.10378L9.7253 2.78939C10.0193 3.10703 10.1723 3.50959 10.1813 3.99077C10.1903 4.4751 10.0433 4.87451 9.7403 5.19216L7.78744 7.23954C7.72145 7.30873 7.64045 7.34332 7.54446 7.34332C7.44846 7.34332 7.36747 7.30873 7.30147 7.23954C7.23548 7.17035 7.20248 7.08543 7.20248 6.9848C7.20248 6.88416 7.23548 6.79924 7.30147 6.73005L9.22434 4.71412C9.40433 4.52542 9.49132 4.28326 9.48832 3.99077C9.48232 3.69829 9.39233 3.45613 9.20934 3.26743L8.58238 2.61013C8.51639 2.54094 8.48339 2.45602 8.48339 2.35538C8.48339 2.25474 8.51639 2.16983 8.58238 2.10064L8.58538 2.10378ZM12.8601 9.64859C12.7941 9.71778 12.7131 9.75238 12.6171 9.75238C12.5211 9.75238 12.4401 9.71778 12.3741 9.64859L11.8761 9.12653C11.6572 8.89694 11.4292 8.78372 11.1922 8.78372C10.9552 8.78372 10.7272 8.89694 10.5082 9.12653L10.0373 9.62029C9.97129 9.68948 9.89029 9.72407 9.7943 9.72407C9.6983 9.72407 9.61731 9.68948 9.55131 9.62029C9.48532 9.5511 9.45232 9.46619 9.45232 9.36555C9.45232 9.26491 9.48532 9.17999 9.55131 9.1108L9.97728 8.66422C10.3103 8.31512 10.7092 8.13586 11.1742 8.12642C11.6392 8.11699 12.0381 8.28682 12.3711 8.63277L12.8541 9.13911C12.9201 9.2083 12.9531 9.29321 12.9531 9.39385C12.9531 9.49449 12.9201 9.5794 12.8541 9.64859H12.8601ZM2.36082 13.9855L9.01435 11.501C9.20034 11.4318 9.25434 11.1802 9.11335 11.0355L4.81765 6.6074C4.67666 6.46273 4.44268 6.51934 4.37668 6.71433L2.01585 13.6239C1.94085 13.8471 2.14484 14.0641 2.35783 13.9824L2.36082 13.9855Z' })),
+        React.createElement("span", { className: 'free-shipping-comp-attr' },
+            React.createElement("span", null, translate('youHaveReachedFreeShipping1')),
+            React.createElement("span", { className: 'range-value' }, handlePriceCheckFunc(fakeShippingCost, currency)),
+            React.createElement("span", null, translate('youHaveReachedFreeShipping2'))))) : null;
+};
+export default FreeShippingComp;

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

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

@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+const FreeShippingCompStyle = styled.div `
+	--account_freeShippingBlockDistance: var(--sp5x);
+	--account_freeShippingBlockPadTB: var(--sp2-5x);
+	--account_freeShippingBlockPadLR: var(--sp2-5x);
+	--account_freeShippingIconSize: var(--sp3x);
+	--account_freeShippingAttrGap: var(--sp1-5x);
+
+	display: flex;
+	gap: var(--account_freeShippingAttrGap);
+
+	margin: var(--account_freeShippingBlockDistance) 0;
+	margin-bottom: calc(var(--account_freeShippingBlockDistance) - var(--sp2x));
+	background-color: var(--account_surfaceColor);
+	padding: var(--account_freeShippingBlockPadTB) var(--account_freeShippingBlockPadLR);
+	border-radius: var(--sp1x);
+
+	.free-shipping-comp-icon {
+		max-width: var(--account_freeShippingIconSize);
+		width: 100%;
+		height: var(--account_freeShippingIconSize);
+		fill: var(--account_primaryColor3);
+	}
+
+	.free-shipping-comp-attr {
+		color: var(--account_primaryColor2);
+		font-family: var(--account_Font);
+		font-size: var(--account_p4);
+		line-height: var(--account_lineHeight);
+		font-weight: 400;
+	}
+
+	.range-value {
+		font-weight: 700;
+		margin: 0 var(--sp0-5x);
+	}
+
+	/* //! 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_freeShippingBlockDistance: var(--sp3-5x);
+		--account_freeShippingBlockPadTB: var(--sp2x);
+		--account_freeShippingBlockPadLR: var(--sp2x);
+		--account_freeShippingIconSize: var(--sp3x);
+		--account_freeShippingAttrGap: var(--sp1x);
+	}
+
+	/* //! 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_freeShippingBlockDistance: var(--sp4x);
+		--account_freeShippingBlockPadTB: var(--sp2x);
+		--account_freeShippingBlockPadLR: var(--sp2x);
+		--account_freeShippingIconSize: var(--sp2-5x);
+		--account_freeShippingAttrGap: var(--sp1x);
+	}
+
+	/* //! 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_freeShippingBlockDistance: var(--sp3x);
+		--account_freeShippingBlockPadTB: var(--sp2x);
+		--account_freeShippingBlockPadLR: var(--sp2x);
+		--account_freeShippingIconSize: var(--sp2-5x);
+		--account_freeShippingAttrGap: var(--sp1x);
+	}
+
+	/* //! 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_freeShippingBlockDistance: var(--sp3x);
+		--account_freeShippingBlockPadTB: var(--sp2x);
+		--account_freeShippingBlockPadLR: var(--sp2x);
+		--account_freeShippingIconSize: var(--sp2-5x);
+		--account_freeShippingAttrGap: 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_freeShippingBlockDistance: var(--sp3x);
+		--account_freeShippingBlockPadTB: var(--sp2x);
+		--account_freeShippingBlockPadLR: var(--sp2x);
+		--account_freeShippingIconSize: var(--sp2-5x);
+		--account_freeShippingAttrGap: 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_freeShippingBlockDistance: var(--sp3x);
+		--account_freeShippingBlockPadTB: var(--sp2x);
+		--account_freeShippingBlockPadLR: var(--sp2x);
+		--account_freeShippingIconSize: var(--sp2-5x);
+		--account_freeShippingAttrGap: var(--sp1x);
+	}
+
+	/* //! Mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_freeShippingBlockDistance: var(--sp3x);
+		--account_freeShippingBlockPadTB: var(--sp2x);
+		--account_freeShippingBlockPadLR: var(--sp2x);
+		--account_freeShippingIconSize: var(--sp2-5x);
+		--account_freeShippingAttrGap: var(--sp1x);
+	}
+`;
+export default FreeShippingCompStyle;

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

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

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Text } 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 }) => {
+    //! States
+    const [show, setShow] = useState(true);
+    const [couponCode, setCouponCode] = useState(false);
+    //! On Finish
+    const onFinish = () => {
+        setCouponCode(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;
+};
+export default PromoCodeComp;

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

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

@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+const PromoCodeCompStyle = styled.div `
+	--account_promoCodeCompDistance: var(--sp5x);
+
+	--account_promoCodeInputPadTB: var(--sp2x);
+	--account_promoCodeInputPadLR: var(--sp2x);
+	--account_promoCodeContainerGap: var(--sp2x);
+
+	margin-top: var(--account_promoCodeCompDistance);
+	margin-bottom: calc(var(--account_promoCodeCompDistance) - var(--sp2x));
+
+	.promo-code-container {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--account_promoCodeContainerGap);
+	}
+
+	.promo-code-version {
+		width: fit-content !important;
+		height: fit-content !important;
+		margin-top: unset !important;
+	}
+
+	.promo-code-block {
+		flex: 1;
+
+		.base-input {
+			padding: var(--account_promoCodeInputPadTB) var(--account_promoCodeInputPadLR) !important;
+			border: 2px solid var(--account_primaryColor2) !important;
+		}
+	}
+
+	.promo-code-text {
+		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 {
+		display: flex;
+		gap: var(--account_promoCodeContainerGap);
+		justify-content: space-between;
+		padding: var(--account_promoCodeInputPadTB) var(--account_promoCodeInputPadLR);
+		border-radius: var(--sp1x);
+		border: 2px solid var(--account_surfaceColor);
+		background-color: var(--account_surfaceColor);
+	}
+
+	.promo-code-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_promoCodeCompDistance: var(--sp3-5x);
+
+		--account_promoCodeContainerGap: 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_promoCodeCompDistance: var(--sp4x);
+
+		--account_promoCodeContainerGap: 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_promoCodeCompDistance: var(--sp3x);
+
+		--account_promoCodeContainerGap: 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_promoCodeCompDistance: var(--sp3x);
+
+		--account_promoCodeContainerGap: 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_promoCodeCompDistance: var(--sp3x);
+
+		--account_promoCodeContainerGap: 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_promoCodeCompDistance: var(--sp3x);
+
+		--account_promoCodeContainerGap: var(--sp1x);
+	}
+
+	/* //! Mobile */
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_promoCodeCompDistance: var(--sp3x);
+
+		--account_promoCodeContainerGap: var(--sp1x);
+	}
+`;
+export default PromoCodeCompStyle;

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

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

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

@@ -0,0 +1,14 @@
+export const promoCodeFields = [
+    {
+        fieldType: 'input',
+        labelProps: {
+            // label: 'promoCodeLabel',
+            name: 'promo_code',
+            // required: false,
+            errorKey: 'promoCode',
+        },
+        fieldProps: {
+            placeholder: 'promoCodePlaceholder',
+        },
+    },
+];