From 74114359240ab54582db107f38d7762efb392504 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 24 Oct 2023 18:05:02 -0300
Subject: [PATCH] fix(modals): change single quotes to double quotes for
 consistency in StoreApiKeyModal component feat(modals): add support for
 storing API key in StoreApiKeyModal component fix(pages): add missing imports
 and state hook in MarketCardComponent feat(pages): update button text and
 functionality in MarketCardComponent fix(pages): update label text in
 StorePage component fix(utils): add missing imports for GitBranchPlus and
 BookmarkPlus icons in styleUtils

---
 .../src/modals/StoreApiKeyModal/index.tsx     |  2 +-
 .../StorePage/components/market-card.tsx      | 24 +++++++++++++++++++
 src/frontend/src/pages/StorePage/index.tsx    |  2 +-
 src/frontend/src/utils/styleUtils.ts          |  4 ++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index 2d1a22be5..544e5391c 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -51,7 +51,7 @@ export default function StoreApiKeyModal({
           setSuccessData({
             title: "Success! Your API Key has been saved.",
           });
-          storeApiKey('9bxW74lS1qee3UWKMx3Vydxu5wxPqC8W');
+          storeApiKey("9bxW74lS1qee3UWKMx3Vydxu5wxPqC8W");
           setOpen(false);
         },
         (error) => {
diff --git a/src/frontend/src/pages/StorePage/components/market-card.tsx b/src/frontend/src/pages/StorePage/components/market-card.tsx
index b11389f84..25343c090 100644
--- a/src/frontend/src/pages/StorePage/components/market-card.tsx
+++ b/src/frontend/src/pages/StorePage/components/market-card.tsx
@@ -1,5 +1,8 @@
 import { Link, ToyBrick } from "lucide-react";
+import { useState } from "react";
+import IconComponent from "../../../components/genericIconComponent";
 import { Badge } from "../../../components/ui/badge";
+import { Button } from "../../../components/ui/button";
 import {
   Card,
   CardDescription,
@@ -16,6 +19,8 @@ export const MarketCardComponent = ({
   data: FlowComponent;
   onAdd: () => void;
 }) => {
+  const [added, setAdded] = useState(false);
+
   return (
     <Card className="group relative flex cursor-pointer flex-col justify-between overflow-hidden transition-all hover:shadow-md">
       <div>
@@ -86,6 +91,25 @@ export const MarketCardComponent = ({
                 Added
               </Button>
             )} */}
+            <Button
+              variant="outline"
+              size="sm"
+              className="whitespace-nowrap "
+              onClick={() => {
+                if (!added) {
+                  setAdded(true);
+                } else {
+                  //download
+                }
+                onAdd();
+              }}
+            >
+              <IconComponent
+                name={added ? "GitBranchPlus" : "BookmarkPlus"}
+                className="main-page-nav-button"
+              />
+              {added ? "Install Localy" : "Add to Account"}
+            </Button>
           </div>
         </div>
       </CardFooter>
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 5f8524980..576d01946 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -135,7 +135,7 @@ export default function StorePage(): JSX.Element {
           <div className="flex w-full flex-col gap-4 p-4">
             <div className="flex items-center justify-center gap-4">
               <div className="flex w-[13%] items-center justify-center gap-3 text-sm">
-                Installed Only <Switch />
+                Added Only <Switch />
               </div>
               <div className="relative h-12 w-[35%]">
                 <Input
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index d5f830285..23efce505 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -2,6 +2,7 @@ import {
   ArrowUpToLine,
   Bell,
   BookMarked,
+  BookmarkPlus,
   Check,
   CheckCircle2,
   ChevronDown,
@@ -32,6 +33,7 @@ import {
   FileUp,
   Fingerprint,
   Gift,
+  GitBranchPlus,
   GitFork,
   GithubIcon,
   Group,
@@ -328,4 +330,6 @@ export const nodeIconsLucide: iconsType = {
   Maximize2,
   SaveAll,
   Share2,
+  GitBranchPlus,
+  BookmarkPlus,
 };