From fcb334852786e6de59d2f13654534572bcc379ef Mon Sep 17 00:00:00 2001
From: Bennett Diaz <97626907+bennett-diaz@users.noreply.github.com>
Date: Sun, 11 Aug 2024 17:00:29 -0400
Subject: [PATCH 1/5] Add core components

---
 public/index.html                   |  72 +++++++---
 src/App.jsx                         | 125 +++++++++++++++---
 src/components/CTA.jsx              | 198 ++++++++++++++++++++++++++++
 src/components/CaptionSet.jsx       |  80 +++++++++++
 src/components/Drawer.jsx           |  76 +++++++++++
 src/components/Footer.jsx           |  86 ++++++++++++
 src/components/HeroSection.jsx      |  53 ++++++++
 src/components/ImgRender.jsx        |  21 +++
 src/components/MyAccount.jsx        | 115 ++++++++++++++++
 src/components/NavBar.jsx           |  38 ++++++
 src/components/PrivacyPolicy.jsx    |  23 ++++
 src/components/RestartFab.jsx       |  47 +++++++
 src/components/TermsOfService.jsx   |  23 ++++
 src/contexts/remoteConfigContext.js |   4 +-
 src/utils/imageUtils.js             |  64 +++++++++
 15 files changed, 985 insertions(+), 40 deletions(-)
 create mode 100644 src/components/CTA.jsx
 create mode 100644 src/components/CaptionSet.jsx
 create mode 100644 src/components/Drawer.jsx
 create mode 100644 src/components/Footer.jsx
 create mode 100644 src/components/HeroSection.jsx
 create mode 100644 src/components/ImgRender.jsx
 create mode 100644 src/components/MyAccount.jsx
 create mode 100644 src/components/NavBar.jsx
 create mode 100644 src/components/PrivacyPolicy.jsx
 create mode 100644 src/components/RestartFab.jsx
 create mode 100644 src/components/TermsOfService.jsx
 create mode 100644 src/utils/imageUtils.js
diff --git a/public/index.html b/public/index.html
index 46646fb..45f4375 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,23 +3,57 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8">
-    <meta name="theme-color" content="transparent">
-    <meta name="description" content="Generate influencer-worthy captions for your next post">
+  <meta charset="utf-8">
+  <meta name="theme-color" content="transparent">
+  <meta name="description" content="Generate influencer-worthy captions for your next post">
 
-    <!-- 'default' results in a white status bar with black text,
+  <!-- 'default' results in a white status bar with black text,
 'black' results in a black status bar with white text
 'black-translucent' results in a transparent background with white text.
 Additionally, this status bar floats above your content -->
 
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
-    <!-- TODO: add splash screens here -->
+  <!-- TODO: add splash screens here -->
+  <link rel="apple-touch-startup-image" href="images/apple-splash-2048-2732.jpg"
+    media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1668-2388.jpg"
+    media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1536-2048.jpg"
+    media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1488-2266.jpg"
+    media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1640-2360.jpg"
+    media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1668-2224.jpg"
+    media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1620-2160.jpg"
+    media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1290-2796.jpg"
+    media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1179-2556.jpg"
+    media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1284-2778.jpg"
+    media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1170-2532.jpg"
+    media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1125-2436.jpg"
+    media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1242-2688.jpg"
+    media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-828-1792.jpg"
+    media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-1242-2208.jpg"
+    media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-750-1334.jpg"
+    media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="images/apple-splash-640-1136.jpg"
+    media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
 
-    <!-- <script>
+  <!-- <script>
     (function () {
       var isDevelopment = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
       var isStaging = window.location.hostname.includes('instacap-staging');
@@ -45,17 +79,17 @@
 </head>
 
 <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
 
-    <script>
-        // if ('serviceWorker' in navigator) {
-        //   window.addEventListener('load', () => {
-        //     navigator.serviceWorker.register('/service-worker-workbox.js');
-        //   });
-        // }
+  <script>
+    // if ('serviceWorker' in navigator) {
+    //   window.addEventListener('load', () => {
+    //     navigator.serviceWorker.register('/service-worker-workbox.js');
+    //   });
+    // }
 
-    </script>
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 75c72ab..e2ac2f9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,41 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { GluestackUIProvider, Box, Button, ButtonText, Text } from '@gluestack-ui/themed';
 import { config } from "./styles/gluestack_config/gluestack-ui.config"
-import Results from './components/Results';
-import WebOverlay from './components/WebOverlay';
-import BottomBar from './components/BottomBar';
+import { useRemote, defaultTabs } from './contexts/remoteConfigContext'
+import { useAuth } from './contexts/authContext';
+import { ResultsProvider } from './contexts/resultsContext';
+import { AppContext, useLayout } from './contexts/layoutContext';
 import { perf } from './firebaseConfig'
 import { ImageProvider } from "./contexts/imageContext"
-import { useLayout } from './contexts/layoutContext';
 
+import NavBar from './components/NavBar';
+import BottomBar from './components/BottomBar';
+import HeroSection from './components/HeroSection';
+import CTA from './components/CTA';
+import WebOverlay from './components/WebOverlay';
+
+// import Results from './components/Results';
+// import CaptionSet from './components/CaptionSet';
+// import ImgRender from './components/ImgRender';
+// import Login from './components/Login';
+// import MyAccount from './components/MyAccount';
+
+import Drawer from './components/Drawer';
+import PrivacyPolicy from './components/PrivacyPolicy';
+import TermsOfService from './components/TermsOfService';
 
 
 
 function App() {
+
+    // app context
+    const { curUser } = useAuth();
+    const { remoteConfig } = useRemote();
+    const tabs = remoteConfig.tabs || defaultTabs;
+    const [activeTab, setActiveTab] = useState(tabs.HomeTab.fixed_id);
+    const [tabContent, setTabContent] = useState(tabs.HomeTab.fixed_id);
+    const [page, setPage] = useState(tabs.HomeTab.fixed_id);
+    const [selectedContent, setSelectedContent] = useState(null);
     const { isWeb, setIsWeb } = useLayout();
 
     const handleOverlayClose = () => {
@@ -19,22 +43,85 @@ function App() {
     };
 
 
-    return (
-        <GluestackUIProvider config={config}>
-            <ImageProvider>
-                <Box>
-                    {isWeb && <WebOverlay onClose={handleOverlayClose} />}
-                    <Text>Hello Instacap!</Text>
-                    <Results />
-                    <Button>
-                        <ButtonText>Hello world</ButtonText>
-                    </Button>
-                    {/* <BottomBar/> */}
+    const [currentRoute, setCurrentRoute] = useState(window.location.pathname.slice(1) || 'home');
+
+    useEffect(() => {
+        const handlePopState = () => {
+            setCurrentRoute(window.location.pathname.slice(1) || 'home');
+        };
+
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, []);
 
+    const navigateTo = (route) => {
+        window.history.pushState(null, '', `/${route}`);
+        setCurrentRoute(route);
+    };
+
+    const renderContent = () => {
+        switch (currentRoute) {
+            case 'privacy':
+                return <PrivacyPolicy />;
+            case 'terms':
+                return <TermsOfService />;
+            // case 'account':
+            //   return curUser ? <MyAccount /> : <Login />;
+            default:
+                return (
+                    <ImageProvider>
+                        <ResultsProvider>
+                            <Box flex="1" display="flex" flexDirection="column">
+                                {isWeb && <WebOverlay onClose={handleOverlayClose} />}
+
+                                {/* More Tab */}
+                                {activeTab === (tabs.MoreTab?.fixed_id) && (
+                                    <>
+                                        <Drawer />
+                                        {selectedContent && selectedContent}
+
+                                    </>
+                                )}
+
+                                {/* Home tab */}
+                                <ImageProvider>
+                                    <ResultsProvider>
+                                        {tabContent === (tabs.HomeTab?.fixed_id) && (
+                                            <>
+                                                <HeroSection />
+                                                <CTA />
+                                                {/* <Results ImgRender={ImgRender} CaptionSet={CaptionSet} /> */}
+                                            </>
+                                        )}
+                                    </ResultsProvider>
+                                </ImageProvider>
+
+                                {/* Account tab */}
+                                {/* {tabContent === (tabs.AccountTab?.fixed_id) && (
+                                    curUser ? <MyAccount /> : <Login />
+                                )} */}
+                            </Box>
+                            {/* <Banner /> */}
+                            <BottomBar />
+                            {/* <RestartFab /> */}
+                            {/* <Footer /> */}
+                        </ResultsProvider>
+                    </ImageProvider>
+                );
+        }
+    };
+
+    return (
+        <AppContext.Provider value={{ navigateTo, remoteConfig, curUser, activeTab, page, setPage, setActiveTab, tabContent, tabs, setTabContent, selectedContent, setSelectedContent }}>
+            <GluestackUIProvider config={config}>
+                <Box display="flex" flexDirection="column" minHeight="100vh">
+                    <NavBar />
+                    {renderContent()}
                 </Box>
-            </ImageProvider>
-        </GluestackUIProvider>
-    );
+            </GluestackUIProvider >
+        </AppContext.Provider>
+
+    )
 }
 
 export default App;
\ No newline at end of file
diff --git a/src/components/CTA.jsx b/src/components/CTA.jsx
new file mode 100644
index 0000000..9b672bf
--- /dev/null
+++ b/src/components/CTA.jsx
@@ -0,0 +1,198 @@
+import { useState, useRef, useEffect } from 'react';
+import { isImgFileValid, isUrlValid, reduceImage } from '../utils/imageUtils';
+import { HStack, VStack, Box, Text, Link, LinkText, Button, ButtonText, ButtonIcon, Spinner, FormControl, FormControlError, FormControlErrorIcon, FormControlErrorText, Input, InputField, AlertCircleIcon, set } from '@gluestack-ui/themed';
+import { Sparkles } from 'lucide-react'
+import { useImage } from '../contexts/imageContext';
+import { useResults } from '../contexts/resultsContext';
+
+
+
+
+
+const CTA = () => {
+    const { workflow, setWorkflow, workflowStages } = useResults();
+
+    const { urlBox, setUrlBox, isUrlBoxValid, setIsUrlBoxValid, setImgUrl, setImgForm, setImgSrc } = useImage()
+
+    const [fileError, setFileError] = useState(false);
+    const [fileErrorMsg, setFileErrorMsg] = useState('');
+    const fileInputRef = useRef(null);
+
+
+    const upButtonId = "imgUpload"
+    const genButtonId = "urlGenerate"
+    const [buttonLoading, setButtonLoading] = useState({});
+    const [buttonDisabled, setButtonDisabled] = useState({});
+
+    useEffect(() => {
+        if (workflow === workflowStages.IDLE) {
+            setButtonLoading({
+                [upButtonId]: false,
+                [genButtonId]: false
+            })
+            setButtonDisabled({
+                [upButtonId]: false,
+            })
+        } else if (workflow === (workflowStages.SUMMARIZING || workflowStages.CAPTIONING) || workflowStages.IMGRENDER) {
+            setButtonDisabled({
+                [upButtonId]: true,
+                [genButtonId]: true
+            })
+        }
+    }, [workflow])
+
+
+
+    const isButtonLoading = (buttonId) => {
+        return buttonLoading[buttonId] || false;
+    }
+
+    const onUrlUpload = (event) => {
+        if (urlBox && isUrlBoxValid) {
+
+            setWorkflow(workflowStages.SUMMARIZING);
+            setImgUrl(urlBox);
+            setImgForm(null);
+            setImgSrc(null);
+            setButtonLoading({
+                ...buttonLoading,
+                [genButtonId]: true
+            })
+        } else {
+            console.log('url was not valid; nothing triggered')
+        }
+    }
+
+    const onFileUpload = async (event) => {
+        const file = event.target.files[0];
+        setFileError(false);
+        setFileErrorMsg('');
+        setImgUrl('');
+        if (file) {
+            const validationResult = isImgFileValid(file);
+            if (validationResult.isValid) {
+                try {
+                    const reducedImageBlob = await reduceImage(file);
+                    const formData = new FormData();
+                    formData.append('image', reducedImageBlob, file.name);
+                    setImgForm(formData);
+
+                    const blobUrl = URL.createObjectURL(file);
+                    setImgSrc(blobUrl);
+
+                    setWorkflow(workflowStages.SUMMARIZING);
+                    setUrlBox('');
+                    setImgUrl('');
+                    setButtonLoading({ ...buttonLoading, [upButtonId]: true });
+
+
+                } catch (error) {
+                    console.error('Error in image reduction:', error);
+                    setFileError(true);
+                    setFileErrorMsg('Error processing image.');
+                }
+            } else {
+                setFileError(true);
+                setFileErrorMsg(validationResult.reason);
+                console.log('File validation failed:', validationResult.reason);
+            }
+            event.target.value = '';
+        }
+    };
+
+
+    const handleUploadPress = (event) => {
+        fileInputRef.current.click();
+    };
+
+    const onUrlChange = event => {
+        setUrlBox(event.target.value);
+
+        if (isUrlValid(event.target.value)) {
+            setIsUrlBoxValid(true);
+        } else {
+            setIsUrlBoxValid(false);
+        }
+    };
+
+
+    return <VStack flexGrow={1} bg="$primary50" alignItems='center' gap="0rem" >
+        <Box mx="1rem">
+            <Text fontSize="2rem" fontWeight='$semibold' lineHeight="1.2" textAlign="center" paddingTop="1rem" paddingBottom="0.5rem"
+                sx={{
+                    "@md": {
+                        fontSize: '2rem',
+                        lineHeight: '22px',
+                        paddingBottom: '1rem',
+
+
+                    }
+                }}>
+                Free caption generator
+            </Text>
+
+            <Text fontSize="1rem" textAlign="center" paddingVertical="0.5rem" paddingHorizontal="1rem"
+                sx={{ "@md": { fontSize: '1.25rem' } }}>
+                Use the power of AI to create witty captions for your next social media post
+            </Text>
+        </Box>
+
+        <HStack display='none' width="100%" gap="1rem" paddingHorizontal="1rem" paddingVertical="1rem"
+            sx={{
+                "@md": { display: 'flex' }
+            }}>
+            <FormControl flexGrow={1} isInvalid={!isUrlBoxValid && urlBox.length > 0} isDisabled={false} isRequired={false} >
+                <Input height="100%" bg="$white">
+                    <InputField type="text" value={urlBox} onChange={onUrlChange} placeholder="Image url" />
+                </Input>
+                <FormControlError>
+                    <FormControlErrorIcon as={AlertCircleIcon} />
+                    <FormControlErrorText>
+                        Please enter a valid image Url.
+                    </FormControlErrorText>
+                </FormControlError>
+            </FormControl>
+            <Button id={genButtonId} flexShrink={0} onPress={onUrlUpload} action={"primary"} variant={"solid"} isDisabled={!isUrlBoxValid || buttonDisabled[genButtonId]} isFocusVisible={false}>
+                <ButtonText>Generate</ButtonText>
+                {isButtonLoading(genButtonId) ?
+                    <Spinner color="$textLight0" ml="0.5rem" />
+                    :
+                    <ButtonIcon as={Sparkles} ml="0.5rem" size="18px" />
+                }
+            </Button>
+        </HStack>
+
+        <VStack width="100%" justifyContent='center' alignItems='center' paddingTop="0.5rem" paddingBottom="0.5rem" paddingHorizontal="1rem">
+            <FormControl isInvalid={fileError} alignItems='center' >
+                <Button id={upButtonId} flexShrink={0} onPress={handleUploadPress} isDisabled={buttonDisabled[upButtonId]}>
+                    <ButtonText>Upload your image</ButtonText>
+                    {isButtonLoading(upButtonId) ?
+                        <Spinner color="$textLight0" ml="0.5rem" />
+                        :
+                        <ButtonIcon as={Sparkles} ml="0.5rem" size="18px" />
+                    }
+                    <ButtonText> </ButtonText>
+
+                </Button>
+
+                <input type="file" accept="image/*" onChange={onFileUpload} style={{ display: 'none' }} ref={fileInputRef} />
+                <FormControlError bottom="-20px" left="0" padding="0.5rem">
+                    <FormControlErrorIcon as={AlertCircleIcon} />
+                    <FormControlErrorText  >{fileErrorMsg}</FormControlErrorText>
+                </FormControlError>
+
+            </FormControl>
+
+        </VStack>
+
+        <Text fontSize="0.85rem" color='$textLight500' thin textAlign="center" paddingHorizontal="1.5rem" paddingVertical="1rem">
+            We do not store your photos or personal data. By using this product you agree to our{' '}
+            <Link href="https://instacap.ai/privacy" isExternal="true" >
+                <LinkText fontSize="0.85rem" color="$textLight500" >privacy policy</LinkText>
+            </Link>
+            .
+        </Text>
+
+    </VStack>;
+};
+export default CTA;
\ No newline at end of file
diff --git a/src/components/CaptionSet.jsx b/src/components/CaptionSet.jsx
new file mode 100644
index 0000000..60321e5
--- /dev/null
+++ b/src/components/CaptionSet.jsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useContext, useRef } from 'react';
+import { useResults } from '../contexts/resultsContext';
+import { Box } from '@gluestack-ui/themed';
+import ToneButtons from './ToneButtons';
+import Bubble from './Bubble';
+import { handleVote } from '../utils/apiUtils'
+
+
+const CaptionSet = () => {
+    const { workflow, setWorkflow, workflowStages, captionSets } = useResults()
+
+    const latestCaptionRef = useRef(null);
+    const voteUrl = 'https://backend-instacap.onrender.com/api/image/vote';
+
+
+    // scroll to the last Bubble of the latest caption set; trigger once image has rendered
+    useEffect(() => {
+        if (workflow === workflowStages.IDLE) {
+            if (captionSets.length > 0 && latestCaptionRef.current) {
+                latestCaptionRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                // console.log('Scrolling to:', latestCaptionRef.current);
+            }
+        }
+    }, [workflow]);
+
+
+
+
+    const onVote = async (capId) => {
+        console.log('Vote pressed for caption ID: ', capId);
+        try {
+            const result = await handleVote(voteUrl, capId);
+            console.log('Vote result:', result);
+        } catch (error) {
+            console.error('Error in onVote:', error);
+        }
+    };
+
+    const hasCaptionError = (captionSet) => {
+        return captionSet.some(captionObject => {
+            const capError = Object.values(captionObject)[1];
+            return capError;
+        });
+    };
+
+
+    // Defining functions directly in JSX, like in your map call within renderCaptionsUser, can lead to performance issues since these functions are re-created on every render. Instead, define these functions outside the JSX or turn them into a component if they have JSX to return.
+    const renderCaptionsUser = () => {
+        return captionSets.map((captionGeneration, genIndex) => (
+            <React.Fragment key={genIndex}>
+                {captionGeneration.map((captionObject, captionIndex) => {
+                    const capId = Object.keys(captionObject)[0];
+                    const captionText = Object.values(captionObject)[0];
+                    const capError = Object.values(captionObject)[1];
+                    const isLastBubble = genIndex === captionSets.length - 1 && captionIndex === captionGeneration.length - 1;
+                    return <Bubble
+                        key={captionIndex}
+                        text={captionText}
+                        capId={capId}
+                        capError={capError}
+                        onVote={onVote}
+                        // attach ref to the last bubble of the latest caption set
+                        ref={isLastBubble ? latestCaptionRef : null}
+                    />
+                })}
+                {!hasCaptionError(captionGeneration) && <ToneButtons generationIndex={genIndex} />}
+            </React.Fragment>
+        ));
+    };
+
+
+    return (
+        <Box gap="1rem">
+            {renderCaptionsUser()}
+        </Box>
+    );
+};
+
+
+export default CaptionSet;
\ No newline at end of file
diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
new file mode 100644
index 0000000..7506c1b
--- /dev/null
+++ b/src/components/Drawer.jsx
@@ -0,0 +1,76 @@
+import { Box, Icon, Button, ButtonText, ButtonIcon, FlatList, HStack, VStack, Text, Actionsheet, ActionsheetContent, ActionsheetItem, ActionsheetIcon, ActionsheetItemText, ActionsheetBackdrop, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper } from '@gluestack-ui/themed';
+import { useState, useContext, useRef, useMemo, useEffect } from 'react';
+import { FileQuestion, HelpCircle, Send, Library, Code, Scale, Mailbox, Share2, Hammer, ShieldCheck, Gavel } from 'lucide-react';
+import { AppContext } from '../contexts/layoutContext';
+import Privacy from './PrivacyPolicy';
+import Terms from './TermsOfService';
+
+
+
+
+const Drawer = () => {
+
+    // Flatlist imlementation here: https://reactnative.dev/docs/flatlist
+    const [showActionsheet, setShowActionsheet] = useState(true)
+    const { devMode, setDevMode, selectedContent, setSelectedContent, setTabContent } = useContext(AppContext)
+
+
+
+    const handleClose = () => {
+        setShowActionsheet(!showActionsheet)
+        setSelectedContent(null);
+    }
+
+    const handleItemClick = (content) => {
+        handleClose();
+        setSelectedContent(content);
+        setTabContent(null);
+
+    };
+
+    useEffect(() => {
+        // console.log('selectedContent:', selectedContent)
+    }
+        , [selectedContent])
+
+
+    const CustomActionsheetItem = ({ icon, text, onPress }) => {
+        return (
+            <ActionsheetItem onPress={onPress}>
+                <HStack alignItems="center" gap="0.25rem">
+                    <ButtonIcon style={{ justifyContent: 'center', alignItems: 'center' }}>
+                        <Icon as={icon} />
+                    </ButtonIcon>
+                    <ActionsheetItemText>{text}</ActionsheetItemText>
+                </HStack>
+            </ActionsheetItem>
+        );
+    };
+
+
+    return (
+
+        <Box >
+            <Actionsheet isOpen={showActionsheet} onClose={handleClose} zIndex={"$900"}>
+                <ActionsheetBackdrop />
+                <ActionsheetContent  >
+                    <ActionsheetDragIndicatorWrapper>
+                        <ActionsheetDragIndicator />
+                    </ActionsheetDragIndicatorWrapper>
+                    <CustomActionsheetItem icon={Send} text="Contact us" onPress={() => handleItemClick(Privacy)} />
+                    <CustomActionsheetItem icon={Share2} text="Share with friends" onPress={() => handleItemClick(Privacy)} />
+                    {/* <CustomActionsheetItem icon={Hammer} text="Feature request" onPress={() => handleItemClick(Privacy)} /> */}
+                    <CustomActionsheetItem icon={ShieldCheck} text="Privacy policy" onPress={() => handleItemClick(Privacy)} />
+                    <CustomActionsheetItem icon={Scale} text="Terms of use" onPress={() => handleItemClick(Terms)} />
+                    {/* <Text fontSize="0.85rem" color='$textLight500' textAlign='left' thin paddingHorizontal="1.5rem" paddingVertical="0.5rem">
+                        2024 Step Function LLC
+                    </Text> */}
+                </ActionsheetContent>
+
+            </Actionsheet>
+        </Box>
+
+    );
+}
+
+export default Drawer;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..54af171
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,86 @@
+import { React, useState } from 'react';
+import { Box, HStack, Button, ButtonText, ButtonIcon, Text, Link, LinkText } from '@gluestack-ui/themed';
+// import { Smartphone, Bookmark } from 'lucide-react';
+
+
+const Footer = () => {
+    return (
+        <Box
+            display='none'
+            paddingHorizontal="$1rem"
+            paddingVertical="$1rem"
+            borderTopWidth='$1'
+            borderColor='$borderLight300'
+            alignItems='center'
+            justifyContent='space-between'
+            position="relative"
+            left="0"
+            right="0"
+            bottom="0"
+            bg="$backgroundLight0"
+            flexDirection='row'
+            sx={{
+                "@md": {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                }
+            }}
+        >
+
+
+            <HStack display='flex' alignItems='center' justifyContent='center'
+                sx={{
+                    "@md": {
+                        display: 'flex',
+                        justifyContent: 'center'
+
+                    }
+                }}
+            >
+                <Box >
+                    <Text paddingTop="0" fontSize="0.85rem" color="$textLight700">2024 Step Function LLC</Text>
+
+                    <HStack>
+                        <a href="https://bennett-diaz.github.io/step-function/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }} >
+                            <Text fontSize="0.85rem" color="$textLight700">Terms of Use</Text>
+                        </a>
+                        <Text paddingTop="0" fontSize="0.85rem">  ·  </Text>
+
+                        {/* <Link href="https://bennett-diaz.github.io/step-function/" isExternal="true" >
+                        <Text fontSize="0.85rem" color="$textLight700" textDecorationLine='none'>Privacy</Text>
+                    </Link>
+                    <Text paddingTop="0" fontSize="0.85rem"> | </Text> */}
+                        <a href="mailto:team@instacap.ai" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }} >
+                            <Text fontSize="0.85rem" color="$textLight700">Contact Us</Text>
+                        </a>
+                    </HStack>
+
+                </Box>
+            </HStack>
+
+
+            <Button display='none'
+                bg="$backgroundLight200" padding="0.5rem"
+                sx={{
+                    height: '100%',
+                    flexDirection: 'row',
+                    width: '110px',
+                    justifyContent: 'center',
+                }}
+            >
+                {/* <ButtonIcon as={Bookmark} color="$textLight700" paddingHorizontal="0.25rem" size="24px" /> */}
+                <ButtonText lineHeight='1.2' textAlign='center' fontSize="0.85rem" color="$textLight700" >Save app to home screen</ButtonText>
+
+            </Button>
+
+
+
+
+        </Box >
+
+    );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
new file mode 100644
index 0000000..54daf7d
--- /dev/null
+++ b/src/components/HeroSection.jsx
@@ -0,0 +1,53 @@
+import { Box } from '@gluestack-ui/themed';
+
+const HeroSection = () => {
+    const mobile640 = "/images/hero-mobile-640-stacked.jpg";
+    const mobile768 = "/images/hero-mobile-768-stacked.jpg";
+    const mobile1024 = "/images/hero-mobile-1024-stacked.jpg";
+    const mobile1366 = "/images/hero-mobile-1366-stacked.jpg";
+    const mobile1440 = "/images/hero-mobile-1440-stacked.jpg";
+    const mobile1600 = "/images/hero-mobile-1600-stacked.jpg";
+    const mobile1920 = "/images/hero-mobile-1920-stacked.jpg";
+    const web1600 = "/images/hero-web-1600-3d.jpg";
+    const web1920 = "/images/hero-web-1920-3d.jpg";
+    const a = "/images/640.jpg";
+    const b = "/images/768.jpg";
+    const c = "/images/1024.jpg";
+    const d = "/images/1366.jpg";
+    const e = "/images/1600.jpg";
+    const f = "/images/1920.jpg";
+
+    const imgStyle = {
+        maxWidth: '100%',
+        width: 'auto',
+        height: 'auto',
+    };
+
+    const boxStyle = {
+        display: 'flex',
+        justifyContent: "center",
+        maxHeight: '70vh',
+    };
+
+    return (
+        // <Box display='flex' justifyContent="center" alignItems="center" bg='$primary50'>
+        <Box style={boxStyle} bg='$primary50'>
+            <img
+                src={mobile1024} // Fallback for browsers that don't support srcset
+                srcSet={`${mobile640} 640w, ${mobile768} 768w, ${mobile1024} 1024w, ${mobile1366} 1366w, ${mobile1440} 1440w, ${mobile1600} 1600w, ${mobile1920} 1920w`} // Updated srcSet with 1440
+                sizes="(min-width: 1920px) 1920px, 
+                       (min-width: 1600px) 1600px, 
+                       (min-width: 1440px) 1440px, 
+                       (min-width: 1366px) 1366px, 
+                       (min-width: 1024px) 1024px, 
+                       (min-width: 768px) 768px, 
+                       100vw"
+                style={imgStyle}
+                alt="hero banner"
+                loading="lazy"
+            />
+        </Box>
+    );
+}
+
+export default HeroSection;
diff --git a/src/components/ImgRender.jsx b/src/components/ImgRender.jsx
new file mode 100644
index 0000000..b3db796
--- /dev/null
+++ b/src/components/ImgRender.jsx
@@ -0,0 +1,21 @@
+import { useImage } from '../contexts/imageContext';
+
+
+const ImgRender = () => {
+    const { imgBox } = useImage();
+
+    const imageStyle = {
+        maxHeight: '500px',
+        maxWidth: '100%',
+        width: 'auto',
+        height: 'auto',
+        display: 'block',
+        margin: '0 auto',
+        boxShadow: '0px 0px 20px rgba(38,38,38,0.10)',
+        borderRadius: "4px"
+    };
+
+    return (<img src={imgBox} style={imageStyle} />);
+};
+
+export default ImgRender;
\ No newline at end of file
diff --git a/src/components/MyAccount.jsx b/src/components/MyAccount.jsx
new file mode 100644
index 0000000..f3b7bd8
--- /dev/null
+++ b/src/components/MyAccount.jsx
@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { Box, Text, Button, ButtonText, ButtonIcon, VStack, HStack, Heading, Divider, Avatar, Icon } from '@gluestack-ui/themed';
+import { useLayout } from '../contexts/layoutContext';
+import { useAuth } from '../contexts/authContext';
+import LoadingModal from './LoadingModal';
+import Login from './Login';
+import { ScanFace, LogOut, UserX } from 'lucide-react';
+import { EngageCard, SupportCard } from './AccountCards';
+
+const MyAccount = () => {
+    const { curUser, handleSignOut, handleDeleteAccount } = useAuth();
+    const [showModal, setShowModal] = useState(false);
+    const [modalStatus, setModalStatus] = useState('loggingOut');
+    const { TabColorMapping } = useLayout();
+    const activeColor = TabColorMapping["Account"];
+
+    const showLoadingModal = async () => {
+        setShowModal(true);
+        await new Promise((resolve) => {
+            setTimeout(() => {
+                setTimeout(() => {
+                    setModalStatus('done');
+                    setTimeout(() => {
+                        setShowModal(false);
+                        resolve();
+                    }, 2000);
+                }, 1000);
+            }, 1000);
+        });
+    };
+
+    const handleLogout = async () => {
+        setModalStatus('loggingOut');
+        await showLoadingModal();
+        handleSignOut();
+    };
+
+    const handleDelete = async () => {
+        setModalStatus('deleting')
+        await showLoadingModal();
+        handleDeleteAccount();
+    };
+
+    const ProfileCard = ({ curUser, activeColor }) => {
+        const phoneNumber = curUser?.phoneNumber || 'Phone number hidden';
+
+        const formatDate = (timestamp) => {
+            if (!timestamp) return 'N/A';
+            const date = new Date(parseInt(timestamp));
+            const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+            const month = months[date.getMonth()];
+            const day = date.getDate();
+            const year = date.getFullYear();
+            return `${month} ${day}, ${year}`;
+        };
+
+        const userSince = formatDate(curUser?.metadata.createdAt);
+
+        return (
+            <VStack space="lg" pt='$4'>
+                <Heading>My account</Heading>
+                <HStack justifyContent="space-between" alignItems="center">
+                    <HStack space="md" alignItems="center">
+                        <Avatar bg={activeColor}>
+                            <Icon as={ScanFace} color="white" size="lg" />
+                        </Avatar>
+                        <VStack>
+
+                            <Text fontSize="1rem" fontWeight='$normal'>Linked to phone: <Text fontWeight="$semibold" color={activeColor}>{phoneNumber}</Text></Text>
+                            <Text fontSize="1rem" fontWeight='$normal'>Instacap user since: <Text fontWeight="$semibold" color={activeColor}>{userSince}</Text></Text>
+
+                        </VStack>
+                    </HStack>
+                </HStack>
+            </VStack>
+        )
+    }
+
+    const SettingsCard = ({ handleLogout, handleDelete, activeColor }) => {
+        return (
+            <VStack >
+                <Divider my='$4' />
+                <Button variant="link" action="secondary" justifyContent='start' onPress={handleLogout} borderRadius="$0" >
+                    <ButtonIcon as={LogOut} color={activeColor} mr="$3" />
+                    <ButtonText fontWeight='$normal'>Logout</ButtonText>
+                </Button>
+                <Button variant="link" action="secondary" justifyContent='start' onPress={handleDelete} borderRadius="$0">
+                    <ButtonIcon as={UserX} color={activeColor} mr="$3" />
+                    <ButtonText fontWeight='$normal'>Delete account</ButtonText>
+                </Button>
+            </VStack>
+        )
+    }
+
+    return (
+        <VStack px="$5" flex={1}>
+            {curUser ? (
+                <>
+                    <ProfileCard curUser={curUser} activeColor={activeColor} />
+                    <EngageCard activeColor={activeColor} />
+                    <SupportCard activeColor={activeColor} />
+                    <SettingsCard handleLogout={handleLogout} handleDelete={handleDelete} activeColor={activeColor} />
+                    <LoadingModal isOpen={showModal} onClose={() => setShowModal(false)} modalStatus={modalStatus} activeColor={activeColor} />
+                </>
+            ) : (
+                <>
+                    <Login activeColor={activeColor} />
+                    <LoadingModal isOpen={showModal} onClose={() => setShowModal(false)} modalStatus={modalStatus} activeColor={activeColor} />
+                </>
+            )}
+        </VStack>
+    );
+}
+
+export default MyAccount;
\ No newline at end of file
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
new file mode 100644
index 0000000..7ecba4e
--- /dev/null
+++ b/src/components/NavBar.jsx
@@ -0,0 +1,38 @@
+import React, { useContext, useEffect } from 'react';
+import { useLayout } from '../contexts/layoutContext';
+import { AppContext } from '../contexts/layoutContext';
+import { useAuth } from '../contexts/authContext'
+import { Box, HStack, Button, ButtonText, ButtonIcon, Switch, Text, Menu, Icon, MenuItem, MenuItemLabel, MenuIcon, set } from '@gluestack-ui/themed';
+
+const NavBar = () => {
+    const { isWeb } = useLayout();
+    const homeUrl = window.location.hostname === "localhost" ? `http://localhost:${window.location.port}` : "https://instacap.ai";
+
+    return (
+        <Box
+            paddingTop="1.2rem"
+            paddingBottom="1.2rem"
+            paddingHorizontal="1.2rem"
+            borderBottomWidth={isWeb ? "0" : "$1"}
+            borderColor="$borderLight300"
+            position="sticky"
+            top="0"
+            left="0"
+            right="0"
+            zIndex="999"
+            bg={isWeb ? "none" : "$backgroundLight0"}
+            softShadow={isWeb ? "0" : "1"}
+        >
+            <HStack justifyContent="space-between" alignItems="center" width="100%" sx={{ "@md": { justifyContent: 'flex-start' } }}>
+                <Box textAlign="center" flex="1" sx={{ "@md": { textAlign: 'left', width: 'auto' } }}>
+                    <a href={homeUrl}>
+                        <img id="navbar-logo" height="30rem" width="auto" src={isWeb ? "/logos/text_logo_v3_white.png" : "/logos/text_logo_v3.png"} alt="logo" />
+
+                    </a>
+                </Box>
+            </HStack>
+        </Box>
+    );
+}
+
+export default NavBar;
\ No newline at end of file
diff --git a/src/components/PrivacyPolicy.jsx b/src/components/PrivacyPolicy.jsx
new file mode 100644
index 0000000..a580f28
--- /dev/null
+++ b/src/components/PrivacyPolicy.jsx
@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { Box, Text } from '@gluestack-ui/themed';
+
+
+const Privacy = () => {
+
+    useEffect(() => {
+        document.title = "Privacy Policy";
+        // If user navigates back to main app
+        return () => {
+          document.title = "Instacap";
+        };
+      }, []);
+      
+    return (
+        <Box >
+            <Text> This is a placeholder for Privacy </Text>
+        </Box>
+    );
+}
+
+
+export default Privacy;
\ No newline at end of file
diff --git a/src/components/RestartFab.jsx b/src/components/RestartFab.jsx
new file mode 100644
index 0000000..1b50a8a
--- /dev/null
+++ b/src/components/RestartFab.jsx
@@ -0,0 +1,47 @@
+
+import { useImage } from '../contexts/imageContext';
+import { HStack, VStack, Box, Fab, FabIcon, FabLabel } from '@gluestack-ui/themed';
+import { RotateCcw } from 'lucide-react';
+
+
+
+const RestartFab = () => {
+    const { imgSrc } = useImage();
+
+    const restartStyle = {
+        // background: "linear-gradient(90deg, rgba(67,56,202,1) 0%, rgba(109,40,217,1) 22%, rgba(236,72,153,1) 92%)",
+        // padding: "1rem",
+    };
+
+    // make position dynamic to scroll
+
+    const onFab = () => {
+        console.log('fab pressed')
+    };
+
+    return (
+        imgSrc && <Fab
+            style={restartStyle}
+            // borderWidth= "$2"
+            // borderColor= "$borderLight0"
+            // size="lg"
+            placement="top right"
+            // isHovered={true}
+            // isDisabled={false}
+            // isPressed={false}
+            sx={{
+                "@md": {
+                    display: 'flex',
+                }
+            }}
+            onPress={onFab}
+        >
+
+            <FabIcon as={RotateCcw} on />
+            {/* <FabLabel fontWeight='$medium'>New image</FabLabel> */}
+        </Fab>
+    );
+}
+
+
+export default RestartFab;
diff --git a/src/components/TermsOfService.jsx b/src/components/TermsOfService.jsx
new file mode 100644
index 0000000..5f7e60f
--- /dev/null
+++ b/src/components/TermsOfService.jsx
@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { Box, Text } from '@gluestack-ui/themed';
+
+
+const TermsOfService = () => {
+
+    useEffect(() => {
+        document.title = "Terms of Service";
+        // If user navigates back to main app
+        return () => {
+          document.title = "Instacap";
+        };
+      }, []);
+
+    return (
+        <Box >
+            <Text> This is a placeholder for ToS </Text>
+        </Box>
+    );
+}
+
+
+export default TermsOfService;
\ No newline at end of file
diff --git a/src/contexts/remoteConfigContext.js b/src/contexts/remoteConfigContext.js
index 7db442b..18cec9b 100644
--- a/src/contexts/remoteConfigContext.js
+++ b/src/contexts/remoteConfigContext.js
@@ -27,7 +27,7 @@ export const RemoteConfigProvider = ({ children }) => {
                 };
                 setRemoteConfig(configValues);
                 confirmRemoteConfigDefaults();
-                // console.log('Activated last config: ', myReConfigObj._storageCache.activeConfig.tabs)
+                console.log('Activated last config: ', myReConfigObj._storageCache.activeConfig.tabs)
             } catch (error) {
                 console.error('Error activating last remote config:', error);
             }
@@ -35,7 +35,7 @@ export const RemoteConfigProvider = ({ children }) => {
         const fetchNext = async () => {
             try {
                 await fetchConfig(myReConfigObj);
-                // console.log('Fetched next config: ', myReConfigObj._storageCache.activeConfig.tabs)
+                console.log('Fetched next config: ', myReConfigObj._storageCache.activeConfig.tabs)
                 activate(myReConfigObj)
             } catch (error) {
                 console.error('Error fetching next remote config:', error);
diff --git a/src/utils/imageUtils.js b/src/utils/imageUtils.js
new file mode 100644
index 0000000..860e3a1
--- /dev/null
+++ b/src/utils/imageUtils.js
@@ -0,0 +1,64 @@
+
+
+export const isUrlValid = (url) => {
+    try {
+        new URL(url);
+        return true;
+
+    } catch (error) {
+        return false;
+    }
+};
+
+export const isImgFileValid = (file) => {
+    const acceptedImageTypes = ['image/jpeg', 'image/png', 'image/PNG', 'image/gif', 'image/bmp', 'image/svg+xml'];
+    const maxSizeInBytes = 10 * 1024 * 1024; // 10 MB
+
+    if (!file || file.size === 0) {
+        return { isValid: false, reason: 'No file selected or file is empty.' };
+    }
+
+    if (!acceptedImageTypes.includes(file.type)) {
+        return { isValid: false, reason: 'Please upload a .jpeg or .png.' };
+    }
+
+    if (file.size > maxSizeInBytes) {
+        return { isValid: false, reason: `Your image exceeds the limit of ${maxSizeInBytes / 1024 / 1024} MB.` };
+    }
+
+    return { isValid: true, reason: null };
+};
+
+export const reduceImage = (file) => {
+    return new Promise((resolve, reject) => {
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                const newWidth = 300;
+                const scaleFactor = newWidth / img.width;
+                const newHeight = img.height * scaleFactor;
+
+                canvas.width = newWidth;
+                canvas.height = newHeight;
+
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+                canvas.toBlob((blob) => {
+                    resolve(blob);
+                }, 'image/jpeg', 0.7);
+            };
+            img.onerror = reject;
+            img.src = e.target.result;
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+};
+
+export const formDataHasImage = (formData) => {
+    return formData && formData.has('image') && formData.get('image');
+};

From a874324a37a60ae5d0cc9dea88a0c8243dc94439 Mon Sep 17 00:00:00 2001
From: Bennett Diaz <97626907+bennett-diaz@users.noreply.github.com>
Date: Sun, 11 Aug 2024 19:18:56 -0400
Subject: [PATCH 2/5] Initial cloud functions

---
 .firebase/hosting.YnVpbGQ.cache | 35 ++++++++++++++++++++++++---------
 firebase.json                   | 18 ++++++++++++++++-
 functions/index.js              | 12 +++++------
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
index 2fcc69a..74f740f 100644
--- a/.firebase/hosting.YnVpbGQ.cache
+++ b/.firebase/hosting.YnVpbGQ.cache
@@ -1,9 +1,26 @@
-robots.txt,1723319421373,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-manifest.json,1723319421372,4e1d3adad9ce7e17c0d13fac197f1c27091906f4ecf3909c9f51247bff345118
-index.html,1723319425327,6b61db28bd0cc8768f3df3defedd8070a1c14e189b22f7b340bcfa31d03e38ce
-asset-manifest.json,1723319425327,79b6386041539f7abe6f33fdd665593b3f620e023a243164fc461b5dfc45dad8
-static/js/main.35e79179.js.LICENSE.txt,1723319425333,3e972863135e0286aeeff02dcf229f64266f242ca52a215efe5bb09e6d30d029
-static/js/787.2c4f160c.chunk.js,1723319425333,c99de9dfb7b6c62fc9e4be6ffcd3dd065431d089888ae88749d95f14957e6bd3
-static/js/787.2c4f160c.chunk.js.map,1723319425333,73ab8c999a9d71639017168747e9fd8ca3033f5f0d0dab911c16a277a3c2c8c2
-static/js/main.35e79179.js,1723319425333,cf6b3cb798372db93601f04d93dc1d4561e774d64824212e56c568323b5a4379
-static/js/main.35e79179.js.map,1723319425333,7a196bd6210d339953c89aaa5188ba1d0ff713773820f3d50fd137fa51de15b8
+robots.txt,1723393057071,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.json,1723393057071,1c928c06665f60c071ee66beacd385d3015b421238eb6230319dfad8f7cca6eb
+index.html,1723393066436,bb0438135ebfc727d23e2b4ad799bd68b852e2f939ec42ffa73fbe91239596f2
+asset-manifest.json,1723393066436,aa0158eb64d7ad844633e3a277b8333f257c373b6f75853983fa9005e729f231
+static/js/main.6d77bf4b.js.map,1723393066450,5dbf123673e87e09e904f973cdfcdefc1a3e95ff01e4827200118264a8efdffc
+static/js/main.6d77bf4b.js.LICENSE.txt,1723393066450,15675683fda6557fbdad3b06203aacae9d9d04b43ee51a713cff455330ea6126
+static/js/main.6d77bf4b.js,1723393066450,932a9139f72d4680370ac6ca4d12e3a62dfd63bfdf4bb9240d557a372746cfb1
+static/js/787.2c4f160c.chunk.js.map,1723393066450,73ab8c999a9d71639017168747e9fd8ca3033f5f0d0dab911c16a277a3c2c8c2
+static/js/787.2c4f160c.chunk.js,1723393066450,c99de9dfb7b6c62fc9e4be6ffcd3dd065431d089888ae88749d95f14957e6bd3
+static/css/main.f01de07c.css.map,1723393066450,07a1a5923eee10f1060a2ea90e2322828cfe709a5201af37889216c7f7f8f66b
+static/css/main.f01de07c.css,1723393066450,6d2a9b0f33a123ea68406ebb6155e321ae487682796ca594147ad7cf4f26ce96
+logos/text_logo_v3_white.png,1723393057070,5a31aa68b32afc2efa800adc03d4f3e08c860d950b3c388be5ab5c45dee52457
+logos/text_logo_v3.png,1723393057069,00c730988d20718d58a87f45d92e9bfa1209ed903b0403675eb640e64d48b9eb
+logos/instacap_logo_v2_invert.png,1723393057068,56486769310014e976f84bea2c81800c4fc211ca5014f074177c83eaa0a6b1db
+logos/instacap_logo72_v3.png,1723393057067,62e4b8616daea01db9cfecf67c24af4767e38927e22c1a6ca56752f0d50ff485
+logos/instacap_logo72_v1.png,1723393057066,fd27aa3886a16f8c35f61a502e9bd1971ba2d15a0130d325001b67ee3888262e
+images/overlay-600-900-v1.png,1723393057064,0f93feaf31f183a67a53d74dadba53f2f458182ff2dbdb2ac218c3225f5d1628
+images/overlay-400-600-v1.png,1723393057062,de52a3b18d70c46f5633938fdcee92b46fcedb61bdf1d09f8bf58bf19e3ecd11
+images/hero-web-1920-3d.jpg,1723393057060,21d92b9bfbe2e55a01762020d8db68cfbee36f6ba2aa3581abae61522377e838
+images/hero-web-1600-3d.jpg,1723393057059,d14b192303b5881c1fae3c89bf30f2d2826d005fce928daa258a4acc0e0e19de
+images/hero-mobile-768-stacked.jpg,1723393057058,373b59183198361891fd7458b54d5077cb0e615d7b0a8b3d454c0662d49e2e77
+images/hero-mobile-640-stacked.jpg,1723393057057,a4b8d775ce408233ee85a16c87251cd42b796ac18c8f146b8352f5200ec3f891
+images/hero-mobile-1920-stacked.jpg,1723393057056,1e4764bcbf6e2dee40c1b16fff9eda0caa795800e769e65b67bb4f3b2552df95
+images/hero-mobile-1600-stacked.jpg,1723393057054,3b86c44662c74a15a88f19cced44d461ff0c1365e872096df92b60507800f94b
+images/hero-mobile-1366-stacked.jpg,1723393057052,6ecc7c9298dcb3f4cd29c63573f967b148ebae23feddc0fe428648af0d9a541f
+images/hero-mobile-1024-stacked.jpg,1723393057050,55649c3cb0aad8a3a0eb81dc7fbfb95a31acc52e5b3f5ab33f63ba67ee0f6e4a
diff --git a/firebase.json b/firebase.json
index 340ed5b..410145b 100644
--- a/firebase.json
+++ b/firebase.json
@@ -12,5 +12,21 @@
         "destination": "/index.html"
       }
     ]
-  }
+  },
+  "functions": [
+    {
+      "source": "functions",
+      "codebase": "default",
+      "ignore": [
+        "node_modules",
+        ".git",
+        "firebase-debug.log",
+        "firebase-debug.*.log",
+        "*.local"
+      ],
+      "predeploy": [
+        "npm --prefix \"$RESOURCE_DIR\" run lint"
+      ]
+    }
+  ]
 }
diff --git a/functions/index.js b/functions/index.js
index 68e03a9..896eae3 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -7,13 +7,13 @@
  * See a full list of supported triggers at https://firebase.google.com/docs/functions
  */
 
-// const {onRequest} = require("firebase-functions/v2/https");
-// const logger = require("firebase-functions/logger");
+const {onRequest} = require("firebase-functions/v2/https");
+const logger = require("firebase-functions/logger");
 
 // Create and deploy your first functions
 // https://firebase.google.com/docs/functions/get-started
 
-// exports.helloWorld = onRequest((request, response) => {
-//   logger.info("Hello logs!", {structuredData: true});
-//   response.send("Hello from Firebase!");
-// });
+exports.helloWorld = onRequest((request, response) => {
+  logger.info("Hello logs! From, client", {structuredData: true});
+  response.send("Hello from Firebase! From, server");
+});

From 95e4f1b6a53b5ea32155a004688f110548046234 Mon Sep 17 00:00:00 2001
From: Bennett Diaz <97626907+bennett-diaz@users.noreply.github.com>
Date: Sun, 11 Aug 2024 20:49:46 -0400
Subject: [PATCH 3/5] Test cloud functions on deploy

---
 src/App.jsx                |  3 ++-
 src/components/Results.jsx | 13 ++++++++-----
 src/firebaseConfig.js      |  2 +-
 src/utils/geminiApi.js     | 38 ++++++++++++++++++++++++++++----------
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e2ac2f9..ffbdfa2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,7 +14,7 @@ import HeroSection from './components/HeroSection';
 import CTA from './components/CTA';
 import WebOverlay from './components/WebOverlay';
 
-// import Results from './components/Results';
+import Results from './components/Results';
 // import CaptionSet from './components/CaptionSet';
 // import ImgRender from './components/ImgRender';
 // import Login from './components/Login';
@@ -91,6 +91,7 @@ function App() {
                                                 <HeroSection />
                                                 <CTA />
                                                 {/* <Results ImgRender={ImgRender} CaptionSet={CaptionSet} /> */}
+                                                <Results/>
                                             </>
                                         )}
                                     </ResultsProvider>
diff --git a/src/components/Results.jsx b/src/components/Results.jsx
index 1b43af8..6744c07 100644
--- a/src/components/Results.jsx
+++ b/src/components/Results.jsx
@@ -1,12 +1,9 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Button, ButtonText } from '@gluestack-ui/themed';
 import { startChat, sendMessage } from '../utils/geminiTemp';
-import { testFile } from '../utils/geminiApi';
+import { testFile, callHelloWorld } from '../utils/geminiApi';
 import { useImage } from '../contexts/imageContext';
 
-
-
-
 const Results = () => {
     const [chat, setChat] = useState(null);
     const [input, setInput] = useState('');
@@ -14,7 +11,7 @@ const Results = () => {
     const [isLoading, setIsLoading] = useState(false);
 
     const { urlBox, isUrlBoxValid } = useImage()
-    
+
 
     // const fileInfo = testFile(process.env.REACT_APP_API_KEY);
     // console.log(fileInfo);
@@ -30,6 +27,8 @@ const Results = () => {
             }
         };
         initChat();
+        callHelloWorld();
+        testFile();
     }, []);
 
     const handleSend = async () => {
@@ -47,6 +46,8 @@ const Results = () => {
         }
     };
 
+
+
     return (
         <div style={{ padding: '16px' }}>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
@@ -70,6 +71,8 @@ const Results = () => {
                 >
                     {isLoading ? 'Sending...' : 'Send'}
                 </button>
+                {/* <Button onPress={callHelloWorld}>
+                </Button> */}
             </div>
         </div>
     );
diff --git a/src/firebaseConfig.js b/src/firebaseConfig.js
index 021128c..7350ddc 100644
--- a/src/firebaseConfig.js
+++ b/src/firebaseConfig.js
@@ -37,7 +37,7 @@ export const db = getFirestore(app);
 
 
 if (process.env.NODE_ENV === 'development') {
-    connectFunctionsEmulator(functions, 'localhost', 5001);
+    connectFunctionsEmulator(functions, 'localhost', 5002);
 }
 
 
diff --git a/src/utils/geminiApi.js b/src/utils/geminiApi.js
index afa0c02..7a06af9 100644
--- a/src/utils/geminiApi.js
+++ b/src/utils/geminiApi.js
@@ -13,19 +13,22 @@ import { httpsCallable } from 'firebase/functions';
 // const acceptedVideoTypes = ['video/mp4', 'video/mpeg', 'video/mov', 'video/avi', 'video/x-flv', 'video/mpg', 'video/webm', 'video/wmv', 'video/3gpp'];
 
 
-// export const testFile = async (apiKey) => {
-//     // Upload the file and specify a display name.
-//     const uploadResult = await fileManager.uploadFile("image.jpg", {
-//         mimeType: "image/jpeg",
-//         displayName: "Sample drawing",
-//     });
+export const testFile = async (apiKey) => {
+    // export const testFile = async (apiKey) => {
+    console.log('testFile was called')
+    // // Upload the file and specify a display name.
+    // const uploadResult = await fileManager.uploadFile("image.jpg", {
+    //     mimeType: "image/jpeg",
+    //     displayName: "Sample drawing",
+    // });
 
-//     // View the response.
-//     console.log(`Uploaded file ${uploadResult.file.displayName} as: ${uploadResult.file.uri}`);
-// }
+    // // View the response.
+    // console.log(`Uploaded file ${uploadResult.file.displayName} as: ${uploadResult.file.uri}`);
+}
 
 
 export const callHelloWorld = async () => {
+    console.log("entering cloud function callHelloWorld")
     try {
         const helloWorld = httpsCallable(functions, 'helloWorld');
         const result = await helloWorld();
@@ -35,4 +38,19 @@ export const callHelloWorld = async () => {
         console.error("Error calling helloWorld:", error);
         throw error;
     }
-};
\ No newline at end of file
+};
+
+
+// export const callHelloWorld = async () => {
+//     console.log("entering cloud function callHelloWorld");
+//     try {
+//       const functions = getFunctions(getApp());
+//       const helloWorld = httpsCallable(functions, 'helloWorld');
+//       const result = await helloWorld();
+//       console.log(result.data);
+//       return result.data;
+//     } catch (error) {
+//       console.error("Error calling helloWorld:", error);
+//       throw error;
+//     }
+//   };
\ No newline at end of file

From d23aa5aff184a635a2288b873cf4f1553ea8845a Mon Sep 17 00:00:00 2001
From: Bennett Diaz <97626907+bennett-diaz@users.noreply.github.com>
Date: Sun, 11 Aug 2024 23:19:29 -0500
Subject: [PATCH 4/5] Working cloud functions

---
 functions/index.js                  |  8 ++++++-
 src/components/Results.jsx          |  8 +++----
 src/contexts/remoteConfigContext.js |  2 +-
 src/firebaseConfig.js               | 26 +++++++++------------
 src/utils/geminiApi.js              | 35 +++++++++++++++++++++++------
 5 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/functions/index.js b/functions/index.js
index 896eae3..3e64a29 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -7,7 +7,7 @@
  * See a full list of supported triggers at https://firebase.google.com/docs/functions
  */
 
-const {onRequest} = require("firebase-functions/v2/https");
+const {onRequest, onCall} = require("firebase-functions/v2/https");
 const logger = require("firebase-functions/logger");
 
 // Create and deploy your first functions
@@ -17,3 +17,9 @@ exports.helloWorld = onRequest((request, response) => {
   logger.info("Hello logs! From, client", {structuredData: true});
   response.send("Hello from Firebase! From, server");
 });
+
+exports.helloWorld1 = onCall((data, context) => {
+  logger.info("Hello logs! From, client on call", {structuredData: true});
+  return {message: "Hello from Firebase! From, server on call"};
+});
+
diff --git a/src/components/Results.jsx b/src/components/Results.jsx
index 6744c07..cfac5cb 100644
--- a/src/components/Results.jsx
+++ b/src/components/Results.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Button, ButtonText } from '@gluestack-ui/themed';
 import { startChat, sendMessage } from '../utils/geminiTemp';
-import { testFile, callHelloWorld } from '../utils/geminiApi';
+import { testFile, callHelloWorld1 } from '../utils/geminiApi';
 import { useImage } from '../contexts/imageContext';
 
 const Results = () => {
@@ -27,8 +27,6 @@ const Results = () => {
             }
         };
         initChat();
-        callHelloWorld();
-        testFile();
     }, []);
 
     const handleSend = async () => {
@@ -71,8 +69,8 @@ const Results = () => {
                 >
                     {isLoading ? 'Sending...' : 'Send'}
                 </button>
-                {/* <Button onPress={callHelloWorld}>
-                </Button> */}
+                <Button onPress={callHelloWorld1}>
+                </Button>
             </div>
         </div>
     );
diff --git a/src/contexts/remoteConfigContext.js b/src/contexts/remoteConfigContext.js
index 18cec9b..f07fb58 100644
--- a/src/contexts/remoteConfigContext.js
+++ b/src/contexts/remoteConfigContext.js
@@ -12,7 +12,7 @@ export const RemoteConfigProvider = ({ children }) => {
         const activateLast = async () => {
             try {
                 await activate(myReConfigObj);
-
+                console.log("myReconfigObj: ", myReConfigObj)
                 const configValues = {
                     capModelId: getString(myReConfigObj, 'capModelId') || myReConfigObj.defaultConfig.capModelId,
                     sumModelId: getString(myReConfigObj, 'sumModelId') || myReConfigObj.defaultConfig.sumModelId,
diff --git a/src/firebaseConfig.js b/src/firebaseConfig.js
index 7350ddc..812459e 100644
--- a/src/firebaseConfig.js
+++ b/src/firebaseConfig.js
@@ -1,17 +1,11 @@
-import { initializeApp } from "firebase/app";
-import { getPerformance } from "firebase/performance";
-import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
 import "firebase/compat/auth";
 import compatApp from "firebase/compat/app";
 import { getRemoteConfig } from 'firebase/remote-config';
-import { getFirestore } from 'firebase/firestore';
-
-
-// to deploy to firebase URL, run this in the CLI:
-// firebase deploy
+import { getPerformance } from "firebase/performance";
 
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
+import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
+import { getFirestore } from 'firebase/firestore';
+// import { initializeApp } from "firebase/app";
 
 const firebaseConfig = {
     apiKey: "AIzaSyAJjD0525MWsFEBtBuk5DpSIhzkjY7eli8",
@@ -22,22 +16,24 @@ const firebaseConfig = {
     appId: "1:640160133965:web:582748980c9a1626febd04"
 };
 
-const app = initializeApp(firebaseConfig);
+// const app = initializeApp(firebaseConfig);
 compatApp.initializeApp(firebaseConfig);
 
-export const functions = getFunctions(app);
-export const perf = getPerformance(app);
+
+
+export const functions = getFunctions();
+export const perf = getPerformance();
 // export const myPerformanceObj = getPerformance();
 export const myAuthObj = compatApp.auth()
 export const myReConfigObj = getRemoteConfig();
-export const db = getFirestore(app);
+export const db = getFirestore();
 
 // export const myAuthObj = getAuth(app);
 // export const analytics = getAnalytics(app);
 
 
 if (process.env.NODE_ENV === 'development') {
-    connectFunctionsEmulator(functions, 'localhost', 5002);
+    connectFunctionsEmulator(functions, 'localhost', 5001);
 }
 
 
diff --git a/src/utils/geminiApi.js b/src/utils/geminiApi.js
index 7a06af9..563d891 100644
--- a/src/utils/geminiApi.js
+++ b/src/utils/geminiApi.js
@@ -27,16 +27,37 @@ export const testFile = async (apiKey) => {
 }
 
 
+// export const callHelloWorld = async () => {
+//     try {
+//         const helloWorld = httpsCallable(functions, 'helloWorld');
+//         const result = await helloWorld();
+//         console.log('Hello world result:', result.data);
+//     } catch (error) {
+//         console.error('Error calling helloWorld:', error);
+//     }
+// };
+
 export const callHelloWorld = async () => {
-    console.log("entering cloud function callHelloWorld")
     try {
-        const helloWorld = httpsCallable(functions, 'helloWorld');
-        const result = await helloWorld();
-        console.log(result.data);
-        return result.data;
+        const url = process.env.NODE_ENV === 'development' 
+            ? 'http://localhost:5001/instacap-gemini-firebase/us-central1/helloWorld'
+            : 'https://us-central1-instacap-gemini-firebase.cloudfunctions.net/helloWorld';
+        
+        const response = await fetch(url);
+        const result = await response.text();
+        console.log('Hello world result:', result);
+    } catch (error) {
+        console.error('Error calling helloWorld:', error);
+    }
+};
+
+export const callHelloWorld1 = async () => {
+    try {
+        const helloWorld1 = httpsCallable(functions, 'helloWorld1');
+        const result = await helloWorld1();
+        console.log('Hello world result:', result.data);
     } catch (error) {
-        console.error("Error calling helloWorld:", error);
-        throw error;
+        console.error('Error calling helloWorld1:', error);
     }
 };
 

From 72df61092b197388236b5329f5f6766cfe09594e Mon Sep 17 00:00:00 2001
From: Bennett Diaz <97626907+bennett-diaz@users.noreply.github.com>
Date: Sun, 11 Aug 2024 23:29:38 -0500
Subject: [PATCH 5/5] Improve remoteConfig logging

---
 functions/index.js                  | 9 +++++++--
 src/contexts/remoteConfigContext.js | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/functions/index.js b/functions/index.js
index 3e64a29..dab1266 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -19,7 +19,12 @@ exports.helloWorld = onRequest((request, response) => {
 });
 
 exports.helloWorld1 = onCall((data, context) => {
-  logger.info("Hello logs! From, client on call", {structuredData: true});
-  return {message: "Hello from Firebase! From, server on call"};
+  logger.info("Hello logs! From, client on call - HOT", {structuredData: true});
+  return {message: "Hello on call - HOT RELOAD"};
+});
+
+exports.fetchCap1 = onCall((data, context) => {
+  logger.info("Test data for fetch captions", {structuredData: true});
+  return {message: "test data"};
 });
 
diff --git a/src/contexts/remoteConfigContext.js b/src/contexts/remoteConfigContext.js
index f07fb58..3c3b5aa 100644
--- a/src/contexts/remoteConfigContext.js
+++ b/src/contexts/remoteConfigContext.js
@@ -27,7 +27,8 @@ export const RemoteConfigProvider = ({ children }) => {
                 };
                 setRemoteConfig(configValues);
                 confirmRemoteConfigDefaults();
-                console.log('Activated last config: ', myReConfigObj._storageCache.activeConfig.tabs)
+                const bottomTabs = JSON.parse(myReConfigObj._storageCache.activeConfig.bottomTabs);
+                console.log('Activated last config: ', bottomTabs)
             } catch (error) {
                 console.error('Error activating last remote config:', error);
             }
@@ -35,7 +36,8 @@ export const RemoteConfigProvider = ({ children }) => {
         const fetchNext = async () => {
             try {
                 await fetchConfig(myReConfigObj);
-                console.log('Fetched next config: ', myReConfigObj._storageCache.activeConfig.tabs)
+                const bottomTabs = JSON.parse(myReConfigObj._storageCache.activeConfig.bottomTabs);
+                console.log('Fetched next config: ', bottomTabs)
                 activate(myReConfigObj)
             } catch (error) {
                 console.error('Error fetching next remote config:', error);
