Merge pull request #15 from PMET-public/develop

Fixed Braintree onSubmit
PMET-public · Dec 2, 2019 · 159ebbd · 159ebbd
2 parents dd0c0dc + a8b717f
commit 159ebbd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pmet-public/luma-ui",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "Luma React UI LIbrary",
   "repository": "https://github.com/PMET-public/luma-ui.git",
   "author": "Carlos A. Cabrera @fnhhipster",
@@ -58,7 +58,7 @@
     "react": "^16.11.0",
     "react-content-loader": "^4.2.2",
     "react-dom": "^16.11.0",
-    "react-hook-form": "^3.24.0",
+    "react-hook-form": "^3.28.11",
     "react-spring": "^8.0.25",
     "remixicon": "^1.3.1",
     "rimraf": "^2.6.3",

diff --git a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.story.tsx b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.story.tsx
@@ -7,7 +7,7 @@ storiesOf('📦 Components/Checkout/PaymentMethodForm', module).add('Default', (
     const braintree = {
         authorization: text(
             'braintree token',
-            'eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJleUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpGVXpJMU5pSXNJbXRwWkNJNklqSXdNVGd3TkRJMk1UWXRjMkZ1WkdKdmVDSXNJbWx6Y3lJNklrRjFkR2g1SW4wLmV5SmxlSEFpT2pFMU56UTVNVEF6Tmpnc0ltcDBhU0k2SW1Gak5tVTNPR0U0TFdFeU9HTXROREJoT1MwNE9EVXdMVFZqWmpNMk56Z3haalkzWXlJc0luTjFZaUk2SW5wcmR6SmpkSEpyYWpjMWJtUjJhMk1pTENKcGMzTWlPaUpCZFhSb2VTSXNJbTFsY21Ob1lXNTBJanA3SW5CMVlteHBZMTlwWkNJNklucHJkekpqZEhKcmFqYzFibVIyYTJNaUxDSjJaWEpwWm5sZlkyRnlaRjlpZVY5a1pXWmhkV3gwSWpwbVlXeHpaWDBzSW5KcFoyaDBjeUk2V3lKdFlXNWhaMlZmZG1GMWJIUWlYU3dpYjNCMGFXOXVjeUk2ZXlKdFpYSmphR0Z1ZEY5aFkyTnZkVzUwWDJsa0lqb2liV0ZuWlc1MGJ5SjlmUS5Qbm42MjFoQVBxcWpkT2xUSTc3TG1reFNqSHFxT0lnZFQtbjlaaUsyYXdrWkdXa3hLYXlMUFZFN0V0Q2Y1TTdEdTNvN3hJX25paWtvMDBhTTFmUnk5dyIsImNvbmZpZ1VybCI6Imh0dHBzOi8vYXBpLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb206NDQzL21lcmNoYW50cy96a3cyY3Rya2o3NW5kdmtjL2NsaWVudF9hcGkvdjEvY29uZmlndXJhdGlvbiIsImdyYXBoUUwiOnsidXJsIjoiaHR0cHM6Ly9wYXltZW50cy5zYW5kYm94LmJyYWludHJlZS1hcGkuY29tL2dyYXBocWwiLCJkYXRlIjoiMjAxOC0wNS0wOCJ9LCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzL3prdzJjdHJrajc1bmR2a2MvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vb3JpZ2luLWFuYWx5dGljcy1zYW5kLnNhbmRib3guYnJhaW50cmVlLWFwaS5jb20vemt3MmN0cmtqNzVuZHZrYyJ9LCJ0aHJlZURTZWN1cmVFbmFibGVkIjpmYWxzZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiTWFnZW50byIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6Im1hZ2VudG8iLCJjdXJyZW5jeUlzb0NvZGUiOiJVU0QifSwibWVyY2hhbnRJZCI6InprdzJjdHJrajc1bmR2a2MiLCJ2ZW5tbyI6Im9mZiIsIm1lcmNoYW50QWNjb3VudElkIjoibWFnZW50byJ9'
+            'eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJleUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpGVXpJMU5pSXNJbXRwWkNJNklqSXdNVGd3TkRJMk1UWXRjMkZ1WkdKdmVDSXNJbWx6Y3lJNklrRjFkR2g1SW4wLmV5SmxlSEFpT2pFMU56VTBNRGt5TVRFc0ltcDBhU0k2SWpGaE1tWXhOR1l4TFdKbFlqTXRORGM1WmkxaE5UUTRMV00xTjJRMU5UUmhaVGhtWVNJc0luTjFZaUk2SW5wcmR6SmpkSEpyYWpjMWJtUjJhMk1pTENKcGMzTWlPaUpCZFhSb2VTSXNJbTFsY21Ob1lXNTBJanA3SW5CMVlteHBZMTlwWkNJNklucHJkekpqZEhKcmFqYzFibVIyYTJNaUxDSjJaWEpwWm5sZlkyRnlaRjlpZVY5a1pXWmhkV3gwSWpwbVlXeHpaWDBzSW5KcFoyaDBjeUk2V3lKdFlXNWhaMlZmZG1GMWJIUWlYU3dpYjNCMGFXOXVjeUk2ZXlKdFpYSmphR0Z1ZEY5aFkyTnZkVzUwWDJsa0lqb2liV0ZuWlc1MGJ5SjlmUS4ySVNTSlJaczZmTDNTdlAwR0pfUWRqeVNZU3E3dURTNERycTVlNGFMSW1fNnJpekY1a2xJTG5MZXNkWHdUN3pPNWRiZC0wcHdGV25sYjVDNHJrTVFQdyIsImNvbmZpZ1VybCI6Imh0dHBzOi8vYXBpLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb206NDQzL21lcmNoYW50cy96a3cyY3Rya2o3NW5kdmtjL2NsaWVudF9hcGkvdjEvY29uZmlndXJhdGlvbiIsImdyYXBoUUwiOnsidXJsIjoiaHR0cHM6Ly9wYXltZW50cy5zYW5kYm94LmJyYWludHJlZS1hcGkuY29tL2dyYXBocWwiLCJkYXRlIjoiMjAxOC0wNS0wOCJ9LCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzL3prdzJjdHJrajc1bmR2a2MvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vb3JpZ2luLWFuYWx5dGljcy1zYW5kLnNhbmRib3guYnJhaW50cmVlLWFwaS5jb20vemt3MmN0cmtqNzVuZHZrYyJ9LCJ0aHJlZURTZWN1cmVFbmFibGVkIjpmYWxzZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiTWFnZW50byIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6Im1hZ2VudG8iLCJjdXJyZW5jeUlzb0NvZGUiOiJVU0QifSwibWVyY2hhbnRJZCI6InprdzJjdHJrajc1bmR2a2MiLCJ2ZW5tbyI6Im9mZiIsIm1lcmNoYW50QWNjb3VudElkIjoibWFnZW50byJ9'
         ),
         vaultManager: false,
         preselectVaultedPaymentMethod: false,

diff --git a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
@@ -19,7 +19,7 @@ export type PaymentMethodFormProps = {
 }
 
 type ReducerState = {
-    instance: Braintree | null
+    braintreeInstance: Braintree | null
     loading: boolean
     formError?: string | null
     editable: boolean
@@ -28,11 +28,11 @@ type ReducerState = {
 
 type ReducerActions =
     | {
-          type: 'setInstance'
+          type: 'setBraintree'
           payload: Braintree
       }
     | {
-          type: 'unsetInstance'
+          type: 'unsetBraintree'
       }
     | {
           type: 'setLoader'
@@ -57,7 +57,7 @@ type ReducerActions =
       }
 
 const initialState: ReducerState = {
-    instance: null,
+    braintreeInstance: null,
     loading: false,
     formError: null,
     editable: true,
@@ -66,15 +66,15 @@ const initialState: ReducerState = {
 
 const reducer: Reducer<ReducerState, ReducerActions> = (state, action) => {
     switch (action.type) {
-        case 'setInstance':
+        case 'setBraintree':
             return {
                 ...state,
-                instance: action.payload,
+                braintreeInstance: action.payload,
             }
-        case 'unsetInstance':
+        case 'unsetBraintree':
             return {
                 ...state,
-                instance: null,
+                braintreeInstance: null,
             }
         case 'setLoader':
             return {
@@ -102,7 +102,7 @@ const reducer: Reducer<ReducerState, ReducerActions> = (state, action) => {
                 ...state,
                 paymentInfo: action.payload,
                 editable: false,
-                instance: null,
+                braintreeInstance: null,
             }
 
         default:
@@ -123,7 +123,10 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
 
     const containerElem = useRef(null)
 
-    const [{ instance, editable, loading, formError, paymentInfo }, dispatch] = useReducer(reducer, initialState)
+    const [{ braintreeInstance, editable, loading, formError, paymentInfo }, dispatch] = useReducer(
+        reducer,
+        initialState
+    )
 
     const createBraintreeInstance = useCallback(async () => {
         if (!containerElem) return
@@ -153,27 +156,27 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
                 ...braintree,
             })
 
-            dispatch({ type: 'setInstance', payload })
+            dispatch({ type: 'setBraintree', payload })
         } catch (error) {
-            dispatch({ type: 'unsetInstance' })
+            dispatch({ type: 'unsetBraintree' })
             console.error(error)
         }
     }, [containerElem, JSON.stringify(braintree)])
 
     useEffect(() => {
-        if (editable && !instance) createBraintreeInstance()
+        if (editable && !braintreeInstance) createBraintreeInstance()
 
         return () => {
-            if (instance) instance.teardown()
+            if (braintreeInstance) braintreeInstance.teardown()
         }
-    }, [instance])
+    }, [braintreeInstance])
 
     const handleRequestPaymentMethod = useCallback(async () => {
-        if (!instance) return
-        const payload = await instance.requestPaymentMethod()
+        if (!braintreeInstance) return
+        const payload = await braintreeInstance.requestPaymentMethod()
         dispatch({ type: 'setPaymentInfo', payload })
         return onSubmit(payload)
-    }, [instance])
+    }, [braintreeInstance, onSubmit])
 
     const handleOnEdit = useCallback(
         async (e: Event) => {
@@ -197,7 +200,7 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
 
             dispatch({ type: 'setLoader', payload: false })
         },
-        [handleSubmit, onSubmit]
+        [handleSubmit, braintreeInstance]
     )
 
     return (