introduce utm tags

packages/tokens-studio-for-figma/src/app/components/AddLicenseKey/AddLicenseKey.tsx

@@ -109,7 +109,7 @@ export default function AddLicenseKey() {
       <Stack direction="row" gap={2} align="center" justify="between">
         <Heading size="medium">{t('licenseKey')}</Heading>
         <Stack direction="row" gap={2} align="center">
-          <ProBadge link="https://tokens.studio/plugin?ref=add-license-key" />
+          <ProBadge campaign="add-license-key" />
           {existingKey && !licenseKeyError && (
             <ManageSubscriptionLink href="https://account.tokens.studio" target="_blank">
               {t('manageSubscription')}

packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx

@@ -208,7 +208,7 @@ export default function BranchSelector() {
               <>
                 <DropdownMenu.Item css={{ display: 'flex', justifyContent: 'space-between' }}>
                   <span>{t('upgradeToPro', { ns: 'licence' })}</span>
-                  <ProBadge link="https://tokens.studio/plugin?ref=branch-selector" compact />
+                  <ProBadge campaign="branch-selector" compact />
                 </DropdownMenu.Item>
                 <DropdownMenu.Separator />
               </>

packages/tokens-studio-for-figma/src/app/components/ColorTokenForm.tsx

@@ -227,7 +227,7 @@ export default function ColorTokenForm({
       <Box css={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <Box css={{ display: 'flex', gap: '$3', alignItems: 'center' }}>
           <Heading size="small">{t('modify')}</Heading>
-          <ProBadge link="https://tokens.studio/plugin?ref=modifiers" compact />
+          <ProBadge campaign="modify-color" compact />
         </Box>
         {
           !modifyVisible ? (

packages/tokens-studio-for-figma/src/app/components/Footer.tsx

@@ -141,7 +141,7 @@ export default function Footer() {
           <a href="https://tokens.studio/changelog" target="_blank" rel="noreferrer">{`V ${pjs.version}`}</a>
         </Box>
         <Stack direction="row" gap={1}>
-          <ProBadge link="https://tokens.studio/plugin?ref=footer" />
+          <ProBadge campaign="footer" />
           <IconButton
             as="a"
             href={docUrls.root}

packages/tokens-studio-for-figma/src/app/components/ProBadge.test.tsx

@@ -5,12 +5,12 @@ import ProBadge from './ProBadge';
 
 describe('ProBadge', () => {
   it('displays get pro badge if user is on free plan', () => {
-    const { getByText } = render(<ProBadge />, { store });
+    const { getByText } = render(<ProBadge campaign="test" />, { store });
     expect(getByText('getPro')).toBeInTheDocument();
   });
 
   it('displays pro badge if user is on pro plan', () => {
-    const { getByText, queryByText } = render(<ProBadge />, { store });
+    const { getByText, queryByText } = render(<ProBadge campaign="test" />, { store });
     store.dispatch.userState.setLicenseKey('test-key-123');
 
     waitFor(() => {

packages/tokens-studio-for-figma/src/app/components/ProBadge.tsx

@@ -26,14 +26,16 @@ export const StyledProBadge = styled('a', {
 
 type Props = {
   readonly compact?: boolean;
-  readonly link?: string;
+  readonly campaign: string;
 };
 
-export default function ProBadge({ compact, link }: Props) {
+export default function ProBadge({ compact, campaign }: Props) {
   const existingKey = useSelector(licenseKeySelector);
   const licenseKeyError = useSelector(licenseKeyErrorSelector);
   const { t } = useTranslation(['licence']);
 
+  const link = `https://tokens.studio/pro?ref=figma-plugin&utm_source=figma-plugin&utm_medium=pro-badge&utm_campaign=${campaign}`;
+
   return (
     <StyledProBadge href={link} target="_blank">{(existingKey && !licenseKeyError) || compact ? t('pro') : t('getPro')}</StyledProBadge>
   );

packages/tokens-studio-for-figma/src/app/components/ThemeSelector/ThemeSelector.tsx

@@ -132,7 +132,7 @@ export const ThemeSelector: React.FC<React.PropsWithChildren<React.PropsWithChil
             onSelect={handleManageThemes}
           >
             <span>{t('manageThemes')}</span>
-            {!isProUser && <ProBadge link="https://tokens.studio/plugin?ref=manage-themes" compact />}
+            {!isProUser && <ProBadge campaign="manage-themes" compact />}
             <DropdownMenu.TrailingVisual>
               <NavArrowRight />
             </DropdownMenu.TrailingVisual>

packages/tokens-studio-for-figma/src/app/components/TokenListingHeading.tsx

@@ -61,7 +61,7 @@ export default function TokenListingHeading({
           <Box css={{ padding: '$2', margin: '-$2' }}>{isCollapsed ? <IconCollapseArrow /> : <IconExpandArrow />}</Box>
         </Tooltip>
         <Heading size="small">{label}</Heading>
-        {isPro ? <ProBadge link={`https://tokens.studio/plugin?ref=${tokenKey}-listing`} /> : null}
+        {isPro ? <ProBadge campaign={`${tokenKey}-listing`} /> : null}
       </StyledTokenGroupHeadingButton>
       <Box
         css={{

packages/tokens-studio-for-figma/src/stories/ProBadge.stories.mdx

@@ -14,7 +14,7 @@ import ProBadge from '@/app/components/ProBadge';
 export const ProBadgeDefaultStory = (args) => {
   return (
     <Provider store={store}>
-      <ProBadge link="https://tokens.studio/plugin?ref=storybook" >
+      <ProBadge campaign="storybook" />
     </Provider>
   )
 }