From aba45fb61024bcc48cdf899ace4f67bfb66af3cf Mon Sep 17 00:00:00 2001
From: Grisha Angelov <grisha.angelov89@gmail.com>
Date: Mon, 15 Jan 2024 09:42:37 +0200
Subject: [PATCH] Remove FormSpy from Shipping component due unresolved bug in
 react-final-form library.

https://github.com/final-form/react-final-form/issues/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.
---
 .../Checkout/CheckoutSteps/CheckoutSteps.js   |  3 +-
 .../CheckoutSteps/CheckoutSteps.spec.js       |  8 +++--
 .../CheckoutSteps/Shipping/Shipping.js        | 35 +++++++++++--------
 .../CheckoutSteps/Shipping/Shipping.spec.js   | 32 ++++++++---------
 .../Pages/Checkout/CheckoutSteps/Step/Step.js |  6 ++--
 5 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/components/Pages/Checkout/CheckoutSteps/CheckoutSteps.js b/src/components/Pages/Checkout/CheckoutSteps/CheckoutSteps.js
index b96effd..002d7b3 100644
--- 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
index 919a928..c8d5da0 100644
--- 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
index e424f7b..bca2d47 100644
--- a/src/components/Pages/Checkout/CheckoutSteps/Shipping/Shipping.js
+++ b/src/components/Pages/Checkout/CheckoutSteps/Shipping/Shipping.js
@@ -1,6 +1,6 @@
 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'
 
@@ -8,6 +8,11 @@ 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 },
@@ -15,8 +20,8 @@ export class Shipping extends Component {
         '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
index d14e387..cd1c788 100644
--- 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)
     })
 })
\ No newline at end of file
diff --git a/src/components/Pages/Checkout/CheckoutSteps/Step/Step.js b/src/components/Pages/Checkout/CheckoutSteps/Step/Step.js
index 01bbb33..10421c4 100644
--- 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'>
                         {