guestform.js

import React, { Fragment, useEffect, useRef } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { Form } from 'informed';
import { func, shape, string, arrayOf, number } from 'prop-types';
import { AlertCircle } from 'react-feather';
import { useGuestForm } from './useGuestForm';
import { useToasts } from '@magento/peregrine';

import { useStyle } from '@magento/venia-ui/lib/classify';
import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
import Button from '@magento/venia-ui/lib/components/Button';
import Country from '@magento/venia-ui/lib/components/Country';
import Field, { Message } from '@magento/venia-ui/lib/components/Field';
import FormError from '@magento/venia-ui/lib/components/FormError';
import Region from '@magento/venia-ui/lib/components/Region';
import Postcode from '@magento/venia-ui/lib/components/Postcode';
import TextInput from '@magento/venia-ui/lib/components/TextInput';
import Icon from '@magento/venia-ui/lib/components/Icon';
import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';

const AlertCircleIcon = <Icon src={AlertCircle} attrs={{ width: 20 }} />;

const GuestForm = props => {
    const {
        afterSubmit,
        classes: propClasses,
        onCancel,
        onSuccess,
        shippingData,
        toggleSignInContent,
        setGuestSignInUsername
    } = props;

    const talonProps = useGuestForm({
        afterSubmit,
        onCancel,
        onSuccess,
        shippingData,
        toggleSignInContent,
        setGuestSignInUsername
    });

    const {
        flatData
    }=usePriceSummary();

    const {
        errors,
        handleCancel,
        handleSubmit,
        initialValues,
        isSaving,
        isUpdate,
        handleValidateEmail,
        showSignInToast,
        handleToastAction
    } = talonProps;

    const {
        total,
    } = flatData;
    const formApiRef = useRef();
    const getFormApi = api => {
        formApiRef.current = api;
    };

    const [, { addToast }] = useToasts();

    const { formatMessage } = useIntl();
    const classes = useStyle({}, propClasses);

    const guestEmailMessage = !isUpdate ? (
        <Message>
            <FormattedMessage
                id={'guestForm.emailMessage'}
                defaultMessage={
                    'Set a password at the end of guest checkout to create an account in one easy step.'
                }
            />
        </Message>
    ) : null;

    const cancelButton = isUpdate ? (
        <Button disabled={isSaving} onClick={handleCancel} priority="low">
            <FormattedMessage
                id={'global.cancelButton'}
                defaultMessage={'Cancel'}
            />
        </Button>
    ) : null;

    const continueToMessage = formatMessage({
            id: 'guestForm.continueToNextStep'
        })

    const submitButtonText = isUpdate
        ? formatMessage({
            id: 'global.updateButton',
            defaultMessage: 'Update'
        })
        : formatMessage({
            id: 'guestForm.continueToNextStep',
            defaultMessage: 'Save and continue'
        });
    const submitButtonProps = {
        disabled: isSaving,
        priority: isUpdate ? 'high' : 'normal',
        type: 'submit'
    };

    useEffect(() => {
        if (showSignInToast) {
            addToast({
                type: 'info',
                icon: AlertCircleIcon,
                message: formatMessage({
                    id: 'checkoutPage.suggestSignInMessage',
                    defaultMessage:
                        'The email you provided is associated with an existing Venia account. Would you like to sign into this account?'
                }),
                timeout: false,
                dismissable: true,
                hasDismissAction: true,
                dismissActionText: formatMessage({
                    id: 'checkoutPage.suggestSignInDeclineMessage',
                    defaultMessage: 'No, thanks'
                }),
                actionText: formatMessage({
                    id: 'checkoutPage.suggestSignInConfirmMessage',
                    defaultMessage: 'Yes, sign in'
                }),
                onAction: removeToast =>
                    handleToastAction(
                        removeToast,
                        formApiRef.current.getValue('email')
                    )
            });
        }
    }, [addToast, formatMessage, showSignInToast, handleToastAction]);

    return (
        <Fragment>
            <FormError errors={Array.from(errors.values())} />
            <Form
                className={classes.root + " grid grid-cols-2 gap-y-[1.5rem] gap-x-4"}
                data-cy="GuestForm-root"
                initialValues={initialValues}
                onSubmit={handleSubmit}
                getApi={getFormApi}
            >
                <div className={classes.email + " col-span-2"}>
                    <Field
                        id="email"
                        label={formatMessage({
                            id: 'global.email',
                            defaultMessage: 'Email'
                        })}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'shippingForm.shippingEmail',
                                defaultMessage: 'Shipping Email'
                            })}
                            field="email"
                            id="email"
                            data-cy="GuestForm-email"
                            validate={isRequired}
                            onBlur={() =>
                                handleValidateEmail(
                                    formApiRef.current.getValue('email')
                                )
                            }
                            onPaste={e => {
                                const text = e.clipboardData.getData(
                                    'text/plain'
                                );
                                handleValidateEmail(text);
                            }}
                        />
                        {guestEmailMessage}
                    </Field>
                </div>
                <div className={classes.firstname}>
                    <Field
                        id="firstname"
                        label={formatMessage({
                            id: 'global.firstName',
                            defaultMessage: 'First Name'
                        })}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'global.firstName',
                                defaultMessage: 'First Name'
                            })}
                            field="firstname"
                            id="firstname"
                            data-cy="GuestForm-firstName"
                            validate={isRequired}
                        />
                    </Field>
                </div>
                <div className={classes.lastname}>
                    <Field
                        id="lastname"
                        label={formatMessage({
                            id: 'global.lastName',
                            defaultMessage: 'Last Name'
                        })}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'global.lastName',
                                defaultMessage: 'Last Name'
                            })}
                            field="lastname"
                            id="lastname"
                            data-cy="GuestForm-lastName"
                            validate={isRequired}
                        />
                    </Field>
                </div>
                <div className={classes.country + " col-span-2"}>
                    <Country
                        autoComplete={formatMessage({
                            id: 'country.label',
                            defaultMessage: 'Country'
                        })}
                        validate={isRequired}
                        data-cy="GuestForm-country"
                    />
                </div>
                {total?.value >200000 ?
                <div className={classes.pan_number + " col-span-2"}>
                    <Field
                        id="pan_number"
                        label={formatMessage({
                            id: 'global.pan_number',
                            defaultMessage: 'PAN'
                        })}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'global.pan_number',
                                defaultMessage: 'PAN'
                            })}
                            field="pan_number"
                            id="pan_number"
                            data-cy="GuestForm-pan_number"
                            validate={isRequired}
                        />
                    </Field>
                </div>:null}
                <div className={classes.street0 + " col-span-2"}>
                    <Field
                        id="street0"
                        label={formatMessage({
                            id: 'global.streetAddress',
                            defaultMessage: 'Street Address'
                        })}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'global.streetAddress',
                                defaultMessage: 'Street Address'
                            })}
                            field="street[0]"
                            id="street0"
                            data-cy="GuestForm-street0"
                            validate={isRequired}
                        />
                    </Field>
                </div>
                <div className={classes.street1 + " col-span-2"}>
                    <Field
                        id="street1"
                        label={formatMessage({
                            id: 'global.streetAddress2',
                            defaultMessage: 'Street Address 2'
                        })}
                        optional={true}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'global.streetAddress2',
                                defaultMessage: 'Street Address 2'
                            })}
                            field="street[1]"
                            id="street1"
                            data-cy="GuestForm-street1"
                        />
                    </Field>
                </div>
                <div className={classes.city + " col-span-2"}>
                    <Field
                        id="city"
                        label={formatMessage({
                            id: 'global.city',
                            defaultMessage: 'City'
                        })}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'global.city',
                                defaultMessage: 'City'
                            })}
                            field="city"
                            id="city"
                            data-cy="GuestForm-city"
                            validate={isRequired}
                        />
                    </Field>
                </div>
                <div className={classes.region + " col-span-2"}>
                    <Region
                        autoComplete={formatMessage({
                            id: 'region.label',
                            defaultMessage: 'State'
                        })}
                        validate={isRequired}
                        fieldInput={'region[region]'}
                        fieldSelect={'region[region_id]'}
                        optionValueKey={'id'}
                        data-cy="GuestForm-region"
                    />
                </div>
                <div className={classes.postcode + " col-span-2"}>
                    <Postcode
                        autoComplete={formatMessage({
                            id: 'postcode.label',
                            defaultMessage: 'ZIP / Postal Code'
                        })}
                        validate={isRequired}
                        data-cy="GuestForm-postcode"
                    />
                </div>
                <div className={classes.telephone + " col-span-2"}>
                    <Field
                        id="telephone"
                        label={formatMessage({
                            id: 'global.phoneNumber',
                            defaultMessage: 'Phone Number'
                        })}
                    >
                        <TextInput
                            autoComplete={formatMessage({
                                id: 'global.phoneNumber',
                                defaultMessage: 'Phone Number'
                            })}
                            field="telephone"
                            id="telephone"
                            data-cy="GuestForm-telephone"
                            validate={isRequired}
                        />
                    </Field>
                </div>
                <div className={classes.buttons}>
                    {cancelButton}
                    <Button
                        {...submitButtonProps}
                        className="font-lato text-[12px] text-[#fff] bg-[#181A1D] py-[1rem] px-[2rem] tracking-[2.4px] uppercase mr-4 rounded search_button"
                        data-cy="GuestForm-submitButton"
                    >
                        {submitButtonText}
                    </Button>
                </div>
            </Form>
        </Fragment>
    );
};

export default GuestForm;

GuestForm.defaultProps = {
    shippingData: {
        country: {
            code: DEFAULT_COUNTRY_CODE
        },
        region: {
            code: ''
        }
    }
};

GuestForm.propTypes = {
    afterSubmit: func,
    classes: shape({
        root: string,
        field: string,
        email: string,
        firstname: string,
        lastname: string,
        country: string,
        street0: string,
        street1: string,
        city: string,
        pan_number:string,
        region: string,
        postcode: string,
        telephone: string,
        buttons: string,
        submit: string,
        submit_update: string
    }),
    onCancel: func,
    onSuccess: func.isRequired,
    shippingData: shape({
        city: string,
        country: shape({
            code: string.isRequired
        }).isRequired,
        email: string,
        firstname: string,
        lastname: string,
        postcode: string,
        region: shape({
            region_id: number,
            region: string
        }).isRequired,
        street: arrayOf(string),
        pan_number:string,
        telephone: string
    }),
    toggleSignInContent: func.isRequired,
    setGuestSignInUsername: func.isRequired
};