[MKT_947]:feat/New checkout improves - #2077
Conversation
Deploying drive-web with
|
| Latest commit: |
e703909
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8a290992.drive-web.pages.dev |
| Branch Preview URL: | https://feat-cloudflare-turnstile-in.drive-web.pages.dev |
| </MenuItems> | ||
| </Transition> | ||
| </Menu> | ||
| {cryptoSelected && !isDropdownOpen && ( |
There was a problem hiding this comment.
Can you extract that to a constant? Something like const shouldDisplayAddressElement = cryptoSelected && !isDropdownOpen;
| options={CRYPTO_ADDRESS_ELEMENT_OPTIONS} | ||
| onChange={(event) => { | ||
| const { firstName, lastName, name, address } = event.value; | ||
| onUserNameChanges([firstName, lastName].filter(Boolean).join(' ').trim() || name); |
There was a problem hiding this comment.
Extract the filter/join/trim to a constant please.
There was a problem hiding this comment.
As you added an object for the translation keys for the errors, why you did not use these keys to match it against the error? I mean, instead of doing:
expect(hookState.current.authError).toBe('checkout.authComponent.authError.invalidCredentials');
you can do:
expect(hookState.current.authError).toBe(AUTH_ERROR_TRANSLATION_KEY['invalidCredentials']);
|
|
||
| try { | ||
| return await is2FANeeded(email); | ||
| } catch { |
| } catch (err) { | ||
| const error = err as Error; | ||
| setAuthError(error.message); | ||
| errorService.reportError(err); |
There was a problem hiding this comment.
No need to report the error. There is no instrument. it just logs the error.
| const { status } = errorService.castError(err); | ||
| const isTwoFactorEnabled = await isTwoFactorBlockingTheSignIn(email, authMethod, status); | ||
|
|
||
| setAuthError(translate(getAuthErrorTranslationKey({ status, authMethod, isTwoFactorEnabled }))); |
There was a problem hiding this comment.
Try to not anidate a lot of things. Extract getAuthErrorTranslationKey to a constant, like: const errorKey = getAuthErrorTranslationKey and then:
const errorMessage = translate(errorKey);
setAuthError(errorMessage);
| {cryptoSelected && !isDropdownOpen && ( | ||
| <div className="flex w-full flex-col gap-3"> | ||
| <div className="flex w-full border-t border-gray-10" /> | ||
| <AddressElement | ||
| options={CRYPTO_ADDRESS_ELEMENT_OPTIONS} | ||
| onChange={(event) => { | ||
| const { firstName, lastName, name, address } = event.value; | ||
| onUserNameChanges([firstName, lastName].filter(Boolean).join(' ').trim() || name); | ||
| onUserAddressChanges(address); | ||
| }} | ||
| /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Why did you move the AddressElement inside this component instead of handling it from the parent? I'm missing something? 🤔
Keep in mind that this component is the crypto currencies Dropdown. Not sure if this component should also handle the AddressElement.
There was a problem hiding this comment.
The idea from the beginning was to remove the billing address, but for cryptocurrency payments, it's necessary to know the buyer's address as well as their first and last name. I decided to include it within the component and have it displayed only after the cryptocurrency is selected, since that made more sense to me than putting it in the parent component. I've checked this with Fran, and everything is correct.
|
|
||
| if (currencyType === PaymentType['FIAT']) { | ||
| const { error: elementsError } = await elements.submit(); | ||
| const { confirmationToken, error: confirmationTokenError } = await stripeSDK.createConfirmationToken({ elements }); |
There was a problem hiding this comment.
How does it works? 🤔 When we need to pass the elements when currency is FIAT. Afaik, we only display the Elements when the currency is crypto isn't it?
There was a problem hiding this comment.
I use this confirmationToken to retrieve the ZIP code from the card payment widget created by Stripe. When a user from, say, Canada or the United States tries to make a purchase, they are automatically asked for their ZIP code, and we need it to correctly create the customer.
In the production environment right now, you can see that if you're in an area that requires a ZIP code, a new field appears for entering the ZIP code this was incorrect.
…b.com/internxt/drive-web into feat/checkout-improves
|
2 participants
Description
In this PR, we’ve improved the checkout process. Changes:
Until now, the postalCode was only required for a few countries, as it wasn’t always necessary, we used to dynamically display an input field that looked awful. We now retrieve this information from the widget used by Stripe.
The AvailableCryptoCurrenciesDropdown.tsx has been improved to make it clearer which cryptocurrency is intended for use. Furthermore, as payments with cryptocurrencies require the user’s first name, surname and address, we now dynamically display these fields, reusing the AddressElement previously used in the checkout process but integrated into this component.
Previously, when a user made a mistake whilst logging in at checkout (incorrect password, email already registered, etc.), we displayed an error showing the code, e.g. 409 now we display a short message that tells the user exactly what mistake they have made.
Related Issues
Related Pull Requests
Checklist
Testing Process
For testing purposes, I tried the following scenarios:
Additional Notes