From 5ca0a636cc66e7a6bcf24285a347e5dfeeccd0e2 Mon Sep 17 00:00:00 2001
From: yury <yury.work.js@gmail.com>
Date: Tue, 25 Jun 2024 04:24:00 +0300
Subject: [PATCH 1/2] feat: Change payment window on palmistry/payment

---
 .../PaymentCardModal/CreditCardIcon/index.tsx |   9 +
 .../PaymentCardModal/index.tsx                |  39 +++
 .../PaymentCardModal/style.scss               |   7 +
 src/components/PaymentModalNew/index.tsx      | 155 +++++++++
 .../PaymentModalNew/styles.module.scss        |  60 ++++
 .../methods/CheckoutForm/index.tsx            |   4 +-
 .../methods/ExpressCheckoutStripe/index.tsx   |   4 +-
 .../payment-screen/payment-screen.css         | 297 ++++++++++--------
 .../payment-screen/payment-screen.tsx         |  96 +++---
 src/utils/price.utils.tsx                     |   3 +
 10 files changed, 486 insertions(+), 188 deletions(-)
 create mode 100644 src/components/PaymentModalNew/PaymentCardModal/CreditCardIcon/index.tsx
 create mode 100644 src/components/PaymentModalNew/PaymentCardModal/index.tsx
 create mode 100644 src/components/PaymentModalNew/PaymentCardModal/style.scss
 create mode 100644 src/components/PaymentModalNew/index.tsx
 create mode 100644 src/components/PaymentModalNew/styles.module.scss
 create mode 100644 src/utils/price.utils.tsx

diff --git a/src/components/PaymentModalNew/PaymentCardModal/CreditCardIcon/index.tsx b/src/components/PaymentModalNew/PaymentCardModal/CreditCardIcon/index.tsx
new file mode 100644
index 0000000..89cb11d
--- /dev/null
+++ b/src/components/PaymentModalNew/PaymentCardModal/CreditCardIcon/index.tsx
@@ -0,0 +1,9 @@
+export default function CreditCardIcon() {
+  return (
+    <svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0.5" width="22" height="16" rx="2" fill="white"></rect>
+      <rect x="0.5" y="2.66406" width="22" height="2.66667" fill="#9FB8FF"></rect>
+      <rect x="3" y="7.35938" width="17" height="2" rx="1" fill="#CEDBFF"></rect>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/src/components/PaymentModalNew/PaymentCardModal/index.tsx b/src/components/PaymentModalNew/PaymentCardModal/index.tsx
new file mode 100644
index 0000000..3bc937d
--- /dev/null
+++ b/src/components/PaymentModalNew/PaymentCardModal/index.tsx
@@ -0,0 +1,39 @@
+import { Elements } from '@stripe/react-stripe-js';
+import CheckoutForm, { TConfirmType } from '@/components/PaymentPage/methods/CheckoutForm';
+import Modal from '@/components/Modal';
+import { Stripe } from '@stripe/stripe-js';
+import { Dispatch, SetStateAction } from 'react';
+
+import './style.scss';
+
+interface IPaymentCardModalProps {
+  clientSecret?: string;
+  stripePromise: Promise<Stripe | null> | null;
+  paymentType?: TConfirmType;
+  paymentIntentId?: string;
+  returnUrl?: string;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export default function PaymentCardModal({
+  clientSecret,
+  stripePromise,
+  paymentType,
+  paymentIntentId,
+  returnUrl,
+  isOpen,
+  setIsOpen,
+}: IPaymentCardModalProps) {
+  return (
+    <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+      <Elements stripe={stripePromise} options={{clientSecret}}>
+        <CheckoutForm
+          confirmType={paymentType}
+          subscriptionReceiptId={paymentIntentId}
+          returnUrl={returnUrl}
+        />
+      </Elements>
+    </Modal>
+  )
+}
\ No newline at end of file
diff --git a/src/components/PaymentModalNew/PaymentCardModal/style.scss b/src/components/PaymentModalNew/PaymentCardModal/style.scss
new file mode 100644
index 0000000..06a8a21
--- /dev/null
+++ b/src/components/PaymentModalNew/PaymentCardModal/style.scss
@@ -0,0 +1,7 @@
+:global(.paymentCardModalContainer) {
+  background: none;
+
+  .p-PaymentMethodSelector {
+    display: none !important;
+  }
+}
\ No newline at end of file
diff --git a/src/components/PaymentModalNew/index.tsx b/src/components/PaymentModalNew/index.tsx
new file mode 100644
index 0000000..5473e7b
--- /dev/null
+++ b/src/components/PaymentModalNew/index.tsx
@@ -0,0 +1,155 @@
+import Loader from '@/components/Loader';
+
+import styles from './styles.module.scss';
+
+import cn from 'classnames';
+import { EPlacementKeys, IPaywallProduct } from '@/api/resources/Paywall';
+import { useNavigate } from 'react-router-dom';
+import { Dispatch, LegacyRef, SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
+import { loadStripe, Stripe } from '@stripe/stripe-js';
+import { usePaywall } from '@/hooks/paywall/usePaywall';
+import { useMakePayment } from '@/hooks/payment/useMakePayment';
+import { getFormattedPrice } from '@/utils/price.utils';
+import routes from '@/routes';
+import Title from '@/components/Title';
+import { Elements } from '@stripe/react-stripe-js';
+import ExpressCheckoutStripe from '@/components/PaymentPage/methods/ExpressCheckoutStripe';
+import SecurityPayments from '@/components/pages/TrialPayment/components/SecurityPayments';
+import PaymentCardModal from '@/components/PaymentModalNew/PaymentCardModal';
+import CreditCardIcon from '@/components/PaymentModalNew/PaymentCardModal/CreditCardIcon';
+
+interface IPaymentModalNewProps {
+  returnUrl: string;
+  placementKey: EPlacementKeys;
+  activeProduct: IPaywallProduct;
+  setHeight?: Dispatch<SetStateAction<number>>;
+}
+
+export default function PaymentModalNew({
+  returnUrl,
+  activeProduct,
+  placementKey,
+  setHeight,
+}: IPaymentModalNewProps) {
+  const navigate = useNavigate();
+  const ref = useRef<HTMLDivElement>();
+  const [stripePromise, setStripePromise] =
+    useState<Promise<Stripe | null> | null>(null);
+
+  const {products, placementId, paywallId} = usePaywall({
+    placementKey,
+  });
+
+  const [isOpenCardModal, setIsOpenCardModal] = useState(false);
+
+  const {
+    paymentIntentId,
+    clientSecret,
+    returnUrl: checkoutUrl,
+    paymentType,
+    publicKey,
+    isLoading: isLoadingPayment,
+    error,
+  } = useMakePayment({
+    productId: activeProduct?._id || '',
+    placementId,
+    paywallId,
+    returnPaidUrl: returnUrl,
+  });
+
+  const [isLoadingExpressCheckout, setIsLoadingExpressCheckout] =
+    useState(true);
+
+  const isLoading = useMemo(() => {
+    return isLoadingPayment || isLoadingExpressCheckout;
+  }, [isLoadingPayment, isLoadingExpressCheckout]);
+
+  if (checkoutUrl?.length) {
+    window.location.href = checkoutUrl;
+  }
+
+  useEffect(() => {
+    (async () => {
+      if (!products?.length || !publicKey) return;
+      setStripePromise(loadStripe(publicKey));
+      const isActiveProduct = products.find(
+        (product) => product._id === activeProduct?._id,
+      );
+      if (!activeProduct || !isActiveProduct) {
+        navigate(routes.client.trialChoice());
+      }
+    })();
+  }, [activeProduct, navigate, products, publicKey]);
+
+  const resizeHandler = () => {
+    setHeight?.(ref?.current?.clientHeight || 32);
+  };
+
+  if (error?.length) {
+    setTimeout(resizeHandler, 300);
+    return (
+      <div ref={ref as LegacyRef<HTMLDivElement>} className={styles['payment-modal']}>
+        <Title variant="h3" className={styles.title}>
+          Something went wrong
+        </Title>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref as LegacyRef<HTMLDivElement>}
+         className={cn(styles.paymentModalContainer, isLoading && styles.paymentModalContainerLoading)}>
+      {isLoading && <div className={cn(styles.paymentModalLoader)}>
+          <Loader/>
+      </div>
+      }
+
+      <div className={styles.paymentModalPrice}>Total due today:
+        ${getFormattedPrice(activeProduct.trialPrice)}</div>
+
+      {!isLoadingPayment &&
+          <>
+            {!isLoading &&
+                <div className={styles.paymentCreditCard} onClick={() => setIsOpenCardModal(true)}>
+                    <CreditCardIcon/>
+                    <div>Credit / Debit Card</div>
+                </div>
+            }
+              <Elements stripe={stripePromise} options={{clientSecret}}>
+                  <ExpressCheckoutStripe
+                      clientSecret={clientSecret!}
+                      returnUrl={returnUrl}
+                      paymentMethodOrderList={['google_pay', 'apple_pay', 'link']}
+                      onChangeLoading={(isLoading) => {
+                        setIsLoadingExpressCheckout(isLoading);
+                        setTimeout(resizeHandler, 300);
+                      }
+                      }
+                  />
+              </Elements>
+
+              <PaymentCardModal
+                  isOpen={isOpenCardModal}
+                  setIsOpen={setIsOpenCardModal}
+                  clientSecret={clientSecret}
+                  stripePromise={stripePromise}
+                  paymentType={paymentType}
+                  paymentIntentId={paymentIntentId}
+                  returnUrl={returnUrl}
+              />
+            {!isLoading &&
+                <>
+                    <div className={styles.infoContainer}>
+                        <SecurityPayments/>
+                        <p className={styles.address}>1123 Rimer Dr Moraga, California 94556</p>
+                    </div>
+                </>
+            }
+          </>
+      }
+
+
+    </div>
+  );
+}
+
diff --git a/src/components/PaymentModalNew/styles.module.scss b/src/components/PaymentModalNew/styles.module.scss
new file mode 100644
index 0000000..10618d2
--- /dev/null
+++ b/src/components/PaymentModalNew/styles.module.scss
@@ -0,0 +1,60 @@
+.paymentModalContainer {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin: -12px -20px;
+  padding: 12px 20px;
+  gap: 6px;
+
+  transition: height 1s ease-out;
+
+  .address {
+    color: gray;
+    font-size: 10px;
+    margin-bottom: 16px;
+    text-transform: uppercase;
+  }
+
+  .infoContainer > * {
+    padding-top: 16px;
+  }
+
+  .paymentCreditCard {
+    background: #066fde;
+    color: #fff !important;
+    gap: 6px;
+    display: flex;
+    font-size: 14px;
+    line-height: 18px;
+    align-items: center;
+    font-weight: 400;
+    min-height: 48px;
+    border-radius: 5px;
+    justify-content: center;
+  }
+
+  &Loading {
+    background: rgba(215, 213, 213, .5);
+  }
+
+  .paymentModalLoader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 25px;
+    color: #2f2e37;
+    position: absolute;
+    width: 100%;
+    margin-left: -20px;
+  }
+
+  .paymentModalPrice {
+    color: #066fde;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 25px;
+    text-align: center;
+    margin-bottom: 12px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/PaymentPage/methods/CheckoutForm/index.tsx b/src/components/PaymentPage/methods/CheckoutForm/index.tsx
index fa0242a..f85d722 100644
--- a/src/components/PaymentPage/methods/CheckoutForm/index.tsx
+++ b/src/components/PaymentPage/methods/CheckoutForm/index.tsx
@@ -12,11 +12,13 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import styles from "./styles.module.css";
 
+export type TConfirmType = "payment" | "setup";
+
 interface ICheckoutFormProps {
   children?: JSX.Element | null;
   subscriptionReceiptId?: string;
   returnUrl?: string;
-  confirmType?: "payment" | "setup";
+  confirmType?: TConfirmType;
   isHide?: boolean;
 }
 
diff --git a/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx b/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx
index cbb6972..414a044 100644
--- a/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx
+++ b/src/components/PaymentPage/methods/ExpressCheckoutStripe/index.tsx
@@ -21,6 +21,7 @@ interface IExpressCheckoutStripeProps {
     availableMethods: AvailablePaymentMethods | undefined
   ) => void;
   onChangeLoading?: (isLoading: boolean) => void;
+  paymentMethodOrderList?: string[];
 }
 
 function ExpressCheckoutStripe({
@@ -29,6 +30,7 @@ function ExpressCheckoutStripe({
   isHide = false,
   onAvailable,
   onChangeLoading,
+  paymentMethodOrderList
 }: IExpressCheckoutStripeProps) {
   const stripe = useStripe();
   const elements = useElements();
@@ -104,7 +106,7 @@ function ExpressCheckoutStripe({
             maxColumns: 1,
             overflow: "never",
           },
-          paymentMethodOrder: ["apple_pay", "google_pay", "amazon_pay", "link"],
+          paymentMethodOrder: paymentMethodOrderList || ["apple_pay", "google_pay", "amazon_pay", "link"],
           wallets: {
             googlePay: "always",
             applePay: "always",
diff --git a/src/components/palmistry/payment-screen/payment-screen.css b/src/components/palmistry/payment-screen/payment-screen.css
index a88396e..6765f55 100644
--- a/src/components/palmistry/payment-screen/payment-screen.css
+++ b/src/components/palmistry/payment-screen/payment-screen.css
@@ -1,228 +1,247 @@
 .payment-screen {
-  margin: 0 auto;
-  position: relative;
-  max-width: 428px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+    margin: 0 auto;
+    position: relative;
+    max-width: 428px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 .payment-screen__header {
-  display: flex;
-  width: 100%;
-  padding: 24px 0 11px;
-  justify-content: center;
+    display: flex;
+    width: 100%;
+    padding: 24px 0 11px;
+    justify-content: center;
 }
 
 .payment-screen__content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 }
 
 .payment-screen__content * {
-  font-family: OpenSans Regular;
+    font-family: OpenSans Regular;
 }
 
 .payment-screen__about-us {
-  display: flex;
-  text-align: center;
-  align-items: center;
-  flex-direction: column;
-  margin-bottom: 16px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 16px;
 }
 
 .payment-screen__about-us > span {
-  padding: 0 60px;
-  margin-bottom: 6px;
+    padding: 0 60px;
+    margin-bottom: 6px;
 }
 
 .payment-screen__about-us span {
-  font-size: 14px;
-  line-height: 18px;
-  font-family: Alata Regular !important;
+    font-size: 14px;
+    line-height: 18px;
+    font-family: Alata Regular !important;
 }
 
 .payment-screen__about-us-accent {
-  color: #066fde;
+    color: #066fde;
 }
 
 .payment-screen__timer {
-  width: 100%;
-  display: flex;
-  padding: 8px 12px;
-  border-radius: 4px;
-  background: #eff2fd;
-  margin-bottom: 16px;
-  align-items: center;
-  justify-content: space-between;
-  position: sticky;
-  top: 0;
+    width: 100%;
+    display: flex;
+    padding: 8px 12px;
+    border-radius: 4px;
+    background: #eff2fd;
+    margin-bottom: 16px;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
 }
 
 .payment-screen__timer-title {
-  font-size: 14px;
-  line-height: 20px;
+    font-size: 14px;
+    line-height: 20px;
 }
 
 .payment-screen__timer-time {
-  gap: 1px;
-  display: flex;
-  font-size: 16px;
-  line-height: 22px;
-  align-items: center;
+    gap: 1px;
+    display: flex;
+    font-size: 16px;
+    line-height: 22px;
+    align-items: center;
 }
 
 .payment-screen__timer-time span {
-  width: 18px;
-  height: 28px;
-  display: flex;
-  background: #fff;
-  font-weight: 700;
-  border-radius: 4px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #dee5f9;
+    width: 18px;
+    height: 28px;
+    display: flex;
+    background: #fff;
+    font-weight: 700;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #dee5f9;
 }
 
 .payment-screen__title {
-  width: 100%;
-  margin-bottom: 16px;
-  font-size: 24px;
-  line-height: 32px;
-  text-align: left;
-  color: #121620;
-  font-weight: 400;
-  font-family: Alata Regular !important;
+    width: 100%;
+    margin-bottom: 16px;
+    font-size: 24px;
+    line-height: 32px;
+    text-align: left;
+    color: #121620;
+    font-weight: 400;
+    font-family: Alata Regular !important;
 }
 
 .payment-screen__total-today {
-  width: 100%;
-  display: flex;
-  padding: 12px 0;
-  margin-bottom: 6px;
-  align-items: center;
-  border-top: 1px solid #dee5f9;
-  border-bottom: 1px solid #dee5f9;
-  justify-content: space-between;
+    width: 100%;
+    display: flex;
+    padding: 12px 0;
+    margin-bottom: 6px;
+    align-items: center;
+    border-top: 1px solid #dee5f9;
+    border-bottom: 1px solid #dee5f9;
+    justify-content: space-between;
 }
 
 .payment-screen__total-today span {
-  font-size: 16px;
-  line-height: 18px;
-  font-weight: 600;
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: 600;
 }
 
 .payment-screen__total-today .payment-screen__trial-price {
-  color: #066fde;
-  font-weight: 700;
+    color: #066fde;
+    font-weight: 700;
 }
 
 .payment-screen__promocode {
-  gap: 8px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 12px 0 16px;
+    gap: 8px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 12px 0 16px;
 }
 
 .payment-screen__promocode span {
-  color: #04a777;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 18px;
+    color: #04a777;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
 }
 
 .payment-screen__prices {
-  width: 100%;
-  display: flex;
-  margin-bottom: 6px;
-  flex-direction: column;
+    width: 100%;
+    display: flex;
+    margin-bottom: 6px;
+    flex-direction: column;
 }
 
 .payment-screen__prices span {
-  color: #4b536a;
-  font-size: 12px;
-  line-height: 20px;
+    color: #4b536a;
+    font-size: 12px;
+    line-height: 20px;
 }
 
 .payment-screen__prices s {
-  color: #858da5;
+    color: #858da5;
 }
 
 .payment-screen__guarantees {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  gap: 30px;
-  margin-bottom: 30px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 30px;
+    margin-bottom: 30px;
 }
 
 .payment-screen__guarantee {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  max-width: 155px;
-  align-items: center;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    max-width: 155px;
+    align-items: center;
 }
 
 .payment-screen__guarantee svg {
-  min-width: 24px;
-  min-height: 24px;
-  max-width: 24px;
-  max-height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    max-width: 24px;
+    max-height: 24px;
 }
 
 .payment-screen__guarantee span {
-  color: #4b536a;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
+    color: #4b536a;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
 }
 
 .payment-screen__widget {
-  background: #fff;
-  bottom: 0;
-  box-shadow: 0 -2px 16px rgba(18, 22, 32, .1);
-  max-width: 428px;
-  width: 100%;
-  padding: 40px;
-  position: relative;
+    position: fixed;
+    background: #fff;
+    bottom: 0;
+    box-shadow: 0 -2px 16px rgba(18, 22, 32, .1);
+    width: 100%;
+    padding: 12px 20px;
+    text-align: center;
+    text-align: -webkit-center;
+    transition: .5s height;
+    max-width: 560px;
+    margin-left: -66px;
 }
 
 .payment-screen__widget_success {
-  height: 400px;
+    height: 400px;
 }
 
 .payment-screen__success {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: #fff;
-  z-index: 99;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 30px;
-  padding: 40px;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    z-index: 99;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+    padding: 40px;
 }
 
 .payment-screen__success-icon {
-  width: 100px;
-  height: 100px;
-  max-width: 50%;
-  flex-shrink: 0;
+    width: 100px;
+    height: 100px;
+    max-width: 50%;
+    flex-shrink: 0;
 }
 
 .payment-screen__success-text {
-  font-size: 24px;
-  line-height: 32px;
-  text-align: center;
-  color: #121620;
+    font-size: 24px;
+    line-height: 32px;
+    text-align: center;
+    color: #121620;
 }
+
+.payment-screen__widget_modal_container {
+    height: 100%;
+}
+
+
+@media screen and (max-width: 560px) {
+    .payment-screen__widget {
+        width: 100%;
+        padding: 12px 20px;
+        text-align: center;
+        text-align: -webkit-center;
+        transition: height 1s linear;
+        max-width: 560px;
+        margin-left: 0;
+        left: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/components/palmistry/payment-screen/payment-screen.tsx b/src/components/palmistry/payment-screen/payment-screen.tsx
index 10ad872..853eeb7 100644
--- a/src/components/palmistry/payment-screen/payment-screen.tsx
+++ b/src/components/palmistry/payment-screen/payment-screen.tsx
@@ -1,20 +1,17 @@
-import React from "react";
+import React, { useState } from 'react';
 
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
 
-import "./payment-screen.css";
+import './payment-screen.css';
 
-import useSteps, { Step } from "@/hooks/palmistry/use-steps";
-import useTimer from "@/hooks/palmistry/use-timer";
-import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
-import PaymentModal from "@/components/PaymentModal";
-import { selectors } from "@/store";
-import { EPlacementKeys } from "@/api/resources/Paywall";
-import { useSearchParams } from "react-router-dom";
-
-const getFormattedPrice = (price: number) => {
-  return (price / 100).toFixed(2);
-};
+import useSteps, { Step } from '@/hooks/palmistry/use-steps';
+import useTimer from '@/hooks/palmistry/use-timer';
+import HeaderLogo from '@/components/palmistry/header-logo/header-logo';
+import { selectors } from '@/store';
+import { EPlacementKeys } from '@/api/resources/Paywall';
+import { useSearchParams } from 'react-router-dom';
+import PaymentModalNew from '@/components/PaymentModalNew';
+import { getFormattedPrice } from '@/utils/price.utils';
 
 export default function PaymentScreen() {
   const time = useTimer();
@@ -24,7 +21,7 @@ export default function PaymentScreen() {
     searchParams.get("redirect_status") === "succeeded"
       ? "subscribed"
       : "lead";
-  // const subscriptionStatus = useSelector(selectors.selectStatus);
+  const [height, setHeight] = useState(subscriptionStatus === "subscribed" ? 246 : 146);
 
   const steps = useSteps();
 
@@ -52,7 +49,7 @@ export default function PaymentScreen() {
   return (
     <div className="payment-screen">
       <div className="payment-screen__header">
-        <HeaderLogo />
+        <HeaderLogo/>
       </div>
 
       <div className="payment-screen__content">
@@ -246,40 +243,45 @@ export default function PaymentScreen() {
       <style>{`.palmistry-payment-modal { max-height: calc(100dvh - 40px) }`}</style>
 
       {activeProductFromStore && (
-        <div
-          className={`payment-screen__widget${
-            subscriptionStatus === "subscribed"
-              ? " payment-screen__widget_success"
-              : ""
-          }`}
-        >
-          {subscriptionStatus !== "subscribed" && (
-            <PaymentModal
-              returnUrl={window.location.href}
-              placementKey={EPlacementKeys["aura.placement.palmistry.main"]}
-            />
-          )}
+        <div className="payment-screen__widget_modal_container"
+             style={{minHeight: `${height}px`}}>
+          <div
+            className={`payment-screen__widget${
+              subscriptionStatus === "subscribed"
+                ? " payment-screen__widget_success"
+                : ""
+            }`}
+          >
+            {subscriptionStatus !== "subscribed" && (
+              <PaymentModalNew
+                setHeight={setHeight}
+                activeProduct={activeProductFromStore}
+                returnUrl={window.location.href}
+                placementKey={EPlacementKeys["aura.placement.palmistry.main"]}
+              />
+            )}
 
-          {subscriptionStatus === "subscribed" && (
-            <div className="payment-screen__success">
-              <svg
-                className="payment-screen__success-icon"
-                xmlns="http://www.w3.org/2000/svg"
-                width="512"
-                height="512"
-                viewBox="0 0 52 52"
-              >
-                <path
-                  fill="#4ec794"
-                  d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329-16 18a1.997 1.997 0 0 1-2.745.233l-10-8a2 2 0 0 1 2.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 0 1 2.99 2.659z"
-                />
-              </svg>
+            {subscriptionStatus === "subscribed" && (
+              <div className="payment-screen__success">
+                <svg
+                  className="payment-screen__success-icon"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="512"
+                  height="512"
+                  viewBox="0 0 52 52"
+                >
+                  <path
+                    fill="#4ec794"
+                    d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329-16 18a1.997 1.997 0 0 1-2.745.233l-10-8a2 2 0 0 1 2.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 0 1 2.99 2.659z"
+                  />
+                </svg>
 
-              <div className="payment-screen__success-text">
-                Payment success
+                <div className="payment-screen__success-text">
+                  Payment success
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       )}
     </div>
diff --git a/src/utils/price.utils.tsx b/src/utils/price.utils.tsx
new file mode 100644
index 0000000..9bde61d
--- /dev/null
+++ b/src/utils/price.utils.tsx
@@ -0,0 +1,3 @@
+export const getFormattedPrice = (price: number) => {
+  return (price / 100).toFixed(2);
+};
\ No newline at end of file

From 1f983df42721bb8fd2f87b9a54fc6818367e2498 Mon Sep 17 00:00:00 2001
From: "dev.daminik00" <dev.daminik00@gmail.com>
Date: Tue, 25 Jun 2024 23:01:11 +0200
Subject: [PATCH 2/2] add sass

---
 package-lock.json | 210 +++++++++++++++++++++++++++++++++++++++++-----
 package.json      |   1 +
 2 files changed, 189 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12b4ae3..1ad5bea 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.11.2",
         "react-slick": "^0.30.2",
+        "sass": "^1.77.6",
         "slick-carousel": "^1.8.1",
         "unique-names-generator": "^4.7.1"
       },
@@ -1417,6 +1418,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/apng-js": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/apng-js/-/apng-js-1.1.1.tgz",
@@ -1443,6 +1456,17 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1457,7 +1481,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -1536,6 +1559,40 @@
         "node": ">=4"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -2145,7 +2202,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2226,7 +2282,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2446,6 +2501,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2492,11 +2552,21 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2505,7 +2575,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2517,7 +2586,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2752,6 +2820,14 @@
       "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2874,7 +2950,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -3123,6 +3198,17 @@
         "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -3227,6 +3313,22 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.77.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -3289,7 +3391,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3370,7 +3471,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -4483,6 +4583,15 @@
         "color-convert": "^1.9.0"
       }
     },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "apng-js": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/apng-js/-/apng-js-1.1.1.tgz",
@@ -4506,6 +4615,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4520,7 +4634,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -4560,6 +4673,31 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
     "classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -5017,7 +5155,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -5074,7 +5211,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "optional": true
     },
     "gensync": {
@@ -5230,6 +5366,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
       "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
     },
+    "immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5267,17 +5408,23 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -5285,8 +5432,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-path-inside": {
       "version": "3.0.3",
@@ -5464,6 +5610,11 @@
       "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
       "dev": true
     },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5552,8 +5703,7 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "postcss": {
       "version": "8.4.32",
@@ -5696,6 +5846,14 @@
         "resize-observer-polyfill": "^1.5.0"
       }
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -5764,6 +5922,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "sass": {
+      "version": "1.77.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
+      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -5808,8 +5976,7 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "string-convert": {
       "version": "0.2.1",
@@ -5872,7 +6039,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
diff --git a/package.json b/package.json
index 0a156b6..1bce495 100755
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2",
     "react-slick": "^0.30.2",
+    "sass": "^1.77.6",
     "slick-carousel": "^1.8.1",
     "unique-names-generator": "^4.7.1"
   },