[Hooks integration] Checkout Payment Section + Checkout Confirmation Page #1075

kevinxh · 2023-03-21T15:39:19Z

This PR converts the checkout payment section to use commerce-sdk-react hooks. This PR also includes the switch from OCAPI to SCAPI for checkout on retail react app.

Important UX changes

There is a significant change in terms of how payment is handled on SCAPI. Apparently SCAPI no longer accepts customer_payment_instrument_id as an input, which means that shoppers will not be able to apply their saved payments to the basket. The saved payments feature on retail react app becomes meaningless, and we have decided to remove the following UI components:

account payments page
checkout select saved payment component

Changes:

convert checkout confirmation page to use hooks
update checkout confirmation route to include order id
remove payment selection / forms
reduce checkout context complexity

…ments

packages/template-retail-react-app/app/pages/cart/index.jsx

…ments

vmarta

Comparing the current behaviours vs the original one..

packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx

vmarta

I'll continue reviewing the other files.

vmarta · 2023-03-22T19:25:28Z

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx


 const CheckoutConfirmation = () => {
+    const {orderNo} = useParams()


It's cool now the confirmation page is appending the order id to the url.

packages/template-retail-react-app/app/pages/checkout/confirmation.test.js

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx

packages/template-retail-react-app/app/hooks/use-einstein.js

packages/template-retail-react-app/app/pages/checkout/index.jsx

packages/template-retail-react-app/app/pages/checkout/partials/payment-form.jsx

packages/template-retail-react-app/app/pages/checkout/index.jsx

…ments

packages/template-retail-react-app/app/pages/checkout/util/checkout-context.js

packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx

…erceCloud/pwa-kit into checkout-payments

…/payment.jsx Co-authored-by: Vincent Marta <vmarta@salesforce.com>

…erceCloud/pwa-kit into checkout-payments

alexvuong · 2023-03-23T18:27:31Z

packages/template-retail-react-app/app/pages/cart/index.jsx

@@ -311,7 +311,7 @@ const Cart = () => {
        return <CartSkeleton />
    }

-    if (!isLoading && !basket?.productItems?.length) {
+    if (!basket?.productItems?.length) {


If we check loading here, we won't need to guard basket below

loading is always false here since it is checked on line 310

if it is false, it indicates that basketData should be defined, we technically don't need to guard the basket here. Guarding is a good way to make sure things don't break, but if we know we have guarded other cases, we should not throw in the ? too much. 🤔

sounds good, removed the guard

@alexvuong @kevinxh FYI it looks the change broke the cart page when the cart is empty.
http://localhost:3000/global/en-GB/cart

TypeError: Cannot read properties of undefined (reading 'length') at Cart (http://localhost:3000/mobify/bundle/development/pages-cart.js:394:28)

This is a regression that was fixed in this PR: #1062

ok... i'm just gonna revert the change in cart.js.... it's out of scope for this PR and i thought it's a small diff improvement. but turns out to be too much hassle

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx

wjhsf · 2023-03-23T19:33:41Z

packages/template-retail-react-app/app/pages/checkout/confirmation.test.js

 }

-const mockProducts = {
-    data: [
+const mockOrder = {


[nit] Can this mock data live elsewhere to keep the test file smaller? It's more than half the lines of the file!

packages/template-retail-react-app/app/pages/checkout/index.jsx

packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx

packages/template-retail-react-app/app/pages/checkout/partials/payment-form.jsx

…/payment-form.jsx Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

…erceCloud/pwa-kit into checkout-payments

…ments

kevinxh added 15 commits March 15, 2023 18:04

render payment form

8178130

refactor payment form

e72e43e

remove console log

d266c0b

guest payment working

f03735c

fix bug

858903a

create order

a61cd1e

work on order confirmation

92668e0

fix lint

108da50

simplify checkout context

6723c47

simplify checkout context 2

11af7c9

fix confirmation register form

cfaf287

finish checkout context refactor

e205e18

Merge branch 'feature/integrate-commerce-sdk-react' into checkout-pay…

23a7976

…ments

minor fixes

f3d6fe0

fix bug

fe6bc8a

kevinxh marked this pull request as ready for review March 21, 2023 23:20

kevinxh requested a review from a team as a code owner March 21, 2023 23:20

alexvuong reviewed Mar 21, 2023

View reviewed changes

packages/template-retail-react-app/app/pages/cart/index.jsx Outdated Show resolved Hide resolved

kevinxh added 5 commits March 21, 2023 18:09

fix test

2033968

lint

47ddb56

commit translations

e3ad4db

use issueNumber

97b494e

Merge branch 'feature/integrate-commerce-sdk-react' into checkout-pay…

74f44eb

…ments

vmarta reviewed Mar 22, 2023

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx Show resolved Hide resolved

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx Show resolved Hide resolved

vmarta reviewed Mar 22, 2023

View reviewed changes

kevinxh added 2 commits March 22, 2023 14:25

minor fixes

5bf30f0

fix bug

98bdd53

adamraya reviewed Mar 22, 2023

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx Show resolved Hide resolved

adamraya reviewed Mar 22, 2023

View reviewed changes

packages/template-retail-react-app/app/hooks/use-einstein.js Outdated Show resolved Hide resolved

adamraya reviewed Mar 22, 2023

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/index.jsx Show resolved Hide resolved

vmarta reviewed Mar 22, 2023

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/partials/payment-form.jsx Outdated Show resolved Hide resolved

packages/template-retail-react-app/app/pages/checkout/partials/payment-form.jsx Outdated Show resolved Hide resolved

vmarta reviewed Mar 22, 2023

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/index.jsx Show resolved Hide resolved

Merge branch 'feature/integrate-commerce-sdk-react' into checkout-pay…

353d014

…ments

vmarta reviewed Mar 23, 2023

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/util/checkout-context.js Show resolved Hide resolved

packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx Outdated Show resolved Hide resolved

kevinxh and others added 9 commits March 22, 2023 17:23

fix currency issues

358eda9

Merge branch 'checkout-payments' of https://github.com/SalesforceComm…

df0fa11

…erceCloud/pwa-kit into checkout-payments

guard undefined

c0a1644

lint

8c23d48

Update packages/template-retail-react-app/app/pages/checkout/partials…

49c39fb

…/payment.jsx Co-authored-by: Vincent Marta <vmarta@salesforce.com>

fix useEffect deps

e31cf79

Merge branch 'checkout-payments' of https://github.com/SalesforceComm…

44a8f94

…erceCloud/pwa-kit into checkout-payments

fix undefined prices

fb31c24

fix undefined currency

5fc4636

alexvuong reviewed Mar 23, 2023

View reviewed changes

remove guard

ead8ccb

wjhsf reviewed Mar 23, 2023

View reviewed changes

kevinxh and others added 6 commits March 23, 2023 13:17

pr feedback

595c286

Update packages/template-retail-react-app/app/pages/checkout/partials…

b8af41c

…/payment-form.jsx Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

guard error type

cb6a6b8

Merge branch 'checkout-payments' of https://github.com/SalesforceComm…

e889214

…erceCloud/pwa-kit into checkout-payments

revert cart changes

1be9e1e

Merge branch 'feature/integrate-commerce-sdk-react' into checkout-pay…

39ef577

…ments

adamraya approved these changes Mar 23, 2023

View reviewed changes

wjhsf mentioned this pull request Mar 23, 2023

remove site alias and locale from location.state.directedFrom path #1065

Merged

12 tasks

kevinxh enabled auto-merge March 23, 2023 21:14

kevinxh added this pull request to the merge queue Mar 23, 2023

kevinxh mentioned this pull request Mar 23, 2023

[Hooks integration] Remove account payments page #1084

Merged

Merged via the queue into feature/integrate-commerce-sdk-react with commit b1ae9fc Mar 23, 2023

kevinxh deleted the checkout-payments branch March 23, 2023 21:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Hooks integration] Checkout Payment Section + Checkout Confirmation Page #1075

[Hooks integration] Checkout Payment Section + Checkout Confirmation Page #1075

kevinxh commented Mar 21, 2023 •

edited

Loading

vmarta left a comment

vmarta left a comment

vmarta Mar 22, 2023

alexvuong Mar 23, 2023

kevinxh Mar 23, 2023

alexvuong Mar 23, 2023

kevinxh Mar 23, 2023

adamraya Mar 23, 2023 •

edited

Loading

kevinxh Mar 23, 2023

wjhsf Mar 23, 2023


		const CheckoutConfirmation = () => {
		const {orderNo} = useParams()

[Hooks integration] Checkout Payment Section + Checkout Confirmation Page #1075

[Hooks integration] Checkout Payment Section + Checkout Confirmation Page #1075

Conversation

kevinxh commented Mar 21, 2023 • edited Loading

Important UX changes

Changes:

vmarta left a comment

Choose a reason for hiding this comment

vmarta left a comment

Choose a reason for hiding this comment

vmarta Mar 22, 2023

Choose a reason for hiding this comment

alexvuong Mar 23, 2023

Choose a reason for hiding this comment

kevinxh Mar 23, 2023

Choose a reason for hiding this comment

alexvuong Mar 23, 2023

Choose a reason for hiding this comment

kevinxh Mar 23, 2023

Choose a reason for hiding this comment

adamraya Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

kevinxh Mar 23, 2023

Choose a reason for hiding this comment

wjhsf Mar 23, 2023

Choose a reason for hiding this comment

kevinxh commented Mar 21, 2023 •

edited

Loading

adamraya Mar 23, 2023 •

edited

Loading