feat: add shop pages (#1200)

* feat: add shop pages

* feat: add link to contract on product contract page

---------

Co-authored-by: Felix Evers <git@felixevers.de>

Author: DasProffi

customer/api/dataclasses/booked_product.ts

@@ -0,0 +1,8 @@
+export type Contract = {
+  uuid: string,
+  version: string,
+  name: string,
+  contractId: string,
+  url: string,
+  lastAccepted?: Date,
+}

customer/api/dataclasses/contract.ts

@@ -1,7 +1,7 @@
 import type { Address } from '@/api/dataclasses/address'
-import type { BookedProduct } from '@/api/dataclasses/booked_product'
+import type { CustomerProduct } from '@/api/dataclasses/customer_product'
 
-export type CustomerProductExtension = { products: BookedProduct[] }
+export type CustomerProductExtension = { products: CustomerProduct[] }
 
 export type Customer = {
   uuid: string,

customer/api/dataclasses/customer.ts

@@ -0,0 +1,30 @@
+import type { Contract } from '@/api/dataclasses/contract'
+import type { Product } from '@/api/dataclasses/product'
+
+type CustomerProductStatus = 'booked' | 'booking' | 'canceled' | 'inCart'
+
+export type CustomerProduct = {
+  /** The identifier of the booking
+   *
+   *  undefined if creating
+   */
+  uuid?: string,
+  /** The identifier of the booked product */
+  productUUID: string,
+  /** The identifier of the customer that booked the product */
+  customerUUID: string,
+  /** The date from which the booking starts */
+  startDate: Date,
+  /**
+   * The date from the booking ends
+   *
+   * undefined if it is continuous
+   */
+  endDate?: Date,
+  status: CustomerProductStatus,
+  /** The contracts used for the booking */
+  contracts: Contract[],
+  /** The optionally loaded data of the product */
+  product?: Product,
+  // voucherCode: string,
+}

customer/api/dataclasses/customer_product.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query'
+import { QueryKeys } from '@/api/mutations/query_keys'
+import { ContractsAPI } from '@/api/services/contract'
+
+export const useContractQuery = (id?: string) => {
+  return useQuery({
+    queryKey: [QueryKeys.contract, id],
+    enabled: id !== undefined,
+    queryFn: async () => {
+      if(id === undefined) {
+        return
+      }
+      return await ContractsAPI.get(id)
+    },
+  })
+}
+
+export const useContractsQuery = () => {
+  return useQuery({
+    queryKey: [QueryKeys.contract, 'all'],
+    queryFn: async () => {
+      return await ContractsAPI.getMany()
+    },
+  })
+}
+

customer/api/mutations/contract_mutations.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { QueryKeys } from '@/api/mutations/query_keys'
+import { CustomerProductsAPI } from '@/api/services/customer_product'
+
+export const useCustomerProductsQuery = () => {
+  return useQuery({
+    queryKey: [QueryKeys.customerProduct],
+    queryFn: async () => {
+      return await CustomerProductsAPI.getMany()
+    },
+  })
+}

customer/api/mutations/customer_product_mutations.ts

@@ -2,7 +2,8 @@ export const QueryKeys = {
   product: 'product',
   userSeat: 'user-seat',
   customer: 'customer',
-  activeProduct: 'active-products',
+  customerProduct: 'customer-products',
   invoice: 'invoice',
   voucher: 'voucher',
+  contract: 'contract',
 }

customer/api/mutations/query_keys.ts

@@ -0,0 +1,45 @@
+import type { Contract } from '@/api/dataclasses/contract'
+
+// TODO delete later
+export const exampleContracts: Contract[] = [
+  {
+    uuid: '1',
+    name: 'Contract 1',
+    version: 'v1-2211',
+    contractId: 'agb',
+    url: 'https://cdn.helpwave.de/privacy.html',
+  },
+  {
+    uuid: '2',
+    name: 'Contract 2',
+    version: 'v2-7110',
+    contractId: 'agb',
+    url: 'https://cdn.helpwave.de/privacy.html',
+  },
+  {
+    uuid: '3',
+    name: 'Contract 3',
+    version: 'v1-9811',
+    contractId: 'agb',
+    url: 'https://cdn.helpwave.de/privacy.html',
+  }
+]
+
+export const ContractsAPI = {
+  get:  async (id: string): Promise<Contract> => {
+    const contract = exampleContracts.find(value => value.uuid === id)
+    if (!contract) {
+      throw new Error('Could not find contract')
+    }
+    return contract
+  },
+  getMany: async (): Promise<Contract[]>  => {
+    return exampleContracts
+  },
+  /**
+   * Returns all
+   */
+  getForProduct: async (_: string): Promise<Contract[]>  => {
+    return exampleContracts
+  },
+}

customer/api/services/contract.ts

@@ -0,0 +1,24 @@
+import type { CustomerProduct } from '@/api/dataclasses/customer_product'
+
+const customerProductsData: CustomerProduct[] = [
+  {
+    uuid: '1',
+    customerUUID: 'customer',
+    productUUID: '1',
+    startDate: new Date(2025, 1, 1),
+    status: 'booked',
+    contracts: []
+  }
+]
+
+export const CustomerProductsAPI = {
+  getMany: async () => {
+    return customerProductsData
+  },
+  buy: async (_: CustomerProduct) => {
+    // TODO
+  },
+  update: async (_: CustomerProduct) => {
+    // TODO
+  },
+}

customer/api/services/customer_product.ts

@@ -31,6 +31,7 @@ export type PageProps = PropsWithChildren<{
   footer?: ReactNode,
   isHidingSidebar?: boolean,
   mainContainerClassName?: string,
+  contentAndFooterClassName?: string,
 }>
 
 const navItems: NavItem[] = [
@@ -51,12 +52,13 @@ export const Page = ({
                        footer = (<Footer/>),
                        isHidingSidebar = false,
                        mainContainerClassName,
+                       contentAndFooterClassName,
                      }: PageProps) => {
   const translation = useTranslation(defaultPageTranslationTranslation)
   const [isNavigationVisible, setIsNavigationVisible] = useState(false)
 
   const mainContent = (
-    <div className={tw('flex flex-col items-center justify-between w-full h-full overflow-y-scroll')}>
+    <div className={tx('flex flex-col justify-between w-full h-full overflow-y-scroll', contentAndFooterClassName)}>
       <main className={tx('@(flex flex-col max-w-[1200px] gap-y-6)', mainContainerClassName)}>
         {children}
       </main>