In all payment components such as Ideal.jsx component, I can see the usage of useFormik. I think this is actually separating out payment form states from the global formik states. I think it will be always good to make these payment states of the global formik state. Same for the validation. We can make validation part of the payment section.
Need to include translation csv files related so that client can easily use it in their side. Eg: i18n/de_DE.csv. We should also provide the entry needs to be added in the layout xml file for the translation. Need to update documentation for this.
Define variables which values never going to change outside the component. For example validationSchema defined inside Afterpay.jsx must be defined outside.
Should pass all the dependencies into all side effects.
A custom hook should be called in the first level. It cannot be called inside a function or inside a callback. React expect them in the first level of the function.
Suggestions
It is better to keep the components logic in certain order. react built in hook usage should appear top, then custom hooks, then variable definitions, then custom functions used inside the component, then define side effects, lastly if variables or logic that defines the UI components. Then comes the return statement. Basically try to stick with airbnb coding standards.
Better keep all directory names camelcase as that is the practice in the original repo. Everything other than a react component should be camelCased. But a react component should start with a capital letter and it should use the extension .jsx.
If a helper function or a hook belong to a specific payment method, then better define them inside the payment method directory. If some custom hooks or helper functions are generic, then we can define them outside of all payment methods.
I made Ideal.jsx component in align with the current approach we are using for payment methods. I recommend to do the same with all other payment methods as well.
When we try to access the global states such as payment formik states, app states or cart state, then it is better we define a dedicated custom hook in each payment method section level.
Must Do
In all payment components such as
Ideal.jsxcomponent, I can see the usage ofuseFormik. I think this is actually separating out payment form states from the global formik states. I think it will be always good to make these payment states of the global formik state. Same for the validation. We can make validation part of the payment section.Need to include translation csv files related so that client can easily use it in their side. Eg:
i18n/de_DE.csv. We should also provide the entry needs to be added in the layout xml file for the translation. Need to update documentation for this.Define variables which values never going to change outside the component. For example
validationSchemadefined insideAfterpay.jsxmust be defined outside.Should pass all the dependencies into all side effects.
A custom hook should be called in the first level. It cannot be called inside a function or inside a callback. React expect them in the first level of the function.
Suggestions
It is better to keep the components logic in certain order. react built in hook usage should appear top, then custom hooks, then variable definitions, then custom functions used inside the component, then define side effects, lastly if variables or logic that defines the UI components. Then comes the return statement. Basically try to stick with airbnb coding standards.
Better keep all directory names camelcase as that is the practice in the original repo. Everything other than a react component should be camelCased. But a react component should start with a capital letter and it should use the extension
.jsx.If a helper function or a hook belong to a specific payment method, then better define them inside the payment method directory. If some custom hooks or helper functions are generic, then we can define them outside of all payment methods.
I made
Ideal.jsxcomponent in align with the current approach we are using for payment methods. I recommend to do the same with all other payment methods as well.When we try to access the global states such as payment formik states, app states or cart state, then it is better we define a dedicated custom hook in each payment method section level.