feat: add upgrade ga test (#1690)

web/app/components/billing/plan/index.tsx

@@ -69,6 +69,7 @@ const PlanComp: FC<Props> = ({
           <UpgradeBtn
             className='flex-shrink-0'
             isPlain={type !== Plan.sandbox}
+            gaEventName='click_header_upgrade_btn'
           />
         )}
       </div>
@@ -83,6 +84,7 @@ const PlanComp: FC<Props> = ({
             isFull
             size='lg'
             isPlain={type !== Plan.sandbox}
+            gaEventName='click_header_upgrade_btn'
           />
         )}
       </div>

web/app/components/billing/upgrade-btn/index.tsx

@@ -15,9 +15,10 @@ type Props = {
   isPlain?: boolean
   isShort?: boolean
   onClick?: () => void
+  gaEventName?: string
 }
 
-const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => {} }) => {
+const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => {
   const { t } = useTranslation()
 
   return (
@@ -38,13 +39,22 @@ const UpgradeBtn: FC<Props> = ({
   isFull = false,
   isShort = false,
   size = 'md',
-  onClick,
+  onClick: _onClick,
+  gaEventName,
 }) => {
   const { t } = useTranslation()
   const { setShowPricingModal } = useModalContext()
+  const onClick = () => {
+    if (gaEventName)
+      (window as any).dataLayer.push({ event: gaEventName })
+    if (_onClick)
+      _onClick()
+    else
+      (setShowPricingModal as any)()
+  }
 
   if (isPlain)
-    return <PlainBtn onClick={onClick || setShowPricingModal as any} className={className} />
+    return <PlainBtn onClick={onClick} className={className} />
 
   return (
     <div
@@ -55,7 +65,7 @@ const UpgradeBtn: FC<Props> = ({
         size === 'lg' ? 'h-10' : 'h-9',
         'relative flex items-center cursor-pointer border rounded-[20px] border-[#0096EA] text-white',
       )}
-      onClick={onClick || setShowPricingModal}
+      onClick={onClick}
     >
       <GoldCoin className='mr-1 w-3.5 h-3.5' />
       <div className='text-xs font-normal'>{t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)}</div>

web/i18n/lang/billing.en.ts

@@ -19,7 +19,7 @@ const translation = {
     year: 'year',
     save: 'Save ',
     free: 'Free',
-    currentPlan: 'current plan',
+    currentPlan: 'Current Plan',
     startForFree: 'Start for free',
     getStartedWith: 'Get started with ',
     contactSales: 'Contact Sales',