@akinon/pz-gpay 1.19.3 → 1.20.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/pz-gpay
 
+## 1.20.0
+
+### Minor Changes
+
+- 6d4d5cb: ZERO-2420: Add error handling
+
+## 1.19.4
+
 ## 1.19.3
 
 ## 1.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-gpay",
-  "version": "1.19.3",
+  "version": "1.20.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/views/gpay-option.tsx

@@ -13,6 +13,7 @@ import {
 import { twMerge } from 'tailwind-merge';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Button } from '@akinon/next/components/button';
+import { getPosError } from '@akinon/next/utils';
 
 const gpayFormSchema = yup.object();
 
@@ -35,6 +36,7 @@ type GpayOptionProps = {
 
 export function GPayOption(props: GpayOptionProps) {
   const [formError, setFormError] = useState(null);
+  const [errors, setErrors] = useState([]);
 
   const { preOrder } = useAppSelector((state: RootState) => state.checkout);
   const isPaymentStepBusy = useAppSelector(
@@ -65,6 +67,14 @@ export function GPayOption(props: GpayOptionProps) {
 
   // this is necessary because we need to set the payment_option after the redirect
   useEffect(() => {
+    const posErrors = getPosError();
+
+    Object.keys(posErrors ?? {})
+      .filter((key) => key !== 'gpinstallment')
+      .forEach((item) => {
+        setErrors((prev) => [...prev, posErrors[item]]);
+      });
+
     setPaymentOption(preOrder.payment_option.pk);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -107,6 +117,13 @@ export function GPayOption(props: GpayOptionProps) {
           {formError}
         </div>
       )}
+      {errors && (
+        <div className="w-full text-xs text-start px-1 mt-3 text-error">
+          {errors.map((error) => (
+            <div key={error}>{error}</div>
+          ))}
+        </div>
+      )}
     </form>
   );
 }