add refs to pro badge (#3202)

tokens-studio · Nov 11, 2024 · 6fd921c · 6fd921c
1 parent 1af628f
commit 6fd921c
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 10 deletions.
diff --git a/packages/tokens-studio-for-figma/src/app/components/AddLicenseKey/AddLicenseKey.tsx b/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 />
+          <ProBadge link="https://tokens.studio/plugin?ref=add-license-key" />
           {existingKey && !licenseKeyError && (
             <ManageSubscriptionLink href="https://account.tokens.studio" target="_blank">
               {t('manageSubscription')}

diff --git a/packages/tokens-studio-for-figma/src/app/components/BranchSelector.tsx b/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 compact />
+                  <ProBadge link="https://tokens.studio/plugin?ref=branch-selector" compact />
                 </DropdownMenu.Item>
                 <DropdownMenu.Separator />
               </>

diff --git a/packages/tokens-studio-for-figma/src/app/components/ColorTokenForm.tsx b/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 compact />
+          <ProBadge link="https://tokens.studio/plugin?ref=modifiers" compact />
         </Box>
         {
           !modifyVisible ? (

diff --git a/packages/tokens-studio-for-figma/src/app/components/Footer.tsx b/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 />
+          <ProBadge link="https://tokens.studio/plugin?ref=footer" />
           <IconButton
             as="a"
             href={docUrls.root}

diff --git a/packages/tokens-studio-for-figma/src/app/components/ProBadge.tsx b/packages/tokens-studio-for-figma/src/app/components/ProBadge.tsx
@@ -25,15 +25,16 @@ export const StyledProBadge = styled('a', {
 });
 
 type Props = {
-  compact?: boolean;
+  readonly compact?: boolean;
+  readonly link?: string;
 };
 
-export default function ProBadge({ compact }: Props) {
+export default function ProBadge({ compact, link }: Props) {
   const existingKey = useSelector(licenseKeySelector);
   const licenseKeyError = useSelector(licenseKeyErrorSelector);
   const { t } = useTranslation(['licence']);
 
   return (
-    <StyledProBadge href="https://tokens.studio/plugin" target="_blank">{(existingKey && !licenseKeyError) || compact ? t('pro') : t('getPro')}</StyledProBadge>
+    <StyledProBadge href={link} target="_blank">{(existingKey && !licenseKeyError) || compact ? t('pro') : t('getPro')}</StyledProBadge>
   );
 }
diff --git a/packages/tokens-studio-for-figma/src/app/components/ThemeSelector/ThemeSelector.tsx b/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 compact />}
+            {!isProUser && <ProBadge link="https://tokens.studio/plugin?ref=manage-themes" compact />}
             <DropdownMenu.TrailingVisual>
               <NavArrowRight />
             </DropdownMenu.TrailingVisual>

diff --git a/packages/tokens-studio-for-figma/src/app/components/TokenListingHeading.tsx b/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 /> : null}
+        {isPro ? <ProBadge link={`https://tokens.studio/plugin?ref=${tokenKey}-listing`} /> : null}
       </StyledTokenGroupHeadingButton>
       <Box
         css={{

diff --git a/packages/tokens-studio-for-figma/src/stories/ProBadge.stories.mdx b/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/>
+      <ProBadge link="https://tokens.studio/plugin?ref=storybook" >
     </Provider>
   )
 }