Fix the sample app privacy center link to be configurable (#3409)

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
 

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>

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;

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} />
     </>
   );
 };