fix: update hq tiles for socials (dongri#56)

* fix: update hq tiles for socials * yarn lint * update icons size * rename views * yarn lint
ra0x3 · Dec 27, 2023 · 62379a6 · 62379a6
1 parent f06158b
commit 62379a6
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 45 deletions.
diff --git a/www/frontend/helpar/src/components/TileGrid.tsx b/www/frontend/helpar/src/components/TileGrid.tsx
@@ -1,11 +1,23 @@
 import React from "react";
+import { LogoFacebook, LogoInstagram, LogoTwitter } from "react-ionicons";
 import { useNavigate } from "react-router-dom";
 import ReactRadixIcon from "./ReactRadixIcon";
 
+interface SocialMetadata {
+  link: Nullable<string>;
+  icon: "LogoFacebook" | "LogoInstagram" | "LogoTwitter";
+}
+
+interface SocialContent {
+  facebook: SocialMetadata;
+  instagram: SocialMetadata;
+  twitter: SocialMetadata;
+}
 interface BoxContent {
   icon: Nullable<string>;
   name: Nullable<string>;
   route: Nullable<string>;
+  social?: SocialContent;
 }
 
 interface BoxProps {
@@ -32,11 +44,49 @@ const MediumBox = (props: BoxProps): React.JSX.Element => {
     >
       <div className="w-full h-full rounded-xl p-3 bg-white/20 backdrop-blur-lg"></div>
       <div className="w-full h-full rounded-xl p-3 z-10 absolute flex flex-col justify-end">
-        <ReactRadixIcon
-          name={props.content.icon as any}
-          className="white-icon"
-        />
-        <p className="font-inter text-white mt-2">{props.content.name}</p>
+        <p></p>
+        {props.content.name === "Social" ? (
+          <div className="flex flex-row h-full gap-2">
+            <LogoFacebook
+              color="white"
+              height="28px"
+              width="28px"
+              onClick={() => {
+                if (props.content.social?.facebook.link) {
+                  window.open(props.content.social?.facebook.link, "_blank");
+                }
+              }}
+            />
+            <LogoInstagram
+              color="white"
+              height="28px"
+              width="28px"
+              onClick={() => {
+                if (props.content.social?.instagram.link) {
+                  window.open(props.content.social?.instagram.link, "_blank");
+                }
+              }}
+            />
+            <LogoTwitter
+              color="white"
+              height="28px"
+              width="28px"
+              onClick={() => {
+                if (props.content.social?.twitter.link) {
+                  window.open(props.content.social?.twitter.link, "_blank");
+                }
+              }}
+            />
+          </div>
+        ) : (
+          <>
+            <ReactRadixIcon
+              name={props.content.icon as any}
+              className="white-icon"
+            />
+            <p className="font-inter text-white mt-2">{props.content.name}</p>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/www/frontend/helpar/src/config.tsx b/www/frontend/helpar/src/config.tsx
@@ -19,7 +19,7 @@ class Config {
     this.environment = process.env.NODE_ENV as Environment;
     this.development = {
       scheme: "https",
-      host: process.env.NGROK_HOST as string,
+      host: process.env.REACT_APP_NGROK_HOST as string,
       port: null,
       path: "/api",
       brand: "soom",

diff --git a/www/frontend/helpar/src/models/brands/HQ.tsx b/www/frontend/helpar/src/models/brands/HQ.tsx
@@ -3,6 +3,7 @@ import Brand from "./Brand";
 interface THQ {
   id: string;
   brand: Brand;
+  about: string;
   metadata: Nullable<Json>;
   updated_at: Date;
   created_at: Date;
@@ -12,6 +13,7 @@ interface THQ {
 export default class HQ {
   id: string;
   brand: Brand;
+  about: string;
   metadata: Nullable<Json>;
   updated_at: Date;
   created_at: Date;
@@ -20,13 +22,15 @@ export default class HQ {
   constructor(
     id: string,
     brand: Brand,
+    about: string,
     metadata: Nullable<Json>,
     updated_at: Date,
     created_at: Date,
     deleted_at: Nullable<Date>,
   ) {
     this.id = id;
     this.brand = brand;
+    this.about = about;
     this.metadata = metadata;
     this.updated_at = updated_at;
     this.created_at = created_at;
@@ -37,6 +41,7 @@ export default class HQ {
     return new HQ(
       json.id,
       json.brand,
+      json.about,
       json.metadata,
       json.updated_at,
       json.created_at,
@@ -48,6 +53,7 @@ export default class HQ {
     return {
       id: this.id,
       brand: this.brand,
+      about: this.about,
       metadata: this.metadata,
       updated_at: this.updated_at,
       created_at: this.created_at,

diff --git a/www/frontend/helpar/src/routes/index.tsx b/www/frontend/helpar/src/routes/index.tsx
@@ -6,7 +6,7 @@ import AuthenticateView from "../views/Authenticate";
 import HQ from "../views/HQ";
 import ChatView from "../views/Chat";
 import ConfirmCode from "../views/ConfirmCode";
-import FAQsView from "../views/FAQs";
+import SupportView from "../views/Support";
 import AboutView from "../views/About";
 
 import SoomRouter from "./soom";
@@ -20,7 +20,7 @@ const AppRouter = (): React.JSX.Element => {
         <Route path="/authenticate" element={<AuthenticateView />} />
         <Route path="/hq" element={<HQ />} />
         <Route path="/chat" element={<ChatView />} />
-        <Route path="/faqs" element={<FAQsView />} />
+        <Route path="/support" element={<SupportView />} />
         <Route path="/confirm-code" element={<ConfirmCode />} />
         <Route path="/about" element={<AboutView />} />
       </Routes>

diff --git a/www/frontend/helpar/src/routes/soom.tsx b/www/frontend/helpar/src/routes/soom.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
 
-import InstallInstructions from "../views/soom/InstallInstructions";
+import GettingStarted from "../views/soom/GettingStarted";
 import Survey from "../views/soom/Survey";
 
 import WallHQ from "../views/soom/WallHQ";
@@ -21,7 +21,7 @@ import "../styles/route.css";
 const R = (): React.JSX.Element => {
   return (
     <Routes>
-      <Route path="/install-instructions" element={<InstallInstructions />} />
+      <Route path="/getting-started" element={<GettingStarted />} />
       <Route path="/wall-hq" element={<WallHQ />} />
       <Route path="/hand-hq" element={<HandHQ />} />
       <Route path="/wall-filter" element={<WallFilter />} />

diff --git a/www/frontend/helpar/src/views/HQ.tsx b/www/frontend/helpar/src/views/HQ.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { LogoFacebook, LogoInstagram, LogoTwitter } from "react-ionicons";
 import HQ from "../models/brands/HQ";
 import TileGrid from "../components/TileGrid";
 import { CardDescription, CardHeader, CardTitle } from "../components/ui/card";
@@ -80,6 +79,7 @@ const BrandHQ = (): React.JSX.Element => {
           const hqsesh = new CachedHQ(hq, cachedBrand.current.brand());
           hqsesh.save();
           setHQSession(hqsesh);
+          console.log("Successfully fetched HQ info.");
         }
         setLoading(false);
       } catch (err: any) {
@@ -152,39 +152,14 @@ const BrandHQ = (): React.JSX.Element => {
               loading={loading}
             />
             <div className="flex flex-row justify-evenly w-1/2">
-              <LogoFacebook
-                color="white"
+              <p
+                className="text-white text-sm font-inter underline"
                 onClick={() => {
-                  if (hqSession.hq().metadata.brand.social.facebook) {
-                    window.open(
-                      hqSession.hq().metadata.brand.social.facebook,
-                      "_blank",
-                    );
-                  }
+                  navigate(hqSession.hq().metadata.about);
                 }}
-              />
-              <LogoInstagram
-                color="white"
-                onClick={() => {
-                  if (hqSession.hq().metadata.brand.social.instagram) {
-                    window.open(
-                      hqSession.hq().metadata.brand.social.instagram,
-                      "_blank",
-                    );
-                  }
-                }}
-              />
-              <LogoTwitter
-                color="white"
-                onClick={() => {
-                  if (hqSession.hq().metadata.brand.social.twitter) {
-                    window.open(
-                      hqSession.hq().metadata.brand.social.twitter,
-                      "_blank",
-                    );
-                  }
-                }}
-              />
+              >
+                More about Soom
+              </p>
             </div>
           </div>
         </div>

diff --git a/www/frontend/helpar/src/views/FAQs.tsx → www/frontend/helpar/src/views/Support.tsx b/www/frontend/helpar/src/views/FAQs.tsx → www/frontend/helpar/src/views/Support.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { ChevronDown, ChevronUp, ChatbubbleOutline } from "react-ionicons";
-import { FAQTopNavigation } from "./../components/TopNavigation";
+import { FAQTopNavigation } from "../components/TopNavigation";
 import Searchbar from "../components/Searchbar";
 import { Button } from "../components/ui/button";
 import { ScrollArea } from "../components/ui/scroll-area";
@@ -48,7 +48,11 @@ const FAQItem = (props: FAQItemProps): React.JSX.Element => {
         </div>
         <div className="ml-6">{icon}</div>
       </div>
-      <div className={`flex flex-row w-full ${expanded ? "block" : "hidden"}`}>
+      <div
+        className={`flex flex-row w-full backdrop-blur-lg ${
+          expanded ? "block" : "hidden"
+        }`}
+      >
         <div
           className={`flex bg-white flex-row w-full absolute ${
             expanded ? "block rounded-br-xl rounded-bl-xl" : "hidden"

diff --git a/...ar/src/views/soom/InstallInstructions.tsx → .../helpar/src/views/soom/GettingStarted.tsx b/...ar/src/views/soom/InstallInstructions.tsx → .../helpar/src/views/soom/GettingStarted.tsx
diff --git a/www/frontend/scripts/serve.bash b/www/frontend/scripts/serve.bash
@@ -31,7 +31,7 @@ else
     [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
     [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
 
-    aws secretsmanager get-secret-value --secret-id helpar-fe1.env | jq -r '.SecretString' > .env
+    aws secretsmanager get-secret-value --secret-id helpar-fe2.env | jq -r '.SecretString' > .env
 
     nvm use 18.16.0