feat(payment): Stripe Shipping Form component migrated to functional #2570
Conversation
bc-dronov
force-pushed
the
feat/stripe_shipping_form_functional
branch
from
a1fc892 to
efac3da
Compare
| @@ -32,192 +27,178 @@ import hasSelectedShippingOptions from '../hasSelectedShippingOptions'; | |||
| import ShippingFormFooter from '../ShippingFormFooter'; | |||
|
|
|||
| import StripeShippingAddress from './StripeShippingAddress'; | |||
| import { useCheckout } from '@bigcommerce/checkout/payment-integration-api'; | |||
| import { EMPTY_ARRAY } from '../../common/utility'; | |||
|
|
|||
| export interface SingleShippingFormProps { | |||
There was a problem hiding this comment.
We are trying to eliminate prop drilling while refactoring components.
If possible, could you please remove props that can be read from checkout state and access them from checkout context directly?
There was a problem hiding this comment.
@bc-peng Seems that I removed all the possible props and take it from the context instead:
https://github.com/bigcommerce/checkout-js/pull/2570/files#diff-93b7f81acd6b67aac5e9e631713c0a3c405e4f89931b768827a66bdc6819ffe4R69
There was a problem hiding this comment.
You should be able to remove customerMessage: string; now, once we are working on refactoring <Shipping />, we could remove more props here.
There was a problem hiding this comment.
@bc-peng We’re currently passing customerMessage from the parent StripeShipping component, which retrieves it from checkout context. Since we’re using customerMessage in the props mapper (outside of a React component), accessing context directly there would cause an error. That’s why I think it’s better to keep customerMessage as a prop.
There was a problem hiding this comment.
Oh, I see. I missed the Formik HOC here. Thanks for the explanation.
What/Why?
StripeShippingForm component migrated to the functional
Rollout/Rollback
Revert this PR
Testing
Manual testing
Screen.Recording.2025-09-10.at.14.29.46.mov