Skip to content

Commit

Permalink
fix email field validation in Contact Information (#2764)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tvikito
tvikito authored Sep 6, 2023
2 parents e5e4d04 + 3fc5e59 commit 8e93128
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 58 deletions.
6 changes: 3 additions & 3 deletions storefront/components/Basic/RangeSlider/RangeSlider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const RangeSlider: FC<RangeSliderProps> = ({
const onChangeMinInputHandler: ChangeEventHandler<HTMLInputElement> = (event) =>
setMinValueInput(parseFloat(event.currentTarget.value));

const onKeyPressHandler: KeyboardEventHandler<HTMLInputElement> = (event) =>
const onKeyDownHandler: KeyboardEventHandler<HTMLInputElement> = (event) =>
event.key === 'Enter' && event.currentTarget.blur();

const onChangeMinHandler = (event: ChangeEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -219,7 +219,7 @@ export const RangeSlider: FC<RangeSliderProps> = ({
value={minValueInput}
onChange={onChangeMinInputHandler}
onBlur={onBlurMinHandler}
onKeyPress={onKeyPressHandler}
onKeyDown={onKeyDownHandler}
disabled={isDisabled}
/>
</div>
Expand All @@ -235,7 +235,7 @@ export const RangeSlider: FC<RangeSliderProps> = ({
value={maxValueInput}
onChange={onChangeMaxInputHandler}
onBlur={onBlurMaxHandler}
onKeyPress={onKeyPressHandler}
onKeyDown={onKeyDownHandler}
disabled={isDisabled}
/>
</div>
Expand Down
17 changes: 13 additions & 4 deletions storefront/components/Forms/TextInput/TextInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,17 @@ import { twMergeCustom } from 'helpers/twMerge';

type NativeProps = ExtractNativePropsFromDefault<
InputHTMLAttributes<HTMLInputElement>,
'id' | 'onChange',
'name' | 'disabled' | 'required' | 'onBlur' | 'onKeyPress' | 'className' | 'type' | 'children' | 'autoComplete'
'id',
| 'name'
| 'disabled'
| 'required'
| 'onBlur'
| 'onKeyDown'
| 'className'
| 'type'
| 'children'
| 'autoComplete'
| 'onChange'
>;

export type TextInputProps = NativeProps & {
Expand All @@ -30,7 +39,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
required,
onBlur,
onChange,
onKeyPress,
onKeyDown,
className,
dataTestId,
value,
Expand Down Expand Up @@ -64,7 +73,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
name={name}
onBlur={onBlur}
onChange={onChange}
onKeyPress={onKeyPress}
onKeyDown={onKeyDown}
required={required}
value={value}
type={type}
Expand Down
5 changes: 3 additions & 2 deletions storefront/components/Forms/TextInput/TextInputControlled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ type TextInputControlledProps = {
| 'disabled'
| 'required'
| 'onBlur'
| 'onKeyPress'
| 'onKeyDown'
| 'onChange'
| 'type'
| 'label'
| 'inputSize'
Expand Down Expand Up @@ -39,7 +40,7 @@ export const TextInputControlled: FC<TextInputControlledProps> = ({
(event) => {
field.onBlur();

if (textInputProps.onBlur !== undefined) {
if (textInputProps.onBlur) {
textInputProps.onBlur(event);
}
},
Expand Down
6 changes: 3 additions & 3 deletions storefront/components/Pages/Order/ContactInformation/ContactInformationCompany.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const ContactInformationCompany: FC = () => {
required: true,
type: 'text',
autoComplete: 'organization',
onBlur: () => updateContactInformation({ companyName: companyNameValue }),
onChange: () => updateContactInformation({ companyName: companyNameValue }),
}}
/>
<TextInputControlled
Expand All @@ -54,7 +54,7 @@ export const ContactInformationCompany: FC = () => {
label: formMeta.fields.companyNumber.label,
required: true,
type: 'text',
onBlur: () => updateContactInformation({ companyNumber: companyNumberValue }),
onChange: () => updateContactInformation({ companyNumber: companyNumberValue }),
}}
/>
<TextInputControlled
Expand All @@ -70,7 +70,7 @@ export const ContactInformationCompany: FC = () => {
label: formMeta.fields.companyTaxNumber.label,
required: false,
type: 'text',
onBlur: () => updateContactInformation({ companyTaxNumber: companyTaxNumberValue }),
onChange: () => updateContactInformation({ companyTaxNumber: companyTaxNumberValue }),
}}
/>
</>
Expand Down
50 changes: 14 additions & 36 deletions storefront/components/Pages/Order/ContactInformation/ContactInformationContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,57 +27,34 @@ const Popup = dynamic(() => import('components/Layout/Popup/Popup').then((compon

export const ContactInformationContent: FC = () => {
const { t } = useTranslation();
const [isLoginPopupOpened, setIsLoginPopupOpened] = useState(false);
const updateContactInformation = usePersistStore((store) => store.updateContactInformation);
const formProviderMethods = useFormContext<ContactInformation>();
const { trigger, formState } = formProviderMethods;
const formMeta = useContactInformationFormMeta(formProviderMethods);
const isUserLoggedIn = !!useCurrentCustomerData();
const { formState } = formProviderMethods;

const formMeta = useContactInformationFormMeta(formProviderMethods);
const emailValue = useWatch({ name: formMeta.fields.email.name, control: formProviderMethods.control });
const [isEmailFilledCorrectly, setIsEmailFilledCorrectly] = useState(false);
const [isEmailAlreadyRegistered, setIsEmailAlreadyRegistered] = useState(false);
const [isLoginPopupOpened, setIsLoginPopupOpened] = useState(false);
const [{ data: termsAndConditionsArticleUrlData }] = useTermsAndConditionsArticleUrlQueryApi();
const termsAndConditionsArticleUrl = termsAndConditionsArticleUrlData?.termsAndConditionsArticle?.slug;
const [{ data: privacyPolicyArticleUrlData }] = usePrivacyPolicyArticleUrlQueryApi();

const termsAndConditionsArticleUrl = termsAndConditionsArticleUrlData?.termsAndConditionsArticle?.slug;
const privacyPolicyArticleUrl = privacyPolicyArticleUrlData?.privacyPolicyArticle?.slug;
const isEmailFilledCorrectly = !!emailValue && !formState.errors.email;

const [{ data: isCustomerUserRegisteredData }] = useIsCustomerUserRegisteredQueryApi({
variables: {
email: emailValue,
},
pause: !isEmailFilledCorrectly,
});

const loginHandler = () => {
setIsLoginPopupOpened(true);
};

useEffect(() => {
if (isUserLoggedIn === true) {
if (isUserLoggedIn) {
setIsLoginPopupOpened(false);
}
}, [isUserLoggedIn]);

const onCloseLoginPopupHandler = () => {
setIsLoginPopupOpened(false);
};

useEffect(() => {
if (formState.touchedFields.email !== undefined) {
setIsEmailFilledCorrectly(formState.errors.email === undefined);
return;
}

if (emailValue.length > 0) {
trigger('email', { shouldFocus: true }).then((isEmailValid) => {
setIsEmailFilledCorrectly(isEmailValid);
});
}
}, [emailValue, trigger, formState.touchedFields, formState.errors]);

useEffect(() => {
setIsEmailAlreadyRegistered(!!isCustomerUserRegisteredData?.isCustomerUserRegistered);
}, [isCustomerUserRegisteredData?.isCustomerUserRegistered]);

return (
<>
<TextInputControlled
Expand All @@ -94,12 +71,12 @@ export const ContactInformationContent: FC = () => {
required: true,
type: 'email',
autoComplete: 'email',
onBlur: () => updateContactInformation({ email: emailValue }),
onChange: () => updateContactInformation({ email: emailValue }),
}}
/>

{isEmailAlreadyRegistered && !isUserLoggedIn && (
<Button size="small" type="button" onClick={loginHandler} className="mb-5">
{isCustomerUserRegisteredData?.isCustomerUserRegistered && !isUserLoggedIn && (
<Button size="small" type="button" onClick={() => setIsLoginPopupOpened(true)} className="mb-5">
{t('User with this email is already registered. Do you want to sign in')}
</Button>
)}
Expand Down Expand Up @@ -138,8 +115,9 @@ export const ContactInformationContent: FC = () => {
}}
/>
</div>

{isLoginPopupOpened && (
<Popup onCloseCallback={onCloseLoginPopupHandler}>
<Popup onCloseCallback={() => setIsLoginPopupOpened(false)}>
<Heading type="h2">{t('Login')}</Heading>
<Login defaultEmail={emailValue} />
</Popup>
Expand Down
23 changes: 13 additions & 10 deletions storefront/pages/order/contact-information.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const ContactInformationPage: FC<ServerSidePropsType> = () => {

let deliveryInfo;

if (currentCart.pickupPlace !== null) {
if (currentCart.pickupPlace) {
deliveryInfo = {
deliveryFirstName: formValues.differentDeliveryAddress
? formValues.deliveryFirstName
Expand Down Expand Up @@ -141,12 +141,12 @@ const ContactInformationPage: FC<ServerSidePropsType> = () => {
});

if (
createOrderResult.data !== undefined &&
createOrderResult.data.CreateOrder.orderCreated === true &&
createOrderResult.data.CreateOrder.order !== null &&
currentCart.cart !== null &&
currentCart.transport !== null &&
currentCart.payment !== null
createOrderResult.data &&
createOrderResult.data.CreateOrder.orderCreated &&
createOrderResult.data.CreateOrder.order &&
currentCart.cart &&
currentCart.transport &&
currentCart.payment
) {
const gtmCreateOrderEventOrderPart = getGtmCreateOrderEventOrderPart(
currentCart.cart,
Expand Down Expand Up @@ -199,9 +199,9 @@ const ContactInformationPage: FC<ServerSidePropsType> = () => {
setOrderCreating(false);

if (
createOrderResult.data !== undefined &&
createOrderResult.data.CreateOrder.orderCreated === false &&
createOrderResult.data.CreateOrder.cart !== null
createOrderResult.data &&
!createOrderResult.data.CreateOrder.orderCreated &&
createOrderResult.data.CreateOrder.cart
) {
handleCartModifications(createOrderResult.data.CreateOrder.cart.modifications, t, changePaymentInCart);
}
Expand All @@ -219,6 +219,7 @@ const ContactInformationPage: FC<ServerSidePropsType> = () => {
return (
<>
<MetaRobots content="noindex" />

<EmptyCartWrapper currentCart={currentCart} title={t('Order')} enableHandling={!orderCreating}>
<OrderLayout activeStep={3}>
<FormProvider {...formProviderMethods}>
Expand All @@ -236,9 +237,11 @@ const ContactInformationPage: FC<ServerSidePropsType> = () => {
</Form>
</FormProvider>
</OrderLayout>

<Webline type="dark">
<Footer simpleFooter />
</Webline>

{isErrorPopupVisible && (
<ErrorPopup
onCloseCallback={() => setErrorPopupVisibility(false)}
Expand Down

0 comments on commit 8e93128

Please sign in to comment.