adds new environment variables

Author: arosenkranz

.env.template

@@ -19,10 +19,15 @@ NEXT_PUBLIC_SPREE_API_HOST=http://web:4000
 NEXT_PUBLIC_SPREE_CLIENT_HOST=http://localhost:4000
 NEXT_PUBLIC_SPREE_IMAGE_HOST=http://localhost:4000
 NEXT_PUBLIC_SPREE_ALLOWED_IMAGE_DOMAIN=localhost
+# for local development (on localhost)
 NEXT_PUBLIC_ADS_PORT=7676
 NEXT_PUBLIC_DISCOUNTS_PORT=2814
 NEXT_PUBLIC_ADS_ROUTE="http://localhost"
 NEXT_PUBLIC_DISCOUNTS_ROUTE="http://localhost"
+# for labs/public use
+NEXT_PUBLIC_ADS_URL_FULL="http://localhost:7676"
+NEXT_PUBLIC_DISCOUNTS_URL_FULL="http://localhost:2814"
+
 NEXT_PUBLIC_DD_APPLICATION_ID=""
 NEXT_PUBLIC_DD_CLIENT_TOKEN=""
 NEXT_PUBLIC_DD_SITE="datadoghq.com"

services/frontend/components/common/Ad/Ad.tsx

@@ -10,7 +10,9 @@ export interface AdDataResults {
 function Ad() {
   const [data, setData] = useState<AdDataResults | null>(null)
   const [isLoading, setLoading] = useState(false)
-  const adsPath = `${process.env.NEXT_PUBLIC_ADS_ROUTE}:${process.env.NEXT_PUBLIC_ADS_PORT}`
+  const adsPath =
+    `${process.env.NEXT_PUBLIC_ADS_URL_FULL}` ||
+    `${process.env.NEXT_PUBLIC_ADS_ROUTE}:${process.env.NEXT_PUBLIC_ADS_PORT}`
   const [codeFlag, setCodeFlag] = useState<boolean>(false)
 
   const getRandomArbitrary = useCallback((min: number, max: number) => {

services/frontend/components/common/Discount/Discount.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from 'react'
 
 export interface DiscountCodeResults {
   data: string | null
@@ -7,21 +7,27 @@ export interface DiscountCodeResults {
 function Discount() {
   const [data, setData] = React.useState<DiscountCodeResults | null>(null)
   const [isLoading, setLoading] = React.useState(false)
-  const discountPath = `${process.env.NEXT_PUBLIC_DISCOUNTS_ROUTE}:${process.env.NEXT_PUBLIC_DISCOUNTS_PORT}`
+  const discountPath =
+    `${process.env.NEXT_PUBLIC_DISCOUNTS_URL_FULL}` ||
+    `${process.env.NEXT_PUBLIC_DISCOUNTS_ROUTE}:${process.env.NEXT_PUBLIC_DISCOUNTS_PORT}`
 
   function getRandomArbitrary(min: number, max: number) {
-    return Math.floor(Math.random() * (max - min) + min);
+    return Math.floor(Math.random() * (max - min) + min)
   }
 
   function fetchDiscountCode() {
     fetch(`${discountPath}/discount`)
       .then((res) => res.json())
       .then((data) => {
-        const index = getRandomArbitrary(0, data.length);
-        setData(data[index]["code"])
+        const index = getRandomArbitrary(0, data.length)
+        setData(data[index]['code'])
+      })
+      .catch((e) => {
+        console.error(e.message)
+      })
+      .finally(() => {
+        setLoading(false)
       })
-      .catch(e => { console.error(e.message) })
-      .finally(() => { setLoading(false) })
   }
 
   React.useEffect(() => {
@@ -30,16 +36,21 @@ function Discount() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-
   return (
     <div className="flex flex-row justify-center py-4 bg-primary-2 text-white">
-      {
-        isLoading ? (<span>GET FREE SHIPPING WITH DISCOUNT CODE</span>) :
-          !data ? (<span>GET FREE SHIPPING WITH DISCOUNT CODE <strong>STOREDOG</strong></span>) : (<span>GET FREE SHIPPING WITH DISCOUNT CODE &nbsp; <strong>{data}</strong></span>)
-      }
+      {isLoading ? (
+        <span>GET FREE SHIPPING WITH DISCOUNT CODE</span>
+      ) : !data ? (
+        <span>
+          GET FREE SHIPPING WITH DISCOUNT CODE <strong>STOREDOG</strong>
+        </span>
+      ) : (
+        <span>
+          GET FREE SHIPPING WITH DISCOUNT CODE &nbsp; <strong>{data}</strong>
+        </span>
+      )}
     </div>
   )
-
 }
 
-export default Discount
+export default Discount