Merge branch 'issue/1206-Customer-API-Intgration' into issue/1206-Customer-API-Intgration-side

Author: felixevers

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>
   )

customer/pages/products/overview.tsx

@@ -22,13 +22,23 @@ 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 { defaultLocaleFormatters } from '@/utils/locale'
+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,
@@ -45,6 +55,8 @@ type CartOverviewTranslation = {
   redeemVoucherFor: (name: string) => string,
   code: string,
   invalidCode: string,
+  referral: string,
+  referralError: string,
 } & ProductPlanTranslation
 
 const defaultCartOverviewTranslations: Record<Languages, CartOverviewTranslation> = {
@@ -64,6 +76,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,
@@ -81,32 +95,104 @@ 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
   })))
 
   const localeTranslation = useTranslation(defaultLocaleFormatters)
+  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}

customer/pages/products/pay.tsx

@@ -40,6 +40,7 @@ type ProductsTranslation = {
   bookingFailure: string,
   bookingFailureDesc: string,
   toInvoices: string,
+  noTermsAndConditions: string,
 } & ProductPlanTypeTranslation
 
 const defaultProductsTranslations: Record<Languages, ProductsTranslation> = {
@@ -59,6 +60,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,
@@ -76,6 +78,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',
   }
 }
 
@@ -171,7 +174,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')}>
@@ -201,7 +204,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]')}