feat: remove yup from d2c, using zod instead

elasticpath · Oct 19, 2023 · babd9a6 · babd9a6
1 parent 1d8d3bb
commit babd9a6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/...atics/checkout/files/src/components/checkout/form-schema/checkout-form-schema.ts.template b/...atics/checkout/files/src/components/checkout/form-schema/checkout-form-schema.ts.template
@@ -1,39 +1,50 @@
-import * as Yup from "yup";
+import { z } from "zod";
 
-const personalInformationSchema = Yup.object({
-  email: Yup.string().email("Invalid email").required("Required"),
+const personalInformationSchema = z.object({
+  email: z.string({ required_error: "Required" }).email("Invalid email"),
 });
 
-const billingAddressSchema = Yup.object({
-  first_name: Yup.string()
-    .min(2)
-    .required("You need to provided a first name."),
-  last_name: Yup.string().min(2).required("You need to provided a last name."),
-  company_name: Yup.string().min(1).optional(),
-  line_1: Yup.string().min(1).required("You need to provided an address."),
-  line_2: Yup.string().min(1).optional(),
-  city: Yup.string().min(1).optional(),
-  county: Yup.string().min(1).optional(),
-  region: Yup.string().min(1).required("You need to provided a region."),
-  postcode: Yup.string().min(1).required("You need to provided a postcode."),
-  country: Yup.string().min(1).required("You need to provided a country."),
+const billingAddressSchema = z.object({
+  first_name: z
+      .string({ required_error: "You need to provided a first name." })
+      .min(2),
+  last_name: z
+      .string({ required_error: "You need to provided a last name." })
+      .min(2),
+  company_name: z.string().min(1).optional(),
+  line_1: z
+      .string({ required_error: "You need to provided an address." })
+      .min(1),
+  line_2: z.string().min(1).optional(),
+  city: z.string().min(1).optional(),
+  county: z.string().min(1).optional(),
+  region: z.string({ required_error: "You need to provided a region." }).min(1),
+  postcode: z
+      .string({ required_error: "You need to provided a postcode." })
+      .min(1),
+  country: z
+      .string({ required_error: "You need to provided a country." })
+      .min(1),
 });
 
-const shippingAddressSchema = Yup.object({
-  phone_number: Yup.string()
-    .matches(
-      /^(\+?\d{0,4})?\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{4}\)?)?$/,
-      "Phone number is not valid",
-    )
-    .optional(),
-  instructions: Yup.string().min(1).optional(),
-}).concat(billingAddressSchema);
+const shippingAddressSchema = z
+    .object({
+      phone_number: z
+          .string()
+          .regex(
+              /^(\+?\d{0,4})?\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{3}\)?)\s?-?\s?(\(?\d{4}\)?)?$/,
+              "Phone number is not valid"
+          )
+          .optional(),
+      instructions: z.string().min(1).optional(),
+    })
+    .merge(billingAddressSchema);
 
-export const checkoutFormSchema = Yup.object().shape({
+export const checkoutFormSchema = z.object({
   personal: personalInformationSchema,
   shippingAddress: shippingAddressSchema,
-  sameAsShipping: Yup.boolean().default(true),
-  billingAddress: billingAddressSchema.notRequired().default(undefined),
+  sameAsShipping: z.boolean().default(true),
+  billingAddress: billingAddressSchema.optional(),
 });
 
-export type CheckoutForm = Yup.InferType<typeof checkoutFormSchema>;
+export type CheckoutForm = z.TypeOf<typeof checkoutFormSchema>;
diff --git a/...payments-payment-gateway/files/src/components/checkout/payments/CheckoutForm.tsx.template b/...payments-payment-gateway/files/src/components/checkout/payments/CheckoutForm.tsx.template
@@ -13,6 +13,7 @@ import { confirmOrder, makePayment } from "../../../services/checkout";
 import { useState } from "react";
 import { CheckoutFormComponent } from "../types/checkout-form";
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
+import {toFormikValidationSchema} from "zod-formik-adapter";
 
 const initialValues: Partial<CheckoutFormType> = {
   personal: {
@@ -83,7 +84,7 @@ const CheckoutForm: CheckoutFormComponent = ({
       ) : (
         <Formik
           initialValues={initialValues as CheckoutFormType}
-          validationSchema={checkoutFormSchema}
+          validationSchema={toFormikValidationSchema(checkoutFormSchema)}
           onSubmit={async (validatedValues) => {
             const {
               personal,

diff --git a/packages/d2c-schematics/utility/latest-versions/package.json b/packages/d2c-schematics/utility/latest-versions/package.json
@@ -15,7 +15,6 @@
     "react": "^18.2.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
-    "yup": "^1.3.0",
     "@babel/core": "^7.18.10",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^6.1.3",

diff --git a/packages/d2c-schematics/workspace/files/package.json.template b/packages/d2c-schematics/workspace/files/package.json.template
@@ -32,7 +32,6 @@
     "react": "<%= latestVersions['react'] %>",
     "react-device-detect": "<%= latestVersions['react-device-detect'] %>",
     "react-dom": "<%= latestVersions['react-dom'] %>",
-    "yup": "<%= latestVersions['yup'] %>",
     "react-toastify": "<%= latestVersions['react-toastify'] %>",
     "@heroicons/react": "<%= latestVersions['@heroicons/react'] %>",
     "@headlessui/react": "<%= latestVersions['@headlessui/react'] %>",