From 5fbd71d5dcdf2445722adf2849a86adee2517195 Mon Sep 17 00:00:00 2001
From: Neville Samuell <neville@ethyca.com>
Date: Wed, 31 May 2023 11:26:06 -0400
Subject: [PATCH] Fix the sample app privacy center link to be configurable
 (#3409)

---
 CHANGELOG.md                                             | 1 +
 clients/sample-app/src/components/Home/index.tsx         | 5 +++--
 clients/sample-app/src/components/Home/style.module.scss | 1 +
 clients/sample-app/src/pages/index.tsx                   | 2 +-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d82c119e2c6..6b5a135987e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ The types of changes are:
 
 - Fix sample app `DATABASE_*` ENV vars for backwards compatibility [#3406](https://github.com/ethyca/fides/pull/3406)
 - Fix overlay rendering issue by finding/creating a dedicated parent element for Preact [#3397](https://github.com/ethyca/fides/pull/3397)
+- Fix the sample app privacy center link to be configurable [#3409](https://github.com/ethyca/fides/pull/3409)
 
 ### Changed
 
diff --git a/clients/sample-app/src/components/Home/index.tsx b/clients/sample-app/src/components/Home/index.tsx
index 07bd57954cb..ebf5495dd0c 100644
--- a/clients/sample-app/src/components/Home/index.tsx
+++ b/clients/sample-app/src/components/Home/index.tsx
@@ -8,10 +8,11 @@ import PurchaseModal from "../PurchaseModal";
 import css from "./style.module.scss";
 
 interface Props {
+  privacyCenterUrl: string;
   products: Product[];
 }
 
-const Home = ({ products }: Props) => {
+const Home = ({ privacyCenterUrl, products }: Props) => {
   const [productInPurchase, setProductInPurchase] = useState<Product | null>(
     null
   );
@@ -62,7 +63,7 @@ const Home = ({ products }: Props) => {
       </main>
       <footer className={css.footer}>
         <div>
-          <a href="http://localhost:3001">
+          <a href={privacyCenterUrl}>
             Do not sell or share my personal information
           </a>
         </div>
diff --git a/clients/sample-app/src/components/Home/style.module.scss b/clients/sample-app/src/components/Home/style.module.scss
index 09ac7e90f92..b1d9571b754 100644
--- a/clients/sample-app/src/components/Home/style.module.scss
+++ b/clients/sample-app/src/components/Home/style.module.scss
@@ -72,6 +72,7 @@
   padding-top: 2em;
   padding-bottom: 2em;
 
+  a,
   a:visited,
   a:hover {
     color: #5b301d;
diff --git a/clients/sample-app/src/pages/index.tsx b/clients/sample-app/src/pages/index.tsx
index 34dac2f095a..438b4a4dca3 100644
--- a/clients/sample-app/src/pages/index.tsx
+++ b/clients/sample-app/src/pages/index.tsx
@@ -87,7 +87,7 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl, products }: Props) => {
           }
         `}
       </Script>
-      <Home products={products} />
+      <Home privacyCenterUrl={privacyCenterUrl} products={products} />
     </>
   );
 };