convert React Checkout/Hook/useStep component to TypeScript

thelia · Jan 17, 2024 · 3e37290 · 3e37290
1 parent 6732978
commit 3e37290
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/templates/frontOffice/modern/assets/js/types/checkout.types.ts b/templates/frontOffice/modern/assets/js/types/checkout.types.ts
@@ -1,3 +1,10 @@
+import {
+  Address,
+  CheckoutAddress,
+  CustomerState
+} from '@components/React/Checkout/type';
+import { DeliveryModule, PickupAddress } from './common';
+
 export type CheckoutPageType = {
   id: number;
   slug: string;
@@ -31,3 +38,17 @@ export declare type CheckoutResponse = {
   acceptedTermsAndConditions: boolean;
   isComplete: boolean;
 };
+
+export type Checkout = {
+  step: number;
+  customer: CustomerState;
+  deliveryAddressId: CheckoutAddress['id'] | Address['id'] | null;
+  billingAddressId: CheckoutAddress['id'] | Address['id'] | null;
+  needValidate: CheckoutRequest['needValidate'];
+  deliveryModule: DeliveryModule | null;
+  paymentModuleId: number | null;
+  deliveryModuleOptionCode: 'string' | null;
+  pickupAddress: PickupAddress | null;
+  acceptedTermsAndConditions: boolean;
+  isComplete: boolean;
+};
diff --git a/...nts/React/Checkout/hooks/useEnableCta.tsx → ...ents/React/Checkout/hooks/useEnableCta.ts b/...nts/React/Checkout/hooks/useEnableCta.tsx → ...ents/React/Checkout/hooks/useEnableCta.ts
diff --git a/...omponents/React/Checkout/hooks/useStep.js → ...omponents/React/Checkout/hooks/useStep.ts b/...omponents/React/Checkout/hooks/useStep.js → ...omponents/React/Checkout/hooks/useStep.ts
@@ -1,16 +1,20 @@
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { setCheckoutStep } from '@js/redux/modules/checkout';
-export default function useStep(checkout) {
+import { Checkout } from '@js/types/checkout.types';
+export default function useStep(checkout: Checkout) {
   const [step, setStep] = useState(1);
   const dispatch = useDispatch();
-  const { mode: selectedMode, phoneCheck = true, checkoutStep } = useSelector((state) => state.checkout);
+  const {
+    mode: selectedMode,
+    phoneCheck = true,
+    checkoutStep
+  } = useSelector((state: any) => state.checkout);
 
   useEffect(() => {
     if (checkoutStep) {
       setStep(checkoutStep);
-    }
-    else if (
+    } else if (
       selectedMode !== null &&
       checkout?.deliveryModuleOptionCode &&
       checkout?.deliveryAddressId &&
@@ -58,7 +62,6 @@ export default function useStep(checkout) {
       dispatch(setCheckoutStep(3));
     } else if (selectedMode !== null) {
       dispatch(setCheckoutStep(3));
-
     } else {
       setStep(1);
     }