Add campaign to discount modal

Author: wong2

src/app/components/Premium/DiscountModal.tsx

@@ -8,6 +8,43 @@ import discountBg from '~assets/discount-bg.png'
 import Button from '../Button'
 import Dialog from '../Dialog'
 
+interface DiscountDialogProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+  title: string
+  subtitle?: string
+  onConfirm: () => void
+  loading?: boolean
+}
+
+const DiscountDialog: FC<DiscountDialogProps> = (props) => {
+  const { t } = useTranslation()
+  return (
+    <Dialog title="" open={props.open} onClose={() => props.setOpen(false)} className="min-w-[600px] shadow-inner">
+      <div
+        className="flex flex-col items-center gap-1 pb-7"
+        style={{ backgroundImage: 'linear-gradient(to bottom, #AEA5DB 0%, #FFFFFF 100%)' }}
+      >
+        <div className="w-full h-[250px] relative">
+          <img src={discountBg} className="absolute w-full h-full top-0 left-0" />
+          <div className="flex flex-col items-center justify-center gap-4 h-full relative">
+            <span className="text-4xl">🎁</span>
+            <p className="font-black text-4xl text-[#303030]">{props.title}</p>
+            {!!props.subtitle && <p className="font-bold text-2xl text-[#303030]">{props.subtitle}</p>}
+          </div>
+        </div>
+        <Button
+          text={t('Get Discount')}
+          color="primary"
+          onClick={props.onConfirm}
+          isLoading={props.loading}
+          className="px-10 py-[10px]"
+        />
+      </div>
+    </Dialog>
+  )
+}
+
 const DiscountModal: FC = () => {
   const [open, setOpen] = useAtom(showDiscountModalAtom)
   const [creating, setCreating] = useState(false)
@@ -23,35 +60,26 @@ const DiscountModal: FC = () => {
     setShowPremiumModal(true)
   }, [setOpen, setShowPremiumModal])
 
+  const showPremiumModal = useCallback(() => {
+    setOpen(false)
+    setShowPremiumModal(true)
+  }, [setOpen, setShowPremiumModal])
+
   useEffect(() => {
     if (open) {
       trackEvent('show_discount_modal')
     }
   }, [open])
 
   return (
-    <Dialog title="" open={open} onClose={() => setOpen(false)} className="min-w-[600px] shadow-inner">
-      <div
-        className="flex flex-col items-center gap-1 pb-7"
-        style={{ backgroundImage: 'linear-gradient(to bottom, #AEA5DB 0%, #FFFFFF 100%)' }}
-      >
-        <div className="w-full h-[250px] relative">
-          <img src={discountBg} className="absolute w-full h-full top-0 left-0" />
-          <div className="flex flex-col items-center justify-center gap-4 h-full relative">
-            <span className="text-4xl">🎁</span>
-            <p className="font-black text-4xl text-[#303030]">{t('Special Offer: 20% OFF')}</p>
-            <p className="font-bold text-2xl text-[#303030]">{t('TODAY ONLY')}</p>
-          </div>
-        </div>
-        <Button
-          text={t('Get Discount')}
-          color="primary"
-          onClick={createDiscount}
-          isLoading={creating}
-          className="px-10 py-[10px]"
-        />
-      </div>
-    </Dialog>
+    <DiscountDialog
+      open={!!open}
+      setOpen={setOpen}
+      title={typeof open !== 'boolean' ? open.description : t('Special Offer: 20% OFF')}
+      subtitle={typeof open !== 'boolean' ? undefined : t('TODAY ONLY')}
+      onConfirm={typeof open !== 'boolean' ? showPremiumModal : createDiscount}
+      loading={creating}
+    />
   )
 }
 

src/app/components/Sidebar/index.tsx

@@ -47,9 +47,11 @@ function Sidebar() {
       if (getPremiumActivation()) {
         return
       }
-      const { show } = await api.checkDiscount({ appOpenTimes, premiumModalOpenTimes })
+      const { show, campaign } = await api.checkDiscount({ appOpenTimes, premiumModalOpenTimes })
       if (show) {
         setShowDiscountModal(true)
+      } else if (campaign) {
+        setShowDiscountModal(campaign)
       }
     })
   }, [])

src/app/state/index.ts

@@ -4,6 +4,7 @@ import { atomFamily, atomWithStorage } from 'jotai/utils'
 import { BotId, createBotInstance } from '~app/bots'
 import { FeatureId } from '~app/components/Premium/FeatureList'
 import { getDefaultThemeColor } from '~app/utils/color-scheme'
+import { Campaign } from '~services/server-api'
 import { ChatMessageModel } from '~types'
 import { uuid } from '~utils'
 
@@ -28,5 +29,5 @@ export const sidebarCollapsedAtom = atomWithStorage('sidebarCollapsed', false, u
 export const themeColorAtom = atomWithStorage('themeColor', getDefaultThemeColor())
 export const followArcThemeAtom = atomWithStorage('followArcTheme', false)
 export const sidePanelBotAtom = atomWithStorage<BotId>('sidePanelBot', 'chatgpt')
-export const showDiscountModalAtom = atom(false)
+export const showDiscountModalAtom = atom<false | true | Campaign>(false)
 export const showPremiumModalAtom = atom<false | true | FeatureId>(false)

src/services/server-api.ts

@@ -64,5 +64,5 @@ export async function fetchPurchaseInfo() {
 }
 
 export async function checkDiscount(params: { appOpenTimes: number; premiumModalOpenTimes: number }) {
-  return ofetch<{ show: boolean }>('https://chathub.gg/api/premium/discount/check', { params })
+  return ofetch<{ show: boolean; campaign?: Campaign }>('https://chathub.gg/api/premium/discount/check', { params })
 }