feat: add connectio fo payment and add new field on checkout form

.vscode/settings.json

@@ -23,5 +23,8 @@
   "terminal.integrated.localEchoStyle": "dim",
   "search.exclude": {
     "**/node_modules": true
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

README.md

@@ -1,8 +1,13 @@
 # ROADMAP
 
+- [ ] Add sentry errors in payment checkout and api Cybersource errors
+- [ ] Save in table links ids authroize, capture or in table of transactions (Analizer)
+- [ ] Add logo of eleven in button payment
 - [ ] Fix avoid zoom whne fill fiels on mobile
+- [ ] Sticky info payment on the right
 - [ ] Middleware no check user logged in when is public route like /:link
 - [ ] Redirect when login with google to localhost in production
 - [ ] Multiple redirect_urls auth supabase https://supabase.com/docs/guides/auth/redirect-urls for production and dev
+- [ ] Add text of  "With technology of Cybersource(logo)"
 - [ ] Payment checkout Medusa and Cybersource
 - [ ] Detect when user leaves the page

apps/app/src/actions/checkout/capture-payment-action.ts → apps/app/src/actions/checkout/generate-payment-action.ts

@@ -2,10 +2,9 @@
 
 import { actionClientWithMeta } from "@/actions/safe-action";
 import axios from "axios";
-import { useRouter } from "next/router";
 import { checkoutSchema } from "./schema";
 
-export const createPaymentAction = actionClientWithMeta
+export const generatePaymentAction = actionClientWithMeta
   .schema(checkoutSchema)
   .metadata({
     name: "capture-payment",
@@ -18,6 +17,13 @@ export const createPaymentAction = actionClientWithMeta
       "cc-expiration": ccExpiration,
       email,
       "cc-name": ccName,
+      name,
+      lastName,
+      country,
+      state,
+      zip,
+      city,
+      address,
     } = input;
 
     const res = await axios.post(
@@ -29,8 +35,15 @@ export const createPaymentAction = actionClientWithMeta
         ccExpiration,
         ccName,
         email,
+        name,
+        lastName,
+        country,
+        state,
+        zip,
+        city,
+        address,
       },
     );
 
-    return true;
+    return res.data;
   });

apps/app/src/actions/checkout/schema.ts

@@ -1,36 +1,67 @@
+import { COUNTRIES_REQUIRED_STATE } from "@/lib/cybersource";
 import validCreditCard from "card-validator";
 import { z } from "zod";
 
-export const checkoutSchema = z.object({
-  email: z.string().email({ message: "Required" }),
-  "cc-number": z
-    .string()
-    .min(16, { message: "Required" })
-    .refine(
-      (value) => {
-        const cardValidator = validCreditCard.number(value);
-        return cardValidator.isPotentiallyValid;
-      },
-      {
-        message: "Invalid credit card number",
-      },
-    ),
-  "cc-expiration": z
-    .string()
-    .min(1, { message: "Required" })
-    .refine(
-      (value) => {
-        const cardValidator = validCreditCard.expirationDate(value);
-        return cardValidator.isValid;
-      },
-      {
-        message: "Invalid expiration date",
-      },
-    ),
-  "cc-cvv": z
-    .string()
-    .min(3, { message: "Required" })
-    .max(4, { message: "Required" }),
-  "cc-name": z.string().min(1, { message: "Required" }),
-  link: z.string().optional(),
-});
+export const checkoutSchema = z
+  .object({
+    email: z.string().email({ message: "Required" }),
+    "cc-number": z
+      .string()
+      .min(1, { message: "Required" })
+      .refine(
+        (value) => {
+          const cardValidator = validCreditCard.number(value);
+          return cardValidator.isPotentiallyValid;
+        },
+        {
+          message: "Invalid credit card number",
+        },
+      ),
+    "cc-expiration": z
+      .string()
+      .min(1, { message: "Required" })
+      .refine(
+        (value) => {
+          const cardValidator = validCreditCard.expirationDate(value);
+          return cardValidator.isValid;
+        },
+        {
+          message: "Invalid expiration date",
+        },
+      ),
+    "cc-cvv": z
+      .string()
+      .min(3, { message: "Required" })
+      .max(4, { message: "Required" }),
+    "cc-name": z.string().min(1, { message: "Required" }),
+    name: z.string().min(1, { message: "Required" }),
+    lastName: z.string().min(1, { message: "Required" }),
+    country: z
+      .string()
+      .min(2, { message: "Required" })
+      .max(2, { message: "Required" }),
+    state: z.string(),
+    zip: z.string(),
+    address: z.string().min(1, { message: "Required" }),
+    city: z.string().min(1, { message: "Required" }),
+    link: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (COUNTRIES_REQUIRED_STATE.includes(data.country)) {
+      if (data.state === "") {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Required",
+          path: ["state"],
+        });
+      }
+
+      if (data.zip === "") {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Required",
+          path: ["zip"],
+        });
+      }
+    }
+  });

apps/app/src/app/[locale]/(public)/[link]/page.tsx

@@ -3,6 +3,7 @@ import Payment from "@/components/payment/payment";
 import { Suspense } from "react";
 import "./styles.css";
 import PaymentLoading from "@/components/payment/payment-loading";
+
 export const metadata = {
   title: {
     absolute: BUSINESS.name,
@@ -11,7 +12,7 @@ export const metadata = {
 
 const page = async ({ params }: { params: { link: string } }) => {
   return (
-    <section className="checkout-container h-auto checkout:h-screen w-screen overflow-hidden flex items-start justify-center bg-white checkout:bg-neutral-50">
+    <section className="checkout-container h-auto checkout:h-full w-full overflow-hidden flex items-start justify-center bg-white pb-10">
       <Suspense fallback={<PaymentLoading />}>
         <Payment link={params.link} />
       </Suspense>

apps/app/src/app/[locale]/(public)/[link]/styles.css

@@ -12,10 +12,28 @@
   transform-origin: right;
 }
 
+.checkout-container::after {
+  content: "";
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  position: fixed;
+  background-color: #fafafa;
+}
+
 @media (min-width: 990px) {
+
   .checkout-container::before {
     display: block;
   }
+
+  .checkout-container::after {
+    display: block;
+  }
 }
 
 @keyframes add-shadow {