feat: view agreement signature and driver signing status (#405)

* feat: view for seeing the status of checkout and checkin signature states

* feat: view agreement customer signature and signature status

* refactor: reduce unnecessary use of `cn`

* chore: upgrade tanstack router to 1.46.4

package.json

@@ -48,16 +48,17 @@
     "@tanstack/query-broadcast-client-experimental": "^5.51.17",
     "@tanstack/react-query": "^5.51.18",
     "@tanstack/react-query-devtools": "^5.51.18",
-    "@tanstack/react-router": "^1.46.3",
+    "@tanstack/react-router": "^1.46.4",
     "@tanstack/react-table": "^8.19.3",
     "@tanstack/react-virtual": "^3.8.4",
-    "@tanstack/router-devtools": "^1.46.3",
+    "@tanstack/router-devtools": "^1.46.4",
     "@ts-rest/core": "^3.48.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "compare-versions": "^6.1.1",
     "date-fns": "^3.6.0",
+    "framer-motion": "^11.3.21",
     "i18next": "^23.12.2",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",

src/lib/api/_digitalSignature.contract.ts

@@ -0,0 +1,37 @@
+import { z } from "zod";
+
+import { c } from "@/lib/api/c";
+import { DigitalSignatureDriverSchema } from "@/lib/schemas/digital-signature/driverList";
+
+import { StructuredErrorSchema, UnauthorizedErrorSchema } from "./helpers";
+
+const rootDigitalSignatureContract = c.router({
+  getDriversList: {
+    method: "GET",
+    path: "/v3/digitalsignature/additionaldriverlist",
+    query: z.object({
+      agreementId: z.string().optional(),
+      reservationId: z.string().optional(),
+    }),
+    responses: {
+      200: z.array(DigitalSignatureDriverSchema),
+    },
+  },
+  getDigitalSignatureImageUrl: {
+    method: "POST",
+    path: "/v3/digitalsignature/reloadsignatureimageurl",
+    responses: {
+      200: z.string(),
+      204: z.string().or(z.undefined()),
+      401: UnauthorizedErrorSchema,
+      404: StructuredErrorSchema,
+    },
+    body: z.object({
+      isCheckin: z.boolean(),
+      agreementId: z.string(),
+      signatureImageUrl: z.string(),
+    }),
+  },
+});
+
+export { rootDigitalSignatureContract };

src/lib/api/_root.contract.ts

@@ -2,6 +2,7 @@ import { rootAgreementContract } from "./_agreement.contract";
 import { rootClientContract } from "./_client.contract";
 import { rootCustomerContract } from "./_customer.contract";
 import { rootDashboardContract } from "./_dashboard.contract";
+import { rootDigitalSignatureContract } from "./_digitalSignature.contract";
 import { rootLocationContract } from "./_location.contract";
 import { rootMiscChargeContract } from "./_misc-charge.contract";
 import { rootNoteContract } from "./_note.contract";
@@ -24,6 +25,7 @@ const contract = c.router(
     client: rootClientContract,
     customer: rootCustomerContract,
     dashboard: rootDashboardContract,
+    digitalSignature: rootDigitalSignatureContract,
     location: rootLocationContract,
     miscCharge: rootMiscChargeContract,
     note: rootNoteContract,

src/lib/query/digitalSignature.ts

@@ -0,0 +1,69 @@
+import { queryOptions } from "@tanstack/react-query";
+
+import { apiClient } from "@/lib/api";
+
+import { isEnabled, makeQueryKey } from "./helpers";
+import type { Auth, Enabled } from "./helpers";
+
+const SEGMENT = "digital_signature";
+
+export function fetchDigitalSignatureDriversList(
+  options: {
+    agreementId?: string;
+    reservationId?: string;
+  } & Auth &
+    Enabled
+) {
+  const { enabled = true } = options;
+
+  return queryOptions({
+    queryKey: makeQueryKey(options, [
+      SEGMENT,
+      options.agreementId
+        ? `agreement_${options.agreementId}`
+        : `reservation_${options.reservationId}`,
+    ]),
+    queryFn: () =>
+      apiClient.digitalSignature
+        .getDriversList({
+          query: {
+            agreementId: options.agreementId,
+            reservationId: options.reservationId,
+          },
+        })
+        .then((res) => ({ ...res, headers: null })),
+    enabled: isEnabled(options) && enabled,
+  });
+}
+
+export function fetchAgreementDigitalSignatureUrl(
+  options: {
+    agreementId: string;
+    driverId: string | null;
+    isCheckin: boolean;
+    signatureImageUrl: string;
+  } & Auth &
+    Enabled
+) {
+  const { enabled = true } = options;
+
+  return queryOptions({
+    queryKey: makeQueryKey(options, [
+      SEGMENT,
+      `agreement_${options.agreementId}`,
+      options.driverId || "no-driver-id",
+      `checkin_${options.isCheckin}`,
+    ]),
+    queryFn: () =>
+      apiClient.digitalSignature
+        .getDigitalSignatureImageUrl({
+          body: {
+            agreementId: options.agreementId,
+            isCheckin: options.isCheckin,
+            signatureImageUrl: options.signatureImageUrl,
+          },
+        })
+        .then((res) => ({ ...res, headers: null })),
+    enabled: isEnabled(options) && enabled,
+  });
+}

src/lib/schemas/digital-signature/driverList.ts

@@ -0,0 +1,53 @@
+import { z } from "zod";
+
+export const DigitalSignatureDriverSchema = z.object({
+  driverId: z.number(),
+  agreementId: z.number().nullable(),
+  customerId: z.number().nullable(),
+  driverName: z.string().nullable(),
+  firstName: z.string().nullable(),
+  lastName: z.string().nullable(),
+  dateOfBirth: z.string().nullable(),
+  driverType: z.number(),
+  createdBy: z.coerce.string().nullable(),
+  licenseNumber: z.string().nullable(),
+  licenseCategory: z.string().nullable(),
+  licenseExpiryDate: z.string().nullable(),
+  email: z.string().nullable(),
+  licenseIssueDate: z.string().nullable(),
+  licenseIssueState: z.string().nullable(),
+  hPhone: z.string().nullable(),
+  bPhone: z.string().nullable(),
+  cPhone: z.string().nullable(),
+  address: z.string().nullable(),
+  city: z.string().nullable(),
+  stateId: z.number().nullable(),
+  zipCode: z.string().nullable(),
+  countryId: z.number().nullable(),
+  signatureName: z.string().nullable(),
+  signatureImageUrl: z.string().nullable(),
+  reservationId: z.number().nullable(),
+  insuranceCompany: z.string().nullable(),
+  checkForDelete: z.number().nullable(),
+  dateofBirth: z.string().nullable(),
+  dateofBirthStr: z.string().nullable(),
+  createdDate: z.string().nullable(),
+  updatedDate: z.string().nullable(),
+  updateBy: z.coerce.string().nullable(),
+  driverLicenseNumber: z.string().nullable(),
+  driverLicenseCategory: z.string().nullable(),
+  driverLicenseExpiryDate: z.string().nullable(),
+  isDelete: z.boolean(),
+  isFromCustomer: z.boolean(),
+  phone: z.string().nullable(),
+  signatureImageUrlString: z.string().nullable(),
+  startDate: z.string().nullable(),
+  endDate: z.string().nullable(),
+  referenceType: z.string().nullable(),
+  referenceId: z.coerce.string().nullable(),
+  countryName: z.string().nullable(),
+  signatureDate: z.string().nullable(),
+});
+export type DigitalSignatureDriver = z.infer<
+  typeof DigitalSignatureDriverSchema
+>;