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

src/views/SignUpViews/SignUpStep2.tsx
231 строка6 KB
Eddy
initial commit
22 июл 2024, 17:14
22 июл 2024, 17:14b43c0d0
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import {
  IField,
  useUserGetFieldsQuery,
  useUserRegistrationProfileMutation,
} from "../../api/user";
import {
  FieldInputComponent,
  Header,
} from "../../components/common";
import {
  SignUpSteps, Step2Warning,
} from "../../components/SignUpComponents";
import posterImg from "../../images/sign-up2-image.png";
import { Button } from "../../UI/Button";
import { Radio } from "../../UI/Radio";
import { SubTitle, Title } from "../../UI/Title";
import { hostUrl } from "../../api";
import { ChevronLeftIcon } from "../../UI/SVG";
import { convertFormData } from "../../utils";
import { useDispatch } from "react-redux";
import { setAlert } from "../../store/app";

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;
  align-items: center;
  margin-bottom: 20px;
`

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

const StyledSubtitle = styled(SubTitle)`
  margin-bottom: 20px;
`;

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

const PrivacyBox = styled.div`
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 300; 
  font-size: 12px;
  margin-bottom: 33px;
  span {
    color: #2a9b9f;
  }
`;


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



const SignUpStep2 = React.memo(({ data, onChange, onNext, onChangeStep }: IProps) => {
  const { t } = useTranslation();
  const dispatch = useDispatch()
  const [registrationProfile, { isLoading: isLoading }]: any = useUserRegistrationProfileMutation();
  const { data: fields, isFetching } = useUserGetFieldsQuery();
  const [showWarning, setShowWarning] = useState<boolean>(true)


  const handleRegistration = useCallback(async () => {
    const requestData: { [key: string]: any } = convertFormData(data, fields);
    registrationProfile(requestData)
      .unwrap()
      .then((r: any) => onNext())
      .catch((e: any) => {
        dispatch(setAlert({ isError: true, text: e }))
      })
  }, [data, fields])


  const handleSetFormData = useCallback((key: string, value: any) => {
    if (key === 'country') {
      onChange("country", null)
      onChange("city", null)
    }
    if (key === 'state') {
      onChange("city", null)
    }
    onChange(key, value)
  }, []);

  const Step2Fields = useMemo(() => {
    return (
      fields
        ?.filter((f: IField) => f.is_registration)
        .filter((f: IField) => f.step === 2) || []
    );
  }, [fields]);



  const onClickLink = useCallback((e: any) => {
    e.stopPropagation();
    if (e.target.localName === 'span') {
      window.open(`${hostUrl}/privacy_policy`);
    };
  }, []);


  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])


  return (
    <Wrapper>
      <StyledPoster src={posterImg} alt="Poster" />
      <StyledContent>
        <Header />
        {!isFetching && (
          <>
            <StyledTitle>{t("sign-up_title")}</StyledTitle>
            <StyledBox>
              <span></span>
              <SignUpSteps activeStep="2" />
              {data._accepted ? (
                <StepBtn onClick={() => onChangeStep(3)}>
                  <ChevronLeftIcon />
                </StepBtn>
              ) : (
                <span></span>
              )}
            </StyledBox>
            <StyledSubtitle>{t("sign-up2_subtitle")}</StyledSubtitle>
            {Step2Fields.map((f) => {
              let hint;
              if (f.name === 'birth_date' || f.name === 'mobile_phone') {
                hint = t('field-privacy');
              }
              if (f.name === 'mobile_phone') return;
              if (f.name === "sexual_orientation_cust" && !showOrientationCust) {
                return null;
              }
              if (f.name === "pet" && !data.pets) return null;
              return (
                <FieldInputComponent
                  field={f}
                  value={data[f.name]}
                  onChange={(v) => handleSetFormData(f.name, v)}
                  currency={data.income_currency}
                  key={f.id}
                  selectedCountryId={data.country?.value}
                  selectedStateId={data.state?.value}
                  hint={hint}

                />
              );
            })}
            <StyledBtn disabled={!data._accepted || isLoading} onClick={handleRegistration}>
              {t("sign-up_next")}
            </StyledBtn>
            <PrivacyBox>
              <Radio
                active={data._accepted}
                onChange={(v) => onChange("_accepted", v)}
                label={
                  <p onClick={onClickLink}
                    dangerouslySetInnerHTML={{ __html: t("sign-up2_privacy") || "" }}
                  ></p>
                }
              />
            </PrivacyBox>
          </>
        )}
      </StyledContent>
      <Step2Warning
        show={showWarning}
        onClose={() => setShowWarning(false)}
      />
    </Wrapper>
  );
});

export default SignUpStep2;