feat: update design

Author: DasProffi

customer/.env.development

@@ -1,6 +1,6 @@
-NEXT_PUBLIC_API_URL=http://localhost:8000
-NEXT_PUBLIC_OIDC_PROVIDER=http://localhost:8080/realms/test
-NEXT_PUBLIC_CLIENT_ID=customer-api-keycloak
+NEXT_PUBLIC_API_URL=https://api.customer.helpwave.de
+NEXT_PUBLIC_OIDC_PROVIDER=https://id.helpwave.de/realms/main
+NEXT_PUBLIC_CLIENT_ID=customer.helpwave.de
 NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000/auth/callback
 NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI=http://localhost:3000/
 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51QqZfARtChvireAMzq4687T4m4TpyJvADX6IyM8A9u47lCUMMi0e2SNfxoSIDMM9DebiQCYwBa7mZRkJ50uZZjGC00hYO7FzL4

customer/.env.production

@@ -1,6 +1,6 @@
 NEXT_PUBLIC_API_URL=https://api.customer.helpwave.de
 NEXT_PUBLIC_OIDC_PROVIDER=https://id.helpwave.de/realms/main
-NEXT_PUBLIC_CLIENT_ID=customer
+NEXT_PUBLIC_CLIENT_ID=customer.helpwave.de
 NEXT_PUBLIC_REDIRECT_URI=https://issue-1206-customer-api-intg.customer-3de.pages.dev/auth/callback
 NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI=https://issue-1206-customer-api-intg.customer-3de.pages.dev/
 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51QqZfARtChvireAMzq4687T4m4TpyJvADX6IyM8A9u47lCUMMi0e2SNfxoSIDMM9DebiQCYwBa7mZRkJ50uZZjGC00hYO7FzL4

customer/api/dataclasses/customer_product.ts

@@ -1,5 +1,41 @@
 import type { Product, ProductPlan } from '@/api/dataclasses/product'
 import { ProductHelpers } from '@/api/dataclasses/product'
+import type { Translation } from '@helpwave/common/hooks/useTranslation'
+
+export type CustomerProductStatus =
+  'trialing'
+  | 'active'
+  | 'activation'
+  | 'payment'
+  | 'scheduled'
+  | 'canceled'
+  | 'expired'
+  | 'refunded'
+
+export type CustomerProductStatusTranslation = Record<CustomerProductStatus, string>
+
+export const defaultCustomerProductStatusTranslation : Translation<CustomerProductStatusTranslation> = {
+  en: {
+    trialing: 'Trialing',
+    active: 'Active',
+    activation: 'Activation Required',
+    payment: 'Awaiting Payment',
+    scheduled: 'Scheduled Cancelation',
+    canceled: 'Canceled',
+    expired: 'Expired',
+    refunded: 'Refunded'
+  },
+  de: {
+    trialing: 'Testphase',
+    active: 'Aktiv',
+    activation: 'Aktivierung erforderlich',
+    payment: 'Zahlung ausstehend',
+    scheduled: 'Geplante Kündingung',
+    canceled: 'Kündigung',
+    expired: 'Abgelaufen',
+    refunded: 'Erstattet'
+  }
+}
 
 export interface CustomerProduct {
   /** The identifier of the booking
@@ -13,6 +49,8 @@ export interface CustomerProduct {
   productUUID: string,
   /** The identifier of the plan for the booked product */
   productPlanUUID: string,
+  /** The status of the booking */
+  status: CustomerProductStatus,
   /** The number of seats allocated */
   seats?: number,
   /** The date from which the booking starts */
@@ -44,6 +82,8 @@ export interface ResolvedCustomerProduct {
   uuid: string,
   /** The identifier of the customer that booked the product */
   customerUUID: string,
+  /** The status of the booking */
+  status: CustomerProductStatus,
   /** The number of seats allocated */
   seats?: number,
   /** The date from which the booking starts */
@@ -67,6 +107,7 @@ function fromJson(json: any): CustomerProduct {
     customerUUID: json.customer_uuid,
     productUUID: json.product_uuid,
     productPlanUUID: json.product_plan_uuid,
+    status: json.status,
     seats: json.seats,
     startDate: new Date(json.start_date),
     nextPaymentDate: json.next_payment_date ? new Date(json.next_payment_date) : undefined,
@@ -82,6 +123,7 @@ function fromJsonResolvedCustomerProduct(json: any): ResolvedCustomerProduct {
   return {
     uuid: json.uuid,
     customerUUID: json.customer_uuid,
+    status: json.status,
     seats: json.seats,
     startDate: new Date(json.start_date),
     nextPaymentDate: json.next_payment_date ? new Date(json.next_payment_date) : undefined,
@@ -101,6 +143,7 @@ function toJson(customerProduct: CustomerProduct): any {
     customer_uuid: customerProduct.customerUUID,
     product_uuid: customerProduct.productUUID,
     product_plan_uuid: customerProduct.productPlanUUID,
+    status: customerProduct.status,
     seats: customerProduct.seats,
     start_date: customerProduct.startDate.toISOString(),
     next_payment_date: customerProduct.nextPaymentDate?.toISOString(),

customer/components/ContractList.tsx

@@ -0,0 +1,75 @@
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import { useContractsForProductsQuery } from '@/api/mutations/contract_mutations'
+import { LoadingAndErrorComponent } from '@helpwave/common/components/LoadingAndErrorComponent'
+import Link from 'next/link'
+import { ExternalLink } from 'lucide-react'
+import { tw } from '@twind/core'
+
+type ContractListTranslation = {
+  contracts: string,
+  noContracts: string,
+  show: string,
+}
+
+const defaultContractListTranslations: Record<Languages, ContractListTranslation> = {
+  en: {
+    contracts: 'Contracts',
+    noContracts: 'No Contracts',
+    show: 'Show'
+  },
+  de: {
+    contracts: 'Verträge',
+    noContracts: 'Keine Verträge',
+    show: 'Anzeigen'
+  }
+}
+
+export type ContractListProps = {
+  productIds: string[],
+}
+
+export const ContractList = ({
+                               productIds,
+                               overwriteTranslation
+                             }: PropsForTranslation<ContractListTranslation, ContractListProps>) => {
+  const translation = useTranslation(defaultContractListTranslations, overwriteTranslation)
+  const {
+    data: contracts,
+    isLoading,
+    isError,
+  } = useContractsForProductsQuery(productIds)
+
+  return (
+    <LoadingAndErrorComponent isLoading={isLoading} hasError={isError}>
+      {contracts && (
+        <div className={tw('flex flex-col gap-y-1')}>
+          <h3 className={tw('text-lg font-semibold')}>{translation.contracts}</h3>
+          {contracts.length === 0 ? (
+            <span className={tw('text-bg-gray-300')}>{translation.noContracts}</span>
+          ) : (
+            contracts.map(contract => (
+              <Link
+                href={contract.url}
+                target="_blank"
+                key={contract.uuid}
+                className={tw('inline-flex flex-row gap-x-2')}
+              >
+                {contract.key}
+                <span className={tw('inline-flex flex-row items-center')}>
+                  (
+                  <div className={tw('inline-flex flex-row items-center gap-x-0.5')}>
+                    {`${translation.show}`}
+                    <ExternalLink size={16}/>
+                  </div>
+                  )
+                </span>
+              </Link>
+            ))
+          )}
+        </div>
+      )}
+    </LoadingAndErrorComponent>
+  )
+}

customer/components/layout/MobileNavigationOverlay.tsx

@@ -67,6 +67,7 @@ export const MobileNavigationOverlay = ({ items, onCloseClick = noop, className
           <Link
             href={item.url}
             key={i}
+            target={item.isExternal ?? false ? '_blank' : undefined}
             className={tx(
               'flex flex-row justify-between items-center px-4 py-2 hover:bg-hw-primary-500/40 w-full text-lg font-semibold rounded-md',
               { 'bg-gray-100': router.pathname === item.url, 'bg-white': router.pathname !== item.url }

customer/components/layout/NavigationSidebar.tsx

@@ -19,6 +19,7 @@ export type NavItem = {
   name: Record<Languages, string>,
   icon?: ReactNode,
   url: string,
+  isExternal?: boolean,
   subItems?: NavItem[],
 }
 
@@ -67,6 +68,7 @@ export const NavigationSidebar = ({ items, className }: NavSidebarProps) => {
           <Link
             href={item.url}
             key={i}
+            target={item.isExternal ?? false ? '_blank' : undefined}
             className={tx(
               'px-4 py-2 bg-gray-50 hover:bg-hw-primary-500/40 flex flex-row gap-x-2 px-4 items-center',
               { 'bg-gray-200': router.pathname == item.url }

customer/components/layout/Page.tsx

@@ -9,7 +9,7 @@ import Link from 'next/link'
 import { Helpwave } from '@helpwave/common/icons/Helpwave'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
-import { Menu, Package, Receipt, Settings } from 'lucide-react'
+import { Menu, MessageCircleQuestionIcon, Package, Receipt, Section, Settings } from 'lucide-react'
 import Head from 'next/head'
 import { MobileNavigationOverlay } from '@/components/layout/MobileNavigationOverlay'
 
@@ -39,6 +39,18 @@ const navItems: NavItem[] = [
   { name: { en: 'Products', de: 'Produkte' }, url: '/products', icon: (<Package size={24}/>) },
   { name: { en: 'Invoices', de: 'Rechnungen' }, url: '/invoices', icon: (<Receipt size={24}/>) },
   { name: { en: 'Settings', de: 'Einstellungen' }, url: '/settings', icon: (<Settings size={24}/>) },
+  {
+    name: { en: 'Imprint', de: 'Impressum' },
+    url: 'https://cdn.helpwave.de/imprint.html',
+    isExternal: true,
+    icon: (<Section size={24}/>)
+  },
+  {
+    name: { en: 'Support', de: 'Support' },
+    url: 'mailto:contact@helpwave.de',
+    isExternal: true,
+    icon: (<MessageCircleQuestionIcon size={24}/>)
+  },
 ]
 
 /**

customer/pages/index.tsx

@@ -7,6 +7,8 @@ import { withOrganization } from '@/hooks/useOrganization'
 import { withAuth } from '@/hooks/useAuth'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import { tw } from '@twind/core'
+import { LoadingAnimation } from '@helpwave/common/components/LoadingAnimation'
 
 type DashboardTranslation = {
   dashboard: string,
@@ -30,12 +32,14 @@ const Dashboard: NextPage<PropsForTranslation<DashboardTranslation, DashboardSer
   const router = useRouter()
 
   useEffect(() => {
-    router.push('/products').catch(console.error)
+   router.push('/products').catch(console.error)
   }, [router])
 
   return (
-    <Page pageTitle={titleWrapper(translation.dashboard)}>
-      <div>This is the {translation.dashboard} page</div>
+    <Page pageTitle={titleWrapper(translation.dashboard)} mainContainerClassName={tw('h-full')}>
+      <div className={tw('flex flex-col h-full items-center justify-center')}>
+        {<LoadingAnimation/>}
+      </div>
     </Page>
   )
 }