Skip to content

Commit

Permalink
fix(customer): CHECKOUT-4880 Copy changes in passwordless login
Browse files Browse the repository at this point in the history
  • Loading branch information
@lpschz
lpschz committed May 12, 2020
1 parent bfcd375 commit bc4e6a5
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 39 deletions.
16 changes: 8 additions & 8 deletions src/app/customer/EmailLoginForm.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { mount } from 'enzyme';
import React, { FunctionComponent } from 'react';

import { getStoreConfig } from '../config/config.mock';
import { createLocaleContext, LocaleContext, LocaleContextType, TranslatedString } from '../locale';
import { createLocaleContext, LocaleContext, LocaleContextType, TranslatedHtml, TranslatedString } from '../locale';
import { Alert, AlertType } from '../ui/alert';
import { Form } from '../ui/form';
import { LoadingSpinner } from '../ui/loading';
Expand Down Expand Up @@ -35,7 +35,7 @@ describe('EmailLoginForm', () => {
.toEqual('Send');

expect(component.find('button[type="button"]').text())
.toEqual('Cancel');
.toEqual('Use another email');

expect(component.find(ModalHeader).find(TranslatedString).prop('id'))
.toEqual('login_email.header');
Expand Down Expand Up @@ -109,9 +109,6 @@ describe('EmailLoginForm', () => {

expect(component.find(ModalHeader).find(TranslatedString).prop('id'))
.toEqual('common.error_heading');

expect(component.find('button[type="button"]').text())
.toEqual('Ok');
});

it('renders "account not found" if error.status === 404', () => {
Expand Down Expand Up @@ -174,7 +171,7 @@ describe('EmailLoginForm', () => {
/>
);

expect(component.find('p').find(TranslatedString).props())
expect(component.find('p').find(TranslatedHtml).props())
.toEqual({
id: 'login_email.sent_text',
data: {
Expand All @@ -189,8 +186,11 @@ describe('EmailLoginForm', () => {
expect(component.find(EmailField).exists())
.toEqual(false);

expect(component.find('button[type="submit"]').text())
.toEqual('Resend');
expect(component.find('form a').at(0).text())
.toEqual('Resend the link');

expect(component.find('form a').at(1).text())
.toEqual('sign in using your password');
});

it('displays error message if email is invalid', async () => {
Expand Down
68 changes: 42 additions & 26 deletions src/app/customer/EmailLoginForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { withFormik, FormikProps } from 'formik';
import { noop } from 'lodash';
import React, { memo, useMemo, FunctionComponent } from 'react';

import { withLanguage, TranslatedString, WithLanguageProps } from '../locale';
import { withLanguage, TranslatedHtml, TranslatedLink, TranslatedString, WithLanguageProps } from '../locale';
import { Alert, AlertType } from '../ui/alert';
import { Button, ButtonVariant } from '../ui/button';
import { Form } from '../ui/form';
Expand Down Expand Up @@ -33,9 +33,10 @@ const EmailLoginForm: FunctionComponent<EmailLoginFormProps & WithLanguageProps
isOpen,
isSendingEmail = false,
emailHasBeenRequested,
onRequestClose,
onRequestClose = noop,
sentEmailError,
sentEmail,
submitForm,
values: {
email: formEmail,
},
Expand All @@ -56,34 +57,49 @@ const EmailLoginForm: FunctionComponent<EmailLoginFormProps & WithLanguageProps
return 'login_email.header';
}, [emailHasBeenRequested, sentEmailError, email]);

const footer = useMemo(() => (
<div className="modal-footer">
{ sentEmailError && sentEmailError.status === 429 ?
const footer = useMemo(() => {
if (sentEmailError && sentEmailError.status === 429) {
return null;
}

if (emailHasBeenRequested && !sentEmailError) {
if (isSendingEmail) {
return <LoadingSpinner isLoading />;
}

return (
<p>
<TranslatedLink
id="login_email.resend_link"
onClick={ submitForm }
/>
<TranslatedLink
id="login_email.use_password"
onClick={ onRequestClose }
/>
</p>
);
}

return (
<div className="modal-footer">
<Button
className="optimizedCheckout-buttonSecondary"
onClick={ onRequestClose }
type="button"
>
<TranslatedString id="login_email.use_another_email" />
</Button>
<Button
isLoading={ isSendingEmail }
type="submit"
variant={ ButtonVariant.Primary }
>
<TranslatedString id="common.ok_action" />
</Button> :
<>
<Button
className="optimizedCheckout-buttonSecondary"
onClick={ onRequestClose }
type="button"
>
<TranslatedString id="common.cancel_action" />
</Button>
<Button
isLoading={ isSendingEmail }
type="submit"
variant={ ButtonVariant.Primary }
>
<TranslatedString id={ emailHasBeenRequested ? 'login_email.resend' : 'login_email.send' } />
</Button>
</> }
</div>
), [sentEmailError, emailHasBeenRequested, isSendingEmail, onRequestClose]);
<TranslatedString id="login_email.send" />
</Button>
</div>
);
}, [sentEmailError, emailHasBeenRequested, submitForm, isSendingEmail, onRequestClose]);

const error = useMemo(() => {
if (!sentEmailError) {
Expand Down Expand Up @@ -114,7 +130,7 @@ const EmailLoginForm: FunctionComponent<EmailLoginFormProps & WithLanguageProps

return (
<p>
<TranslatedString
<TranslatedHtml
data={ {
email: formEmail,
minutes: Math.round(expiry / 60),
Expand Down
7 changes: 5 additions & 2 deletions src/app/customer/LoginForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,15 +157,18 @@ const LoginForm: FunctionComponent<LoginFormProps & WithLanguageProps & FormikPr

{ canCancel &&
viewType !== CustomerViewType.EnforcedLogin &&
viewType !== CustomerViewType.SuggestedLogin &&
viewType !== CustomerViewType.SuggestedLogin &&
<a
className="button optimizedCheckout-buttonSecondary"
data-test="customer-cancel-button"
href="#"
id="checkout-customer-cancel"
onClick={ preventDefault(onCancel) }
>
<TranslatedString id="common.cancel_action" />
<TranslatedString id={ viewType === CustomerViewType.CancellableEnforcedLogin ?
'login_email.use_another_email' :
'common.cancel_action' }
/>
</a> }
</div>

Expand Down
8 changes: 5 additions & 3 deletions src/app/locale/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,16 @@
"error_server": "We couldn't send you a sign-in link. Please try again.",
"error_not_found": "The entered email is not associated to an account. Please try with a different email.",
"sent_header": "Check your inbox",
"sent_text": "We’ve sent an email to {email} that contains a sign-in link. This will expire in {minutes} minutes - If you don’t see it in your inbox, check your junk folder.",
"sent_text": "We’ve sent an email to <strong>{email}</strong> that contains a sign-in link. This will expire in {minutes} minutes - If you don’t see it in your inbox, check your junk folder.",
"text": "Enter the email address associated to your account. We will send you a sign-in link.",
"header": "Enter your email address",
"header_with_email": "Confirm your email address",
"link": "Forgot password? <a>Send me a sign-in link</a>.",
"link": "<a>Send me a sign-in link instead</a>.",
"use_another_email": "Use another email",
"send": "Send",
"error_temporary_disabled": "Sign-in email functionality is temporary unavailable. Please sign in by entering your password.",
"resend": "Resend"
"resend_link": "Didn't get the email? <a>Resend the link</a>",
"use_password": " or <a>sign in using your password</a> instead."
},
"embedded_checkout": {
"unsupported_error": "The following payment methods are not supported by Embedded Checkout: {methods}. Please contact us for assistance."
Expand Down
7 changes: 7 additions & 0 deletions src/scss/components/foundation/modal/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,13 @@
@include headingStyle("h4");
}

.modal-body {
.modal-footer {
padding-left: 0;
padding-right: 0;
}
}

.modal-footer {
border-top: 0;

Expand Down

0 comments on commit bc4e6a5

Please sign in to comment.