upgrade popup, rework restoring snapshot

BloopAI · Sep 12, 2023 · 6539ecf · 6539ecf
1 parent f1b841d
commit 6539ecf
Show file tree

Hide file tree

Showing 21 changed files with 1,954 additions and 184 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -46,6 +46,7 @@ import StatusBar from './components/StatusBar';
 import CloudFeaturePopup from './components/CloudFeaturePopup';
 import ErrorFallback from './components/ErrorFallback';
 import { PersonalQuotaContextProvider } from './context/providers/PersonalQuotaContextProvider';
+import UpgradePopup from './components/UpgradePopup';
 
 type Props = {
   deviceContextValue: DeviceContextType;
@@ -361,6 +362,7 @@ function App({ deviceContextValue }: Props) {
                 <Onboarding />
                 <StatusBar />
                 <CloudFeaturePopup />
+                <UpgradePopup />
               </PersonalQuotaContextProvider>
             </GeneralUiContextProvider>
           </TabsContext.Provider>

diff --git a/client/src/components/UpgradePopup/ConversationSvg.tsx b/client/src/components/UpgradePopup/ConversationSvg.tsx
diff --git a/client/src/components/UpgradePopup/Countdown.tsx b/client/src/components/UpgradePopup/Countdown.tsx
@@ -0,0 +1,43 @@
+import { memo, useContext, useEffect, useState } from 'react';
+import { intervalToDuration } from 'date-fns';
+import { PersonalQuotaContext } from '../../context/personalQuotaContext';
+
+type Props = {};
+
+const Countdown = ({}: Props) => {
+  const { resetAt } = useContext(PersonalQuotaContext.Values);
+  const [timer, setTimer] = useState(
+    intervalToDuration({
+      end: new Date('2023-09-12T14:58:28.035Z'),
+      start: new Date(),
+    }),
+  );
+  console.log('timer', timer);
+
+  useEffect(() => {
+    const intervalId = setInterval(
+      () =>
+        setTimer(
+          intervalToDuration({
+            end: new Date('2023-09-12T14:58:28.035Z'),
+            start: new Date(),
+          }),
+        ),
+      1000,
+    );
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [resetAt]);
+  return (
+    <span className="w-24 inline-block text-left">
+      {timer.days !== undefined
+        ? (timer.days * 24 + timer.hours!).toString().padStart(2, '0')
+        : '-'}
+      :{timer.minutes?.toString().padStart(2, '0') || '-'}:
+      {timer.seconds?.toString().padStart(2, '0') || '-'}
+    </span>
+  );
+};
+
+export default memo(Countdown);
diff --git a/client/src/components/UpgradePopup/index.tsx b/client/src/components/UpgradePopup/index.tsx
@@ -0,0 +1,82 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import ModalOrSidebar from '../ModalOrSidebar';
+import Button from '../Button';
+import { CloseSign } from '../../icons';
+import { DeviceContext } from '../../context/deviceContext';
+import { UIContext } from '../../context/uiContext';
+import { getSubscriptionLink } from '../../services/api';
+import { PersonalQuotaContext } from '../../context/personalQuotaContext';
+import Countdown from './Countdown';
+import ConversationSvg from './ConversationSvg';
+
+const UpgradePopup = () => {
+  const { t } = useTranslation();
+  const { openLink } = useContext(DeviceContext);
+  const { refetchQuota } = useContext(PersonalQuotaContext.Handlers);
+  const { isUpgradePopupOpen, setUpgradePopupOpen } = useContext(
+    UIContext.UpgradePopup,
+  );
+  const [link, setLink] = useState('');
+
+  useEffect(() => {
+    getSubscriptionLink().then((resp) => {
+      setLink(resp.url);
+    });
+  }, []);
+
+  const onClick = useCallback(() => {
+    openLink(link);
+    let intervalId = window.setInterval(() => refetchQuota(), 2000);
+    setTimeout(() => clearInterval(intervalId), 10 * 60 * 1000);
+    setUpgradePopupOpen(false);
+  }, [openLink]);
+
+  return (
+    <ModalOrSidebar
+      isSidebar={false}
+      shouldShow={isUpgradePopupOpen}
+      onClose={() => setUpgradePopupOpen(false)}
+      isModalSidebarTransition={false}
+      setIsModalSidebarTransition={() => {}}
+      shouldStretch={false}
+      fullOverlay
+      containerClassName="max-w-[34rem] max-h-[80vh]"
+    >
+      <div className="relative bg-bg-shade overflow-auto">
+        <div>
+          <ConversationSvg />
+        </div>
+        <div className="py-8 px-6 flex flex-col gap-8 items-center">
+          <div className="flex flex-col gap-3 text-center">
+            <h4 className="h4 text-label-title">
+              <Trans>Usage resets in</Trans> <Countdown />
+            </h4>
+            <p className="body-s text-label-base">
+              <Trans>
+                You&apos;ve run out of free usage for today, please wait for
+                your quota to reset or upgrade for unlimited usage
+              </Trans>
+            </p>
+          </div>
+          <Button onClick={onClick}>
+            <Trans>Upgrade</Trans>
+          </Button>
+        </div>
+        <div className="absolute top-2 right-2">
+          <Button
+            onlyIcon
+            title={t('Close')}
+            variant="tertiary"
+            size="small"
+            onClick={() => setUpgradePopupOpen(false)}
+          >
+            <CloseSign />
+          </Button>
+        </div>
+      </div>
+    </ModalOrSidebar>
+  );
+};
+
+export default UpgradePopup;
diff --git a/client/src/context/personalQuotaContext.ts b/client/src/context/personalQuotaContext.ts
@@ -8,6 +8,7 @@ type ContextType = {
   };
   isSubscribed: boolean;
   hasCheckedQuota: boolean;
+  resetAt: string;
 };
 
 export const PersonalQuotaContext = {
@@ -19,6 +20,7 @@ export const PersonalQuotaContext = {
     },
     isSubscribed: false,
     hasCheckedQuota: false,
+    resetAt: new Date().toISOString(),
   }),
   Handlers: createContext({
     refetchQuota: () => {},

diff --git a/client/src/context/providers/GeneralUiContextProvider.tsx b/client/src/context/providers/GeneralUiContextProvider.tsx
@@ -38,6 +38,7 @@ export const GeneralUiContextProvider = memo(
     );
     const [isPromptGuideOpen, setPromptGuideOpen] = useState(false);
     const [isCloudFeaturePopupOpen, setCloudFeaturePopupOpen] = useState(false);
+    const [isUpgradePopupOpen, setUpgradePopupOpen] = useState(false);
     const [theme, setTheme] = useState<Theme>(
       (getPlainFromStorage(THEME) as 'system' | null) || 'system',
     );
@@ -117,6 +118,14 @@ export const GeneralUiContextProvider = memo(
       [isCloudFeaturePopupOpen],
     );
 
+    const upgradePopupContextValue = useMemo(
+      () => ({
+        isUpgradePopupOpen,
+        setUpgradePopupOpen,
+      }),
+      [isUpgradePopupOpen],
+    );
+
     return (
       <UIContext.Settings.Provider value={settingsContextValue}>
         <UIContext.Onboarding.Provider value={onboardingContextValue}>
@@ -127,7 +136,11 @@ export const GeneralUiContextProvider = memo(
                   <UIContext.CloudFeaturePopup.Provider
                     value={cloudFeatureContextValue}
                   >
-                    {children}
+                    <UIContext.UpgradePopup.Provider
+                      value={upgradePopupContextValue}
+                    >
+                      {children}
+                    </UIContext.UpgradePopup.Provider>
                   </UIContext.CloudFeaturePopup.Provider>
                 </UIContext.PromptGuide.Provider>
               </UIContext.Theme.Provider>

diff --git a/client/src/context/providers/PersonalQuotaContextProvider.tsx b/client/src/context/providers/PersonalQuotaContextProvider.tsx
@@ -17,6 +17,7 @@ export const PersonalQuotaContextProvider = memo(
     const [requestsLeft, setRequestsLeft] = useState(10);
     const [isSubscribed, setIsSubscribed] = useState(false);
     const [hasCheckedQuota, setHasCheckedQuota] = useState(false);
+    const [resetAt, setResetAt] = useState(new Date().toISOString());
 
     const refetchQuota = useCallback(() => {
       getQuota().then((resp) => {
@@ -30,6 +31,7 @@ export const PersonalQuotaContextProvider = memo(
         });
         setRequestsLeft(Math.max(resp.allowed - resp.used, 0));
         setHasCheckedQuota(true);
+        setResetAt(resp.reset_at);
       });
     }, []);
 
@@ -47,8 +49,9 @@ export const PersonalQuotaContextProvider = memo(
         quota,
         isSubscribed,
         hasCheckedQuota,
+        resetAt,
       }),
-      [requestsLeft, isSubscribed, hasCheckedQuota, quota],
+      [requestsLeft, isSubscribed, hasCheckedQuota, quota, resetAt],
     );
 
     const handlersContextValue = useMemo(

diff --git a/client/src/context/uiContext.ts b/client/src/context/uiContext.ts
@@ -47,6 +47,10 @@ export const UIContext = {
     isCloudFeaturePopupOpen: false,
     setCloudFeaturePopupOpen: (b: boolean) => {},
   }),
+  UpgradePopup: createContext({
+    isUpgradePopupOpen: false,
+    setUpgradePopupOpen: (b: boolean) => {},
+  }),
   Tab: createContext<{ tab: RepoTabType }>({
     tab: {
       key: 'initial',

diff --git a/client/src/index.css b/client/src/index.css
@@ -104,18 +104,18 @@
     --default-dark-bg-shade: 41, 41, 47; /* #29292F */
     --default-dark-bg-sub: 26, 26, 31; /* #1A1A1F */
     --default-dark-bg-border: 48, 48, 55;
-    --default-dark-bg-border-hover: 68, 68, 81;
+    --default-dark-bg-border-hover: 68, 68, 81; /* #444451 */
     --default-dark-bg-main: 91, 110, 221;
     --default-dark-bg-main-hover: 114, 133, 238;
-    --default-dark-bg-danger: 199, 54, 62;
+    --default-dark-bg-danger: 199, 54, 62; /* #C7363E */
     --default-dark-bg-danger-hover: 215, 66, 74;
     --default-dark-bg-success: 21, 128, 61;
     --default-dark-bg-success-hover: 33, 197, 94;
     --default-dark-label-control: 255, 255, 255;
     --default-dark-label-faint: 57, 57, 57;
     --default-dark-label-muted: 85, 85, 85;
     --default-dark-label-base: 185, 185, 185; /* #B9B9B9 */
-    --default-dark-label-title: 238, 238, 238;
+    --default-dark-label-title: 238, 238, 238; /* #EEEEEE */
     --default-dark-label-link: 104, 141, 222;
     --default-dark-chat-bg-base: 37, 38, 56;
     --default-dark-chat-bg-base-hover: 43, 44, 66; /* #2B2C42 */

diff --git a/client/src/locales/en.json b/client/src/locales/en.json
@@ -353,5 +353,7 @@
 	"uses left_other": "uses left",
 	"Upgrade": "Upgrade",
 	"Your quota resets every 24 hours, upgrade for unlimited uses": "Your quota resets every 24 hours, upgrade for unlimited uses",
-	"Manage subscription": "Manage subscription"
-}
+	"Manage subscription": "Manage subscription",
+	"Usage resets in": "Usage resets in",
+	"You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage": "You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage"
+}
diff --git a/client/src/locales/es.json b/client/src/locales/es.json
@@ -354,5 +354,6 @@
 	"uses left_other": "usos restante",
 	"Upgrade": "Actualizar",
 	"Your quota resets every 24 hours, upgrade for unlimited uses": "Tu cuota se restablece cada 24 horas, actualiza para solicitudes ilimitadas",
-	"Manage subscription": "Administrar suscripción"
-}
+	"Manage subscription": "Administrar suscripción",
+	"Usage resets in": "Restablecimiento de uso en"
+}
diff --git a/client/src/locales/ja.json b/client/src/locales/ja.json
@@ -351,5 +351,6 @@
 	"uses left_other": "回数",
 	"Upgrade": "アップグレード",
 	"Your quota resets every 24 hours, upgrade for unlimited uses": "あなたのクオータは24時間ごとにリセットされます、無制限のリクエストにアップグレードしてください",
-	"Manage subscription": "サブスクリプションを管理します"
-}
+	"Manage subscription": "サブスクリプションを管理します",
+	"You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage": "今日は無料の使用法がなくなっています。クォータがリセットまたはアップグレードされるのを待ってください。"
+}
diff --git a/client/src/locales/zh-CN.json b/client/src/locales/zh-CN.json
@@ -360,5 +360,6 @@
 	"uses left_other": "使用左侧",
 	"Upgrade": "升级",
 	"Your quota resets every 24 hours, upgrade for unlimited uses": "您的配额每24小时重置一次，升级以获得无限请求",
-	"Manage subscription": "管理订阅"
-}
+	"Manage subscription": "管理订阅",
+	"You've run out of free usage for today, please wait for your quota to reset or upgrade for unlimited usage": "您今天的免费使用时间用完了，请等待您的配额重置或升级无限制"
+}
diff --git a/client/src/pages/StudioTab/Content.tsx b/client/src/pages/StudioTab/Content.tsx
@@ -199,13 +199,29 @@ const ContentContainer = ({
   const handlePreview = useCallback(
     (state?: HistoryConversationTurn, closeHistory?: boolean) => {
       setPreviewingState(state || null);
+      if (state) {
+        setRightPanel({ type: StudioRightPanelType.CONVERSATION, data: null });
+        setLeftPanel({ type: StudioLeftPanelType.CONTEXT, data: null });
+      }
       if (closeHistory) {
         setIsHistoryOpen(false);
       }
     },
     [],
   );
 
+  const handleRestore = useCallback(() => {
+    if (previewingState) {
+      patchCodeStudio(tab.key, {
+        context: previewingState?.context,
+        messages: previewingState?.messages,
+      }).then(() => {
+        refetchCodeStudio();
+        handlePreview(undefined, true);
+      });
+    }
+  }, [tab.key, refetchCodeStudio, previewingState]);
+
   useEffect(() => {
     if (!isHistoryOpen) {
       setPreviewingState(null);
@@ -235,7 +251,6 @@ const ContentContainer = ({
             <HistoryPanel
               setIsHistoryOpen={setIsHistoryOpen}
               studioId={tab.key}
-              refetchCodeStudio={refetchCodeStudio}
               handlePreview={handlePreview}
             />
           )}
@@ -259,6 +274,7 @@ const ContentContainer = ({
                   onFileRemove={onFileRemove}
                   onFileHide={onFileHide}
                   onFileAdded={onFileAdded}
+                  isPreviewing={!!previewingState}
                 />
               ) : leftPanel.type === StudioLeftPanelType.TEMPLATES ? (
                 <TemplatesPanel setLeftPanel={setLeftPanel} />
@@ -288,6 +304,8 @@ const ContentContainer = ({
                   refetchCodeStudio={refetchCodeStudio}
                   tokensTotal={stateToShow.token_counts?.total}
                   setIsHistoryOpen={setIsHistoryOpen}
+                  isPreviewing={!!previewingState}
+                  handleRestore={handleRestore}
                 />
               ) : rightPanel.type === StudioRightPanelType.FILE ? (
                 <FilePanel