Replaced API-based voucher system with static configuration and added service specific discounts option (#1604)

* Adjustmens

* Tweaks

Author: fgalz

src/components/InlineVoucher/index.tsx

@@ -11,7 +11,7 @@ export default function InlineVoucher({ showProducts = true }): JSX.Element {
   const { siteConfig = {} } = useDocusaurusContext();
   const { frontMatter } = useDoc();
 
-  const { loading, voucher, found } = useContext(VoucherContext);
+  const { loading, vouchers, found, getVoucherForServices } = useContext(VoucherContext);
 
   let services = null;
   let serviceInfoList = [];
@@ -25,6 +25,9 @@ export default function InlineVoucher({ showProducts = true }): JSX.Element {
     serviceInfoList = mapList(services);
   }
 
+  // Get the appropriate voucher for the current services
+  const voucher = getVoucherForServices ? getVoucherForServices(services || []) : null;
+
   const canDisplayProducts = showProducts === true && serviceInfoList.length > 0;
 
   return (
@@ -42,7 +45,7 @@ export default function InlineVoucher({ showProducts = true }): JSX.Element {
         </div>
       ) : (
         <>
-          {found === true &&
+          {found === true && voucher &&
             <>
               <div className={styles.wiggleBg + ' wiggle-bg'} style={{
                 'height': '4.5rem',

src/theme/VoucherBox/index.tsx

@@ -8,7 +8,10 @@ import VoucherButton from '../../components/VoucherButton';
 export default function VoucherBox() {
   const { siteConfig } = useDocusaurusContext();
 
-  const { loading, voucher, found } = useContext(VoucherContext);
+  const { loading, vouchers, found, getVoucherForServices } = useContext(VoucherContext);
+  
+  // VoucherBox doesn't have specific services, so use default voucher
+  const voucher = getVoucherForServices ? getVoucherForServices([]) : null;
 
   return (
     <>
@@ -25,7 +28,7 @@ export default function VoucherBox() {
         </div>
       ) : (
         <>
-        {found === true &&
+        {found === true && voucher &&
           <div className={styles.box}>
             <div className={styles.giftContainer}>
               <div className="relative">

src/utilities/contexts/VoucherContext.js

@@ -1,20 +1,61 @@
 import { createContext, useEffect, useState } from 'react';
 
+const VOUCHERS = {
+    default: {
+        code: 'docs-50',
+        value: '50',
+        type: '%',
+    },
+    dedicated: {
+        code: 'docs-10',
+        value: '10',
+        type: '%',
+    },
+    domain: {
+        code: 'docs-10',
+        value: '10',
+        type: '%',
+    },
+};
+
+export function getVoucherForServices(vouchers, services = []) {
+    if (vouchers && vouchers.code && !vouchers.default) {
+        return vouchers;
+    }
+
+    if (vouchers && typeof vouchers === 'object') {
+        if (Array.isArray(services) && services.length > 0) {
+            for (const service of services) {
+                if (vouchers[service]) {
+                    return vouchers[service];
+                }
+            }
+        }
+        
+        if (vouchers.default) {
+            return vouchers.default;
+        }
+    }
+
+    return VOUCHERS.default;
+}
+
 export const VoucherContext = createContext({
     loading: false,
     found: false,
-    voucher: null,
+    vouchers: {},
+    getVoucherForServices: getVoucherForServices,
 });
 
 export const VoucherProvider = props => {
     const [
         loading,
         setLoading,
-    ] = useState(false);
+    ] = useState(true);
 
     const [
-        voucher,
-        setVoucher,
+        vouchers,
+        setVouchers,
     ] = useState({});
 
     const [
@@ -23,45 +64,17 @@ export const VoucherProvider = props => {
     ] = useState(null);
 
     useEffect(() => {
-        const voucherRetrieval = async () => {
-            setLoading(true);
-
-            try {
-                const voucherResponse = await fetch('https://zap-hosting.com/interface/shop/_ajax/json_getDocsCoupon.php', {
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest',
-                    },
-                });
-
-                if (!voucherResponse.ok) {
-                    throw new Error(`HTTP error! Status: ${voucherResponse.status}`);
-                }
-
-                const voucherData = await voucherResponse.json();
-
-                if (voucherData.message !== 'ok' || voucherData.result !== 'success') {
-                    throw new Error(`Successful response code with application level error: ${voucherData.message}`);
-                }
-
-                setFound(true);
-                setVoucher(voucherData.data);
-            } catch (error) {
-                console.error("Not displaying a voucher for this reason:", error); // Log the error for debugging
-                setFound(false);
-                setVoucher({});
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        voucherRetrieval();
+        setVouchers(VOUCHERS);
+        setFound(true);
+        setLoading(false);
     }, []);
 
     return (
         <VoucherContext.Provider value={{
             loading: loading,
             found: found,
-            voucher: voucher,
+            vouchers: vouchers,
+            getVoucherForServices: (services) => getVoucherForServices(vouchers, services),
         }}>
             { props.children }
         </VoucherContext.Provider>