w-aura/src/components/palmistry/steps-manager/steps-manager.tsx

import React from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { useLocation } from 'react-router-dom';

import './steps-manager.css';

import Progressbar from '@/components/palmistry/progress-bar/progress-bar';
import PalmistryContainer from '@/components/palmistry/palmistry-container/palmistry-container';
import useSteps, { Step } from '@/hooks/palmistry/use-steps';
import StepWelcome from '@/components/palmistry/step-welcome/step-welcome';
import StepGender from '@/components/palmistry/step-gender/step-gender';
import StepBirthdate from '@/components/palmistry/step-birthdate/step-birthdate';
import StepPalmsHold from '@/components/palmistry/step-palms-hold/step-palms-hold';
import StepWish from '@/components/palmistry/step-wish/step-wish';
import StepRelationshipStatus from '@/components/palmistry/step-relationship-status/step-relationship-status';
import StepResonatedElement from '@/components/palmistry/step-resonated-element/step-resonated-element';
import StepColorYouLike from '@/components/palmistry/step-color-you-like/step-color-you-like';
import StepDecisions from '@/components/palmistry/step-decisions/step-decisions';
import StepGuidancePlan from '@/components/palmistry/step-guidance-plan/step-guidance-plan';
import StepPersonalStatement from '@/components/palmistry/step-personal-statement/step-personal-statement';
import StepScanInfo from '@/components/palmistry/step-scan-info/step-scan-info';
import StepUpload from '@/components/palmistry/step-upload/step-upload';
import StepScanPhoto from '@/components/palmistry/step-scan-photo/step-scan-photo';
import StepEmail from '@/components/palmistry/step-email/step-email';
import StepSubscriptionPlan from '@/components/palmistry/step-subscription-plan/step-subscription-plan';
import StepPaywall from '@/components/palmistry/step-paywall/step-paywall';
import PaymentScreen from '@/components/palmistry/payment-screen/payment-screen';
import DiscountScreen from '@/components/palmistry/discount-screen/discount-screen';
import PremiumBundleScreen from '@/components/palmistry/premium-bundle-screen/premium-bundle-screen';

const PalmistryContainerWrapper = (props: { children: React.ReactNode, currentStep: Step }) => {
  return (
    <PalmistryContainer
      singleQuestion={[
        Step.Wish,
        Step.RelationshipStatus,
        Step.ResonatedElement,
        Step.ColorYouLike,
        Step.Decisions,
      ].includes(props.currentStep)}
      type={props.currentStep}
    >{props.children}</PalmistryContainer>
  );
};

const animationDuration = 0.2;

export default function StepsManager() {
  const steps = useSteps();
  const { pathname } = useLocation();

  const [modalIsOpen, setModalIsOpen] = React.useState(false);

  React.useLayoutEffect(() => {
    if (!steps.isInited) return;

    steps.goFirstUnpassedStep();
  }, [steps.isInited]);

  const motionDivClassName = [
    'steps-manager__motion-div',
    modalIsOpen ? 'steps-manager__motion-div_no-transform' : '',
  ];

  const nonSliderSteps = [
    Step.Payment,
    Step.Discount,
    Step.PremiumBundle,
  ];

  return (
    <div className="steps-manager">
      {steps.currentNumber >= steps.progressBarRange[0] && steps.currentNumber <= steps.progressBarRange[1] && (
        <Progressbar step={steps.currentNumber}/>
      )}

      <main className="steps-manager__main">
        {nonSliderSteps.includes(steps.current as Step) && (
          <PalmistryContainerWrapper currentStep={steps.current as Step}>
            {steps.current === Step.Payment && <PaymentScreen/>}
            {steps.current === Step.Discount && <DiscountScreen/>}
            {steps.current === Step.PremiumBundle && <PremiumBundleScreen/>}
          </PalmistryContainerWrapper>
        )}

        {!nonSliderSteps.includes(steps.current as Step) && (
          <AnimatePresence
            mode="wait"
            initial={false}
          >
            <motion.div
              className={motionDivClassName.join(' ')}
              key={pathname}
              initial="pageInitial"
              animate="pageAnimate"
              exit="pageExit"
              variants={{
                pageInitial: {
                  transform: 'translateX(100vw)',
                  width: '100%',
                },
                pageAnimate: {
                  transform: 'translateX(0)',
                  width: '100%',
                },
                pageExit: {
                  transform: 'translateX(-200vw)',
                  opacity: 0,
                  width: '100%',
                },
              }}
              transition={{
                duration: animationDuration,
                ease: 'linear',
              }}
            >
              <PalmistryContainerWrapper currentStep={steps.current as Step}>
                {steps.current === Step.Welcome && <StepWelcome/>}

                {steps.current === Step.Gender && <StepGender/>}

                {steps.current === Step.Birthdate && <StepBirthdate/>}

                {steps.current === Step.PalmsHold && <StepPalmsHold/>}

                {steps.current === Step.Wish && <StepWish/>}

                {steps.current === Step.RelationshipStatus && <StepRelationshipStatus/>}

                {steps.current === Step.ResonatedElement && <StepResonatedElement/>}

                {steps.current === Step.ColorYouLike && <StepColorYouLike/>}

                {steps.current === Step.Decisions && <StepDecisions/>}

                {steps.current === Step.GuidancePlan && <StepGuidancePlan/>}

                {steps.current === Step.PersonalStatement && <StepPersonalStatement/>}

                {steps.current === Step.ScanInfo && <StepScanInfo/>}

                {steps.current === Step.Upload && <StepUpload onOpenModal={setModalIsOpen}/>}

                {steps.current === Step.ScanPhoto && <StepScanPhoto/>}

                {steps.current === Step.Email && <StepEmail/>}

                {steps.current === Step.SubscriptionPlan && <StepSubscriptionPlan/>}

                {steps.current === Step.Paywall && <StepPaywall/>}
              </PalmistryContainerWrapper>
            </motion.div>
          </AnimatePresence>
        )}
      </main>
    </div>
  );
}