Add monthly basic plan subscription

.env.local.example

@@ -12,6 +12,7 @@ STRIPE_WEBHOOK_SECRET=KEY
 # STRIPE PRODUCT PAYMENT LINK METADATA plan_code
 STRIPE_PLAN_CODE_ONE_TIME_PRO_PLAN_FOR_1_MONTH=KEY
 STRIPE_PLAN_CODE_MONTHLY_PRO_PLAN_SUBSCRIPTION=KEY
+STRIPE_PLAN_CODE_MONTHLY_BASIC_PLAN_SUBSCRIPTION=KEY
 STRIPE_PLAN_CODE_IMAGE_CREDIT=KEY
 STRIPE_PLAN_CODE_GPT4_CREDIT=KEY
 

components/Chat/CreditCounter.tsx

@@ -2,6 +2,8 @@ import React, { useContext } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { PlanLevel } from '@/utils/app/planLevel';
+
 import { PluginID } from '@/types/plugin';
 
 import HomeContext from '@/pages/api/home/home.context';
@@ -14,18 +16,19 @@ export const CreditCounter: React.FC<Props> = ({ pluginId }) => {
   const { t } = useTranslation('chat');
 
   const {
-    state: { creditUsage, isUltraUser },
+    state: { creditUsage, subscriptionPlan },
     dispatch: homeDispatch,
   } = useContext(HomeContext);
 
   if (
     creditUsage === null ||
     (pluginId !== PluginID.GPT4 && pluginId !== PluginID.IMAGE_GEN) ||
-    isUltraUser
+    subscriptionPlan.planLevel === PlanLevel.Ultra
   )
     return <></>;
 
-  const remainingCredits = pluginId && creditUsage[pluginId].remainingCredits || 0;
+  const remainingCredits =
+    (pluginId && creditUsage[pluginId].remainingCredits) || 0;
 
   return (
     <div

components/Chat/SpeechButton.tsx

@@ -24,7 +24,14 @@ export const SpeechButton: React.FC<Props> = ({ inputText }) => {
   const { logGeneralEvent } = useLogger();
 
   const {
-    state: { currentSpeechId, isLoading, isPlaying, user, messageIsStreaming, isPaidUser },
+    state: {
+      currentSpeechId,
+      isLoading,
+      isPlaying,
+      user,
+      messageIsStreaming,
+      subscriptionPlan,
+    },
     playMessage,
     stopPlaying,
   } = useContext(HomeContext);
@@ -50,7 +57,7 @@ export const SpeechButton: React.FC<Props> = ({ inputText }) => {
   const getPlayerIcon = () => {
     if (isComponentCurrentlyBeingPlayed) {
       if (isLoading) {
-        return <IconLoader fill="none" size={18} className='animate-spin' />;
+        return <IconLoader fill="none" size={18} className="animate-spin" />;
       } else if (isPlaying) {
         return (
           <IconPlayerStop onClick={playStopOnClick} fill="none" size={18} />
@@ -64,7 +71,7 @@ export const SpeechButton: React.FC<Props> = ({ inputText }) => {
   };
 
   // Only enable for paying users
-  if (!isPaidUser || messageIsStreaming) return <></>;
+  if (!subscriptionPlan.canUseSpeechBtn() || messageIsStreaming) return <></>;
 
   return (
     <div className={`cursor-pointer text-gray-500 hover:text-gray-300`}>

components/Chat/components/TokenCounter.tsx

@@ -42,7 +42,7 @@ function TokenCounter({
   const debouncedValue = useDebounce<string>(value, 500);
 
   const {
-    state: { currentMessage, isPaidUser },
+    state: { currentMessage, subscriptionPlan },
   } = useContext(HomeContext);
 
   const modelMaxTokenLength = useMemo(() => {
@@ -54,12 +54,12 @@ function TokenCounter({
         );
       default:
         // Only enable 16k model for pro users
-        const defaultModel = isPaidUser
+        const defaultModel = subscriptionPlan.canUseGPT3_5_16KModel()
           ? OpenAIModels[OpenAIModelID.GPT_3_5_16K]
           : OpenAIModels[OpenAIModelID.GPT_3_5];
         return defaultModel.tokenLimit - defaultModel.completionTokenLimit;
     }
-  }, [currentMessage?.pluginId, isPaidUser]);
+  }, [currentMessage?.pluginId, subscriptionPlan]);
 
   const maxToken = useMemo(() => {
     return modelMaxTokenLength - promptTokensLength;

components/ConversationStarter/NewConversationMessagesContainer.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next';
 import { event } from 'nextjs-google-analytics';
 
 import { trackEvent } from '@/utils/app/eventTracking';
+import { PlanLevel } from '@/utils/app/planLevel';
 import { FeatureItem, PlanDetail } from '@/utils/app/ui';
 
 import HomeContext from '@/pages/api/home/home.context';
@@ -22,7 +23,7 @@ export const NewConversationMessagesContainer: FC<Props> = ({
   const { t } = useTranslation('chat');
   const { t: modelTranslate } = useTranslation('model');
   const {
-    state: { user, isUltraUser },
+    state: { user, subscriptionPlan },
     dispatch,
   } = useContext(HomeContext);
 
@@ -77,12 +78,12 @@ export const NewConversationMessagesContainer: FC<Props> = ({
         target="_blank"
         rel="noopener noreferrer"
         className={`font-semibold font-serif underline select-none ${
-          isUltraUser
+          subscriptionPlan.planLevel === PlanLevel.Ultra
             ? 'bg-gradient-to-r text-white from-[#fd68a6] to-[#6c62f7] rounded bg-gray-700 mr-0 pr-[3px] pb-[3px] dark:from-[#fd68a6] dark:to-[#6c62f7] dark:text-[#343541]'
             : ''
         }`}
         style={
-          isUltraUser
+          subscriptionPlan.planLevel === PlanLevel.Ultra
             ? {
                 WebkitBackgroundClip: 'text',
                 WebkitTextStrokeWidth: '3px',
@@ -92,7 +93,8 @@ export const NewConversationMessagesContainer: FC<Props> = ({
             : {}
         }
       >
-        Chat Everywhere {isUltraUser ? 'Ultra' : ''}
+        Chat Everywhere{' '}
+        {subscriptionPlan.planLevel === PlanLevel.Ultra ? 'Ultra' : ''}
       </a>
 
       {/* Ask for support banner */}

components/EnhancedMenu/ModeSelector.tsx

@@ -11,7 +11,7 @@ const ModeSelector = () => {
   const { t } = useTranslation('model');
 
   const {
-    state: { currentMessage, isPaidUser, hasMqttConnection },
+    state: { currentMessage, subscriptionPlan, hasMqttConnection },
     dispatch: homeDispatch,
   } = useContext(HomeContext);
 
@@ -44,7 +44,10 @@ const ModeSelector = () => {
           placeholder={t('Select a lang') || ''}
           value={currentSelectedPluginId}
           onChange={(e) => {
-            if (e.target.value === PluginID.LANGCHAIN_CHAT && !isPaidUser) {
+            if (
+              e.target.value === PluginID.LANGCHAIN_CHAT &&
+              !subscriptionPlan.canUseOnlineMode()
+            ) {
               alert(
                 t(
                   'Sorry online mode is only for Pro user, please sign up and purchase Pro plan to use this feature.',
@@ -69,29 +72,31 @@ const ModeSelector = () => {
           >
             {t('Online mode')}
           </option>
-          {isPaidUser && (
-            <>
-              <option
-                value={PluginID.GPT4}
-                className="dark:bg-[#343541] dark:text-white text-yellow-600"
-              >
-                {t('GPT-4')}
-              </option>
-              <option
-                value={PluginID.IMAGE_GEN}
-                className="dark:bg-[#343541] dark:text-white text-yellow-600"
-              >
-                {t('AI Image')}
-              </option>
-              {hasMqttConnection && (
-                <option
-                  value={PluginID.mqtt}
-                  className="dark:bg-[#343541] dark:text-white text-yellow-600"
-                >
-                  {t('MQTT')}
-                </option>
-              )}
-            </>
+          {subscriptionPlan.canUseGPT4_Model() && (
+            <option
+              value={PluginID.GPT4}
+              className="dark:bg-[#343541] dark:text-white text-yellow-600"
+            >
+              {t('GPT-4')}
+            </option>
+          )}
+          {subscriptionPlan.canUseAiImage() && (
+            <option
+              value={PluginID.IMAGE_GEN}
+              disabled
+              className="dark:bg-[#343541] dark:text-white text-yellow-600"
+            >
+              {t('AI Image')}
+            </option>
+          )}
+
+          {subscriptionPlan.canUseMQTT() && hasMqttConnection && (
+            <option
+              value={PluginID.mqtt}
+              className="dark:bg-[#343541] dark:text-white text-yellow-600"
+            >
+              {t('MQTT')}
+            </option>
           )}
         </select>
       </div>

components/Sidebar/components/CloudSyncComponent.tsx

@@ -12,15 +12,15 @@ const CloudSyncComponent = () => {
   const {
     state: {
       user,
-      isPaidUser,
+      subscriptionPlan,
       syncingConversation,
       syncSuccess,
       conversationLastSyncAt,
     },
     dispatch: dispatch,
   } = useContext(HomeContext);
 
-  const isCloudSyncEnabled = user && isPaidUser;
+  const isCloudSyncEnabled = user && subscriptionPlan.canUseCloudSync();
 
   const CloudSyncStatusComponent = () => {
     if (syncingConversation) {

components/User/ReferralCodeEnter.tsx

@@ -4,6 +4,7 @@ import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 
+import SubscriptionPlan from '@/utils/app/SubscriptionPlan';
 import { trackEvent } from '@/utils/app/eventTracking';
 import { userProfileQuery } from '@/utils/server/supabase';
 
@@ -33,7 +34,7 @@ export const ReferralCodeEnter = () => {
   } = useQuery<{ profile: UserProfile }, Error>(
     'redeemReferralCode',
     async () => {
-      if(user === null) throw new Error('User is not logged in');
+      if (user === null) throw new Error('User is not logged in');
 
       const response = await fetch('/api/referral/redeem-code', {
         method: 'POST',
@@ -81,8 +82,8 @@ export const ReferralCodeEnter = () => {
         });
 
         dispatch({
-          field: 'isPaidUser',
-          value: true,
+          field: 'subscriptionPlan',
+          value: new SubscriptionPlan(profile.plan),
         });
 
         toast.success(t('Referral code has been redeemed'));

components/User/Settings/LineConnectionButton.tsx

@@ -2,15 +2,16 @@ import { useSession } from '@supabase/auth-helpers-react';
 import React, { useContext, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
-import { getHomeUrl } from '@/utils/app/api';
 
 import Image from 'next/image';
 
+import { getHomeUrl } from '@/utils/app/api';
+
 import HomeContext from '@/pages/api/home/home.context';
 
 export const LineConnectionButton = () => {
   const {
-    state: { user, isPaidUser, isConnectedWithLine },
+    state: { user, subscriptionPlan, isConnectedWithLine },
     dispatch,
   } = useContext(HomeContext);
   const { t } = useTranslation('model');
@@ -73,10 +74,10 @@ export const LineConnectionButton = () => {
       ) : (
         <button
           className={`border border-neutral-600 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-md text-sm dark:text-gray-100 dark:hover:bg-transparent ${
-            !user || (!isPaidUser && '!text-gray-400')
+            !user || (!subscriptionPlan.canUseLineConnect() && '!text-gray-400')
           }`}
           onClick={lineConnectOnClick}
-          disabled={!user || !isPaidUser}
+          disabled={!user || !subscriptionPlan.canUseLineConnect()}
         >
           {t('Connect with LINE')}
         </button>

components/User/Settings/SettingsModel.tsx

@@ -9,8 +9,8 @@ import HomeContext from '@/pages/api/home/home.context';
 import Settings_Account from './Settings_Account';
 import Settings_App from './Settings_App';
 import Settings_Data from './Settings_Data';
-import Sidebar from './Sidebar';
 import Settings_MQTT from './Settings_MQTT';
+import Sidebar from './Sidebar';
 
 type Props = {
   onClose: () => void;
@@ -35,7 +35,7 @@ export default function SettingsModel({ onClose }: Props) {
     state: { showing },
   } = settingsContext;
   const {
-    state: { user, isPaidUser },
+    state: { user, subscriptionPlan },
   } = useContext(HomeContext);
 
   return (
@@ -70,7 +70,7 @@ export default function SettingsModel({ onClose }: Props) {
                 <Dialog.Panel className="w-full max-w-[70vw] xl:max-w-3xl tablet:max-w-[90vw] h-[calc(80vh-100px)] transform overflow-hidden rounded-2xl text-left align-middle shadow-xl transition-all bg-neutral-800 text-neutral-200 flex mobile:h-[100dvh] max-h-[750px] tablet:max-h-[unset] mobile:!max-w-[unset] mobile:!rounded-none">
                   <Sidebar
                     className="bg-neutral-800 flex-shrink-0 flex-grow-0"
-                    disableFooterItems={!user || !isPaidUser}
+                    disableFooterItems={!user || !subscriptionPlan.isPaidUser()}
                   />
                   <div className="p-6 bg-neutral-900 flex-grow relative overflow-y-auto">
                     {showing === 'account' && <Settings_Account />}