Remove FormSpy from Shipping component due unresolved bug in react-fi…

…nal-form library. final-form/react-final-form#809 Due to inconsistent behavior from react-final-form resulting in the provision of old values, the Shipping component will apply the selected shipping method on mount. The call of handleShippingMethodChange(), which was previously used by FormSpy, will be performed when we click on the given radio button.
GrishaAngelovGH · Jan 15, 2024 · aba45fb · aba45fb
1 parent 31e9cdc
commit aba45fb
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 37 deletions.
diff --git a/src/components/Pages/Checkout/CheckoutSteps/CheckoutSteps.js b/src/components/Pages/Checkout/CheckoutSteps/CheckoutSteps.js
@@ -36,13 +36,14 @@ export class CheckoutSteps extends Component {
         })
     }
 
-    formContent = ({ handleSubmit, valid }) => {
+    formContent = ({ handleSubmit, valid, values }) => {
         const { currentStep } = this.state
         const { steps } = this.props
 
         return (
             <form onSubmit={handleSubmit}>
                 <Step
+                    values={values}
                     position={currentStep}
                     onChange={this.handleStepChange}
                     showNextButton={steps[currentStep].showNextButton}

diff --git a/src/components/Pages/Checkout/CheckoutSteps/CheckoutSteps.spec.js b/src/components/Pages/Checkout/CheckoutSteps/CheckoutSteps.spec.js
@@ -18,6 +18,8 @@ describe('(Component) CheckoutSteps', () => {
         { title: 'Title-2', component: (<div>content-2</div>), showNextButton: false, showPrevButton: true }
     ]
 
+    const values = { shipping_method: 'usps_fcpi' }
+
     beforeEach(() => {
         clearItemsFromShoppingCart = sinon.spy()
         sandbox.stub(Swal, 'fire').callsFake(() => Promise.resolve())
@@ -62,10 +64,11 @@ describe('(Component) CheckoutSteps', () => {
         const handleSubmit = sinon.spy()
 
         expect(
-            wrapper.instance().formContent({ handleSubmit })
+            wrapper.instance().formContent({ handleSubmit, values })
         ).to.eql(
             <form onSubmit={handleSubmit}>
                 <Step
+                    values={values}
                     position={0}
                     onChange={wrapper.instance().handleStepChange}
                     showNextButton={true}
@@ -86,10 +89,11 @@ describe('(Component) CheckoutSteps', () => {
         formContent.props.children.props.onChange(1)
 
         expect(
-            wrapper.instance().formContent({ handleSubmit })
+            wrapper.instance().formContent({ handleSubmit, values })
         ).to.eql(
             <form onSubmit={handleSubmit}>
                 <Step
+                    values={values}
                     position={1}
                     onChange={wrapper.instance().handleStepChange}
                     showNextButton={false}

diff --git a/src/components/Pages/Checkout/CheckoutSteps/Shipping/Shipping.js b/src/components/Pages/Checkout/CheckoutSteps/Shipping/Shipping.js
@@ -1,22 +1,27 @@
 import { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Field, FormSpy } from 'react-final-form'
+import { Field } from 'react-final-form'
 
 import StepTitle from 'components/Pages/Checkout/CheckoutSteps/StepTitle'
 
 import currencyFormatter from 'components/formatters/currencyFormatter'
 import translate from 'translate'
 
 export class Shipping extends Component {
+    componentDidMount() {
+        const { shippingMethod, price } = this.shippingMethods[this.props.values['shipping_method']]
+        this.props.changeShippingMethod(shippingMethod, price)
+    }
+
     shippingMethods = {
         'usps_fcpi': { shippingMethod: this.props.strings.usps_fcpi.label, price: 13.35 },
         'usps_pmi': { shippingMethod: this.props.strings.usps_pmi.label, price: 44.85 },
         'usps_pmei': { shippingMethod: this.props.strings.usps_pmei.label, price: 58.99 },
         'dhl_ew': { shippingMethod: this.props.strings.dhl_ew.label, price: 83.73 }
     }
 
-    handleShippingMethodChange = ({ values: { shipping_method } }) => {
-        const { shippingMethod, price } = this.shippingMethods[shipping_method]
+    handleShippingMethodChange = ({ target: { value } }) => {
+        const { shippingMethod, price } = this.shippingMethods[value]
         this.props.changeShippingMethod(shippingMethod, price)
     }
 
@@ -37,8 +42,9 @@ export class Shipping extends Component {
                                     component='input'
                                     type='radio'
                                     value='usps_fcpi'
-                                />{' '}
-                                <span className='font-weight-bold'>{strings.usps_fcpi.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['usps_fcpi'].price)}</span>
+                                    onClick={this.handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>{strings.usps_fcpi.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['usps_fcpi'].price)}</span>
                                 <div className='small text-secondary ml-3'>{strings.usps_fcpi.delivery}</div>
                             </label>
 
@@ -48,8 +54,9 @@ export class Shipping extends Component {
                                     component='input'
                                     type='radio'
                                     value='usps_pmi'
-                                />{' '}
-                                <span className='font-weight-bold'>{strings.usps_pmi.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['usps_pmi'].price)}</span>
+                                    onClick={this.handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>{strings.usps_pmi.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['usps_pmi'].price)}</span>
                                 <div className='small text-secondary ml-3'>{strings.usps_pmi.delivery}</div>
                             </label>
 
@@ -59,8 +66,9 @@ export class Shipping extends Component {
                                     component='input'
                                     type='radio'
                                     value='usps_pmei'
-                                />{' '}
-                                <span className='font-weight-bold'>{strings.usps_pmei.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['usps_pmei'].price)}</span>
+                                    onClick={this.handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>{strings.usps_pmei.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['usps_pmei'].price)}</span>
                                 <div className='small text-secondary ml-3'>{strings.usps_pmei.delivery}</div>
                             </label>
 
@@ -70,17 +78,14 @@ export class Shipping extends Component {
                                     component='input'
                                     type='radio'
                                     value='dhl_ew'
-                                />{' '}
-                                <span className='font-weight-bold'>{strings.dhl_ew.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['dhl_ew'].price)}</span>
+                                    onClick={this.handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>{strings.dhl_ew.label} - {currencyFormatter(lang, strings.currency, this.shippingMethods['dhl_ew'].price)}</span>
                                 <div className='small text-secondary ml-3'>{strings.dhl_ew.delivery}</div>
                             </label>
                         </div>
                     </div>
                 </div>
-                <FormSpy
-                    subscription={{ values: true }}
-                    onChange={this.handleShippingMethodChange}
-                />
             </div>
         )
     }

diff --git a/src/components/Pages/Checkout/CheckoutSteps/Shipping/Shipping.spec.js b/src/components/Pages/Checkout/CheckoutSteps/Shipping/Shipping.spec.js
@@ -1,4 +1,4 @@
-import { Field, FormSpy } from 'react-final-form'
+import { Field } from 'react-final-form'
 
 import StepTitle from 'components/Pages/Checkout/CheckoutSteps/StepTitle'
 
@@ -14,6 +14,7 @@ describe('(Component) Shipping', () => {
             <Shipping
                 lang={'en'}
                 changeShippingMethod={changeShippingMethod}
+                values={{ shipping_method: 'usps_fcpi' }}
             />
         )
     })
@@ -33,8 +34,9 @@ describe('(Component) Shipping', () => {
                                     component='input'
                                     type='radio'
                                     value='usps_fcpi'
-                                />{' '}
-                                <span className='font-weight-bold'>USPS First Class Package International - £13.35</span>
+                                    onClick={wrapper.instance().handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>USPS First Class Package International - £13.35</span>
                                 <div className='small text-secondary ml-3'>7 to 21 business days</div>
                             </label>
 
@@ -44,8 +46,9 @@ describe('(Component) Shipping', () => {
                                     component='input'
                                     type='radio'
                                     value='usps_pmi'
-                                />{' '}
-                                <span className='font-weight-bold'>USPS Priority Mail International - £44.85</span>
+                                    onClick={wrapper.instance().handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>USPS Priority Mail International - £44.85</span>
                                 <div className='small text-secondary ml-3'>6 to 10 business days</div>
                             </label>
 
@@ -55,8 +58,9 @@ describe('(Component) Shipping', () => {
                                     component='input'
                                     type='radio'
                                     value='usps_pmei'
-                                />{' '}
-                                <span className='font-weight-bold'>USPS Priority Mail Express International - £58.99</span>
+                                    onClick={wrapper.instance().handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>USPS Priority Mail Express International - £58.99</span>
                                 <div className='small text-secondary ml-3'>3 to 5 business days</div>
                             </label>
 
@@ -66,27 +70,23 @@ describe('(Component) Shipping', () => {
                                     component='input'
                                     type='radio'
                                     value='dhl_ew'
-                                />{' '}
-                                <span className='font-weight-bold'>DHL Express Worldwide - £83.73</span>
+                                    onClick={wrapper.instance().handleShippingMethodChange}
+                                />
+                                <span className='ml-1 font-weight-bold'>DHL Express Worldwide - £83.73</span>
                                 <div className='small text-secondary ml-3'>2 to 3 business days</div>
                             </label>
                         </div>
                     </div>
                 </div>
-                <FormSpy
-                    subscription={{ values: true }}
-                    onChange={wrapper.instance().handleShippingMethodChange}
-                />
             </div>
         )).to.equal(true)
     })
 
     it('should handle shipping method change', () => {
-        const formSpy = wrapper.find(FormSpy)
+        const field = wrapper.find(Field).at(2)
 
-        formSpy.simulate('change', { values: { shipping_method: 'usps_pmi' } })
+        field.simulate('click', { target: { value: 'usps_pmi' } })
 
-        changeShippingMethod.should.have.been.calledOnce
         changeShippingMethod.should.have.been.calledWith('USPS Priority Mail International', 44.85)
     })
 })
diff --git a/src/components/Pages/Checkout/CheckoutSteps/Step/Step.js b/src/components/Pages/Checkout/CheckoutSteps/Step/Step.js
@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import translate from 'translate'
 
@@ -16,13 +16,13 @@ export class Step extends Component {
     }
 
     render() {
-        const { strings, children, disabled, showPrevButton, showNextButton } = this.props
+        const { strings, children, values, disabled, showPrevButton, showNextButton } = this.props
 
         return (
             <div className='row no-gutters justify-content-center m-3'>
                 <div className='col-md-7 col-lg-5 border rounded p-2 shadow bg-white'>
                     {
-                        children
+                        React.cloneElement(children, { values })
                     }
                     <div className='d-flex justify-content-end'>
                         {