src/views/SignUpViews/SignUpStep3.tsx - master - SOFG1/hasida

src/views/SignUpViews/SignUpStep3.tsx
221 строка6 KB
Eddy
initial commit
22 июл 2024, 17:14
22 июл 2024, 17:14b43c0d0
import React, { useCallback, useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import {
  IField,
  useUserGetFieldsQuery,
  useUserInfoQuery,
  useUserRegistrationProfileMutation,
  useUserSetRegisteredMutation,
} from "../../api/user";
import { FieldInputComponent, Header, UploadPhotosComponent } from "../../components/common";
import {
  ProgressBar,
  SignUpSteps,
} from "../../components/SignUpComponents";
import posterImg from "../../images/sign-up3-image.png";
import { Button } from "../../UI/Button";
import { Loader } from "../../UI/Loader";
import { Title } from "../../UI/Title";
import { ChevronLeftIcon } from "../../UI/SVG";
import { useNavigate } from "react-router-dom";
import { convertFormData } from "../../utils";
import { useDispatch, useSelector } from "react-redux";
import { setAlert } from "../../store/app";
import { userTokenSelector } from "../../store/user";

const Wrapper = styled.div`
  display: flex;
`;

const StyledPoster = styled.img`
  width: 43%;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
  border-start-end-radius: 30px;
  border-end-end-radius: 30px;
  margin-inline-end: 15px;
  @media screen and (max-width: 830px) {
    display: none;
  }
`;

const StyledContent = styled.div`
  max-width: 665px;
  padding: 0 15px;
  flex-grow: 1;
  @media screen and (max-width: 830px) {
    margin: 0 auto;
  }
`;

const StyledTitle = styled(Title)`
  margin-bottom: 20px;
`;

const StyledBox = styled.div`
  display: flex;
  justify-content: space-between;
`

const StepBtn = styled.button`
  border: 0;
  padding: 3px 5px;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 1px 1px 3px #fff;
  &:last-child svg {
    transform: rotate(180deg);
  }
`;

const StyledProgressTitle = styled.p`
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
`;

const StyledBtn = styled(Button)`
  width: 100%;
  margin-bottom: 6px;
`;

const StyledText = styled.p`
  text-align: center;
  margin-bottom: 8px;
`;



interface IProps {
  data: { [key: string]: any }
  onChange: (key: string, value: any) => void
  step: number
  onChangeStep: (s: number) => void
}

const SignUpStep3 = React.memo(({ data, onChange, step, onChangeStep }: IProps) => {
  const { t, i18n } = useTranslation();
  const dispatch = useDispatch()
  const token = useSelector(userTokenSelector)
  const { data: userInfo } = useUserInfoQuery(undefined, { skip: !token });
  const [setRegistered, { }] = useUserSetRegisteredMutation()
  const [registrationProfile, { isLoading: isLoading }]: any = useUserRegistrationProfileMutation();
  const navigate = useNavigate()
  const { data: fields, isFetching } = useUserGetFieldsQuery();



  const currentStepFields = useMemo(() => {
    return fields?.filter((f: IField) => f.step === 3)
      .filter(f => f.screen_number === step - 2)
      .sort((a, b) => a.order - b.order)
  }, [fields, step])




  const compleetness = useMemo(() => {
    const infoArray = Object.values(userInfo?.profile || {})
    const oneFieldPercent = 100 / (infoArray.length || 100)
    let addedFields = 0;
    infoArray.forEach((value) => {
      if (value === null) return
      if (typeof value === "string" && !value.length) return
      addedFields++;
    });
    return Number((addedFields * oneFieldPercent).toFixed(0));
  }, [userInfo?.profile, fields]);



  const showNextBtn = useMemo(() => {
    return currentStepFields?.length !== 0
  }, [currentStepFields])



  const handleSubmit = useCallback(() => {
    if(currentStepFields?.length === 0 && userInfo) {
      setRegistered(userInfo.profile.id)
      navigate("/home")
     return
    }
    const requestData: { [key: string]: any } = convertFormData(data, fields);
    registrationProfile(requestData)
      .unwrap()
      .then((r: any) => onChangeStep(step + 1))
      .catch((e: any) => {
        onChangeStep(step + 1)
        dispatch(setAlert({ isError: true, text: e?.message || "error" }))
      })
  }, [data, fields, step, currentStepFields])

  const showOrientationCust = useMemo(() => {
    return data.sexual_orientation?.some((v: any) => v.value === "Other")
  }, [data.sexual_orientation])


  //Reset "sexual_orientation_cust" when showOrientationCust changes
  useEffect(() => {
    onChange("sexual_orientation_cust", undefined)
  }, [showOrientationCust])

  console.log(currentStepFields)



  return (
    <Wrapper>
      <StyledPoster src={posterImg} alt="Poster" />
      <StyledContent>
        <Header />
        {isFetching && <Loader />}
        {!isFetching && (
          <>
            <StyledTitle>{t("sign-up_title")}</StyledTitle>
            <StyledBox>
              <StepBtn onClick={() => onChangeStep(step - 1)}>
                <ChevronLeftIcon />
              </StepBtn>
              <SignUpSteps activeStep="3" />
              {showNextBtn ? <StepBtn onClick={handleSubmit}>
                <ChevronLeftIcon />
              </StepBtn> : <span></span>}
            </StyledBox>
            <StyledProgressTitle>{t("sign-up_progress")}</StyledProgressTitle>
            <ProgressBar compleetness={compleetness} />
            {currentStepFields?.length === 0 &&
              <>
                <StyledText>{t("sign-up2_images-label")}</StyledText>
                <UploadPhotosComponent />
              </>
            }
            {currentStepFields?.map((f: IField) => {
              if (f.name === "sexual_orientation_cust" && !showOrientationCust) {
                return null;
              }
              if (f.name === "pet" && !data.pets) return null;
              return <FieldInputComponent
                currency={data.income_curency}
                field={f}
                value={data[f.name]}
                onChange={(v) => onChange(f.name, v)}
                key={f.id}
                selectedCountryId={data.country?.value}
                selectedStateId={data.state?.value}
              />
            })}
            <StyledBtn onClick={handleSubmit}>
              {t("sign-up_next")}
            </StyledBtn>
          </>
        )}
      </StyledContent>
    </Wrapper>
  );
});

export default SignUpStep3;