Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // TODO: слишком переусложнил компонент изза меняющихся требований, не мешало бы розбить на отдельные компоненты
- import React from 'react';
- import styled from 'styled-components';
- import { Form } from 'react-final-form';
- import { useTranslation } from 'next-i18next';
- import { Typography } from '../Typography';
- import { FormField, FormFieldTypeEnum } from '../FormField';
- import { Button } from '../Button';
- import { FormFields } from './types';
- import { useValidationSchema } from '../../hooks/useValidationSchema';
- import { getValidationSchema } from './validation';
- import CardIcon from '../../icons/legacy/card-number.svg';
- import { IInputProps } from '../Input/types';
- import { getIsMoscowRegion } from '../../api/tariffs/helpers';
- import { WriteRemoteCheckboxField } from '../WriteRemoteCheckboxField';
- import { IRegion } from '../../api/region';
- interface IDefaultFields {
- [FormFields.phone]: string;
- [FormFields.email]: string;
- }
- export type IConfirmOrderModalFormValues<
- WithCard = false,
- WithDepositAmount = false,
- WithWriteRemote = false,
- > = IDefaultFields &
- (WithCard extends true
- ? {
- [FormFields.cardNumber]: string;
- }
- : {}) &
- (WithDepositAmount extends true
- ? {
- [FormFields.depositAmount]: string;
- }
- : {}) &
- (WithWriteRemote extends true
- ? {
- [FormFields.writeRemote]: boolean | undefined;
- }
- : {});
- type ICommonProps<
- WithCard extends boolean = false,
- WithDepositAmount extends boolean = false,
- WithWriteRemote extends boolean = false,
- > = {
- onSubmit: (values: IConfirmOrderModalFormValues<WithCard, WithDepositAmount, WithWriteRemote>) => void;
- withCardNumber?: boolean;
- withDepositAmount?: boolean;
- depositAmountRules?: {
- min: number;
- max: number;
- description: string;
- };
- isLoading?: boolean;
- };
- type IConfirmPersonalOrderProps<
- WithCard extends boolean = false,
- WithDepositAmount extends boolean = false,
- WithWriteRemote extends boolean = false,
- > = WithWriteRemote extends true
- ? { region: IRegion } & ICommonProps<WithCard, WithDepositAmount, WithWriteRemote>
- : { region?: undefined } & ICommonProps<WithCard, WithDepositAmount, WithWriteRemote>;
- export const ConfirmPersonalOrder = <
- WithCard extends boolean = false,
- WithDepositAmount extends boolean = false,
- WithWriteRemote extends boolean = false,
- >({
- region,
- onSubmit,
- isLoading = false,
- depositAmountRules,
- withDepositAmount = false,
- withCardNumber = false,
- }: IConfirmPersonalOrderProps<WithCard, WithDepositAmount, WithWriteRemote>) => {
- const { t } = useTranslation();
- const validation = useValidationSchema(
- getValidationSchema({ withCardNumber, withDepositAmount, depositAmountRules }),
- );
- return (
- <Wrapper>
- <Caption>{t('Укажите контактные данные для оформления заказа и оплаты билета')}</Caption>
- <Form<IConfirmOrderModalFormValues<WithCard, WithDepositAmount, WithWriteRemote>>
- // @ts-ignore
- onSubmit={onSubmit}
- validate={validation}
- >
- {({ handleSubmit, valid }) => (
- <FormInner onSubmit={handleSubmit}>
- <FormInputs>
- {withCardNumber && (
- <FormField
- key="card-input"
- name={FormFields.cardNumber}
- label={t('Номер карты Тройка')}
- icon={<CardIcon />}
- placeholder="0000 000 000"
- mask="9999 999 999"
- />
- )}
- {withDepositAmount && (
- <div>
- <FormField<IInputProps>
- name={FormFields.depositAmount}
- label={t('Сумма')}
- placeholder="0.00 ₽"
- step="0.01"
- type="number"
- />
- {depositAmountRules?.description && (
- <FieldCaption>{depositAmountRules.description}</FieldCaption>
- )}
- </div>
- )}
- <FormField
- fieldType={FormFieldTypeEnum.phone}
- name={FormFields.phone}
- label={t('Номер телефона')}
- placeholder="+7 ___ ___ __ __"
- />
- <FormField
- name={FormFields.email}
- label={t('E-mail')}
- placeholder={t('Укажите e-mail')}
- type="email"
- />
- {region && getIsMoscowRegion(region) && (
- <WriteRemoteCheckboxField name={FormFields.writeRemote} />
- )}
- </FormInputs>
- <SmallText>
- {t('Оплачивая заказ, вы соглашаетесь с')}{' '}
- <a href="/user-agreement" target="_blank">
- {t('условиями сервиса')}
- </a>{' '}
- {t('и')}{' '}
- <a href="/user-agreement" target="_blank">
- {t('политикой обработки персональных данных')}
- </a>
- {t('. После оплаты заказа, не забудьте записать билет на вашу Тройку.')}
- </SmallText>
- <SubmitButton disabled={!valid || isLoading} htmlType="submit">
- {t('Перейти к оплате')}
- </SubmitButton>
- </FormInner>
- )}
- </Form>
- </Wrapper>
- );
- };
- const Wrapper = styled.div`
- display: flex;
- flex-direction: column;
- flex: 1;
- `;
- const Caption = styled(Typography).attrs({ variant: 'regular16' })`
- color: ${({ theme }) => theme.colors.black()};
- margin-bottom: 24px;
- `;
- const SmallText = styled(Typography).attrs({ variant: 'regular12' })`
- color: ${({ theme }) => theme.colors.black()};
- margin-top: 24px;
- margin-bottom: 10px;
- a {
- text-decoration: underline;
- }
- `;
- const FormInner = styled.form`
- display: flex;
- flex-direction: column;
- flex: 1;
- `;
- const FormInputs = styled.div`
- display: grid;
- grid-auto-flow: row;
- grid-gap: 24px;
- `;
- const SubmitButton = styled(Button)`
- margin: 36px auto 0;
- @media ${({ theme }) => theme.breakpoints.sm} {
- width: 100%;
- margin-top: auto;
- }
- `;
- const FieldCaption = styled(Typography).attrs({ variant: 'regular12', color: 'gray' })`
- margin-top: 8px;
- margin-left: 4px;
- `;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement