diff --git a/package.json b/package.json index 099f66c..3e1b4bb 100644 --- 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 index f16b3e6..1a50792 100644 --- 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 index d0c1478..67d5f73 100644 --- 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 = (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 = (state, action) => { ...state, paymentInfo: action.payload, editable: false, - instance: null, + braintreeInstance: null, } default: @@ -123,7 +123,10 @@ export const PaymentMethodForm: Component = ({ 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 = ({ ...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 = ({ dispatch({ type: 'setLoader', payload: false }) }, - [handleSubmit, onSubmit] + [handleSubmit, braintreeInstance] ) return (