feat: add referral links

DasProffi · DasProffi · commit 01eb8b882338 · 2025-04-22T19:37:12.000+02:00
diff --git a/customer/hooks/useCart.tsx b/customer/hooks/useCart.tsx
@@ -15,6 +15,7 @@ export type CartItem = {
 }
 
 export type CartContextType = {
+  isLoading: boolean,
   cart: CartItem[],
   addItem: (item: CartItem) => void,
   updateItem: (item: CartItem) => void,
@@ -23,11 +24,12 @@ export type CartContextType = {
 }
 
 const CartContext = createContext<CartContextType>({
+  isLoading: true,
   cart: [],
   addItem: noop,
   clearCart: noop,
   removeItem: noop,
-  updateItem: noop
+  updateItem: noop,
 })
 
 
@@ -71,19 +73,20 @@ export const CartProvider = ({ children }: PropsWithChildren) => {
 
   // Remove item from cart
   const removeItem = (id: string) => {
-    setCart(cart.filter((item) => item.id !== id))
+    setCart((prevState) => prevState.filter((item) => item.id !== id))
   }
 
   // Update
   const updateItem = (update: CartItem) => {
-    setCart(cart.map((item) => (item.id ===  update.id? update : item)))
+    setCart(prevState => prevState.map((item) => (item.id ===  update.id? update : item)))
   }
 
   // Clear cart
-  const clearCart = () => setCart([])
+  const clearCart = () => setCart(() => [])
 
   return (
-    <CartContext.Provider value={{ cart, addItem, removeItem, updateItem, clearCart }}>
+    <CartContext.Provider
+      value={{ cart, addItem, removeItem, updateItem, clearCart, isLoading }}>
       {children}
     </CartContext.Provider>
   )
diff --git a/customer/pages/products/overview.tsx b/customer/pages/products/overview.tsx
@@ -7,7 +7,8 @@ import { useProductsAllQuery } from '@/api/mutations/product_mutations'
 import { Section } from '@/components/layout/Section'
 import { tw, tx } from '@twind/core'
 import type {
-  ProductPlanTranslation } from '@/api/dataclasses/product'
+  ProductPlanTranslation
+} from '@/api/dataclasses/product'
 import {
   defaultProductPlanTranslation
 } from '@/api/dataclasses/product'
@@ -21,12 +22,22 @@ import { withCart } from '@/hocs/withCart'
 import { LoadingAndErrorComponent } from '@helpwave/common/components/LoadingAndErrorComponent'
 import { useRouter } from 'next/router'
 import { Modal } from '@helpwave/common/components/modals/Modal'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Input } from '@helpwave/common/components/user-input/Input'
 import { VoucherAPI } from '@/api/services/voucher'
 import type { Voucher } from '@/api/dataclasses/voucher'
 import { Chip } from '@helpwave/common/components/ChipList'
 import { useCustomerProductsCalculateQuery } from '@/api/mutations/customer_product_mutations'
+import { ProductAPI } from '@/api/services/product'
+import { LoadingAnimation } from '@helpwave/common/components/LoadingAnimation'
+
+type ReferralStatus = 'loading' | 'error'
+type ReferralData = {
+  product: string,
+  plan: string,
+  voucher?: string,
+}
+
 
 type CartOverviewTranslation = {
   removeFromCart: string,
@@ -43,6 +54,8 @@ type CartOverviewTranslation = {
   redeemVoucherFor: (name: string) => string,
   code: string,
   invalidCode: string,
+  referral: string,
+  referralError: string,
 } & ProductPlanTranslation
 
 const defaultCartOverviewTranslations: Record<Languages, CartOverviewTranslation> = {
@@ -62,6 +75,8 @@ const defaultCartOverviewTranslations: Record<Languages, CartOverviewTranslation
     redeemVoucherFor: (name: string) => `Redeem Voucher for ${name}`,
     code: 'Code',
     invalidCode: 'The provided Code is not valid (for this product), please try a different one.',
+    referral: 'Referral',
+    referralError: 'The Referral could not be processed.',
   },
   de: {
     ...defaultProductPlanTranslation.de,
@@ -79,30 +94,103 @@ const defaultCartOverviewTranslations: Record<Languages, CartOverviewTranslation
     redeemVoucherFor: (name: string) => `Gutschein einlösen für ${name}`,
     code: 'Code',
     invalidCode: 'Der eingegebenen Gutschein-Code ist nicht gültig (für dieses Produkt), versuchen Sie einen anderen.',
+    referral: 'Überweisung', // TODO fix translation
+    referralError: 'Die Überweisung hat nicht funktioniert.',
   }
 }
 
 
 const CartOverview: NextPage = () => {
   const translation = useTranslation(defaultCartOverviewTranslations)
   const router = useRouter()
+  const [hasUsedReferral, setHasUsedReferral] = useState<boolean>(false)
   const { authHeader } = useAuth()
-  const { cart, removeItem, updateItem } = useCart()
+  const [referralStatus, setReferralStatus] = useState<ReferralStatus>()
+  const { cart, removeItem, updateItem, addItem, isLoading: cartIsLoading } = useCart()
   const [productVoucherModalId, setProductVoucherModalId] = useState<string>()
   const [voucherCode, setVoucherCode] = useState<string>('')
   const [redeemResponse, setRedeemResponse] = useState<string>()
   const { data: products, isError: productsError, isLoading: productsLoading } = useProductsAllQuery()
-  const { data: prices, isError: pricesError, isLoading: pricesLoading } = useCustomerProductsCalculateQuery(cart.map(item => ({
+  const {
+    data: prices,
+    isError: pricesError,
+    isLoading: pricesLoading,
+    isRefetching,
+    refetch,
+  } = useCustomerProductsCalculateQuery(cart.map(item => ({
     productUuid: item.id,
     productPlanUuid: item.plan.uuid,
     voucherUuid: item.voucher?.uuid
   })))
 
+  useEffect(() => {
+    refetch().catch(console.error)
+  }, [cart])
+
+  useEffect(() => {
+    if (!router.isReady || cartIsLoading || hasUsedReferral) return
+
+    const referralParam = router.query['referral']
+
+    if (!referralParam || typeof referralParam !== 'string') return
+
+    try {
+      const decoded = atob(referralParam)
+      const parsed: ReferralData = JSON.parse(decoded)
+
+      const check = async () => {
+        const products = await ProductAPI.getAvailable(authHeader)
+        const product = products.find(value => value.uuid === parsed.product)
+        const plan = product?.plan.find(value => value.uuid === parsed.plan)
+
+        // TODO try to parse voucher
+
+        if (!product || !plan) {
+          setReferralStatus('error')
+          setHasUsedReferral(true)
+          return
+        }
+
+        if (cart.find(value => value.id === product?.uuid)) {
+          // TODO maybe show an additional dialog here
+          updateItem({ id: product?.uuid, plan: plan, quantity: 1 })
+        } else {
+          addItem({ id: product?.uuid, plan: plan, quantity: 1 })
+        }
+      }
+
+      check().catch((reason) => {
+        console.error(reason)
+        setReferralStatus('error')
+        setHasUsedReferral(true)
+      }).then(() => {
+        setReferralStatus(undefined)
+        setHasUsedReferral(true)
+      })
+    } catch (err) {
+      console.error(err)
+      setReferralStatus('error')
+      setHasUsedReferral(true)
+    }
+  }, [router, cart])
+
   const isError = pricesError || productsError
-  const isLoading = pricesLoading || productsLoading || Object.keys(prices?.products ?? {}).length === 0
+  const isLoading = pricesLoading || productsLoading || isRefetching
 
   return (
     <Page pageTitle={titleWrapper(translation.overview)}>
+      <Modal
+        id="referral-modal"
+        isOpen={!!referralStatus}
+        onBackgroundClick={referralStatus === 'error' ? () => setReferralStatus(undefined) : undefined}
+        onCloseClick={referralStatus === 'error' ? () => setReferralStatus(undefined) : undefined}
+        titleText={translation.referral}
+        modalClassName={tw('gap-y-2')}
+      >
+        {referralStatus === 'error' ? (
+          <span className={tw('text-hw-negative-500')}>{translation.referralError}</span>
+        ) : (<LoadingAnimation/>)}
+      </Modal>
       <Modal
         id="voucher-modal"
         isOpen={!!productVoucherModalId}
@@ -153,7 +241,7 @@ const CartOverview: NextPage = () => {
                 const plan = product?.plan.find(value => value.uuid === cartItem.plan.uuid)
                 const voucher = cartItem.voucher
 
-                if(!product || !plan){
+                if (!product || !plan) {
                   return []
                 }
                 const priceResult = prices.products[product.uuid]!
diff --git a/customer/pages/products/pay.tsx b/customer/pages/products/pay.tsx
@@ -39,6 +39,7 @@ type ProductsTranslation = {
   bookingFailure: string,
   bookingFailureDesc: string,
   toInvoices: string,
+  noTermsAndConditions: string,
 } & ProductPlanTypeTranslation
 
 const defaultProductsTranslations: Record<Languages, ProductsTranslation> = {
@@ -58,6 +59,7 @@ const defaultProductsTranslations: Record<Languages, ProductsTranslation> = {
     bookingFailure: 'Booking failed',
     bookingFailureDesc: 'Try again or contact our support at:',
     toInvoices: 'View Invoices',
+    noTermsAndConditions: 'No Terms and Conditions required.',
   },
   de: {
     ...defaultProductPlanTypeTranslation.de,
@@ -75,6 +77,7 @@ const defaultProductsTranslations: Record<Languages, ProductsTranslation> = {
     bookingFailure: 'Buchung fehlgeschlagen',
     bookingFailureDesc: 'Versuchen sie es erneut oder kontaktieren sie unseren Support unter:',
     toInvoices: 'Zu den Rechnungen',
+    noTermsAndConditions: 'Keine Verträge und Nutzungsbedingungen benötigt',
   }
 }
 
@@ -169,7 +172,7 @@ const Payment: NextPage = () => {
           <h4 className={tw('font-bold text-xl')}>{translation.termsAndConditions}</h4>
           {products && contracts && (
             <form className={tw('flex flex-col gap-y-4')}>
-              {contracts.map((contract) => {
+              {contracts.length > 0 ? contracts.map((contract) => {
                 const isAccepted = acceptedContracts[contract.uuid] ?? false
                 return (
                   <div key={contract.uuid} className={tw('flex flex-row gap-x-2')}>
@@ -199,7 +202,7 @@ const Payment: NextPage = () => {
                     </span>
                   </div>
                 )
-              })}
+              }) : <span className={tw('text-gray-500')}>{translation.noTermsAndConditions}</span>}
               <div className={tw('flex flex-row justify-between')}>
                 <Button
                   className={tw('flex flex-row items-center gap-x-2 w-[200px]')}
