dubinc · TWilson023 · Dec 26, 2024 · Dec 26, 2024 · Dec 27, 2024 · Dec 27, 2024
diff --git a/packages/ui/src/icons/nucleo/circle-question.tsx b/packages/ui/src/icons/nucleo/circle-question.tsx
@@ -0,0 +1,39 @@
+import { SVGProps } from "react";
+
+export function CircleQuestion(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        <circle
+          cx="9"
+          cy="9"
+          fill="none"
+          r="7.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M6.925,6.619c.388-1.057,1.294-1.492,2.18-1.492,.895,0,1.818,.638,1.818,1.808,0,1.784-1.816,1.468-2.096,3.065"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M8.791,13.567c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z"
+          fill="currentColor"
+          stroke="none"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/index.ts b/packages/ui/src/icons/nucleo/index.ts
@@ -36,6 +36,7 @@ export * from "./circle-half-dotted-check";
 export * from "./circle-half-dotted-clock";
 export * from "./circle-info";
 export * from "./circle-play-fill";
+export * from "./circle-question";
 export * from "./circle-warning";
 export * from "./circle-xmark";
 export * from "./circles";
@@ -145,6 +146,7 @@ export * from "./table-icon";
 export * from "./table-rows2";
 export * from "./tablet";
 export * from "./tag";
+export * from "./tags";
 export * from "./toggle2-fill";
 export * from "./trash";
 export * from "./tv";

diff --git a/packages/ui/src/icons/nucleo/tags.tsx b/packages/ui/src/icons/nucleo/tags.tsx
@@ -0,0 +1,39 @@
+import { SVGProps } from "react";
+
+export function Tags(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path
+          d="M1.75,4.25H7.336c.265,0,.52,.105,.707,.293l5.793,5.793c.781,.781,.781,2.047,0,2.828l-3.172,3.172c-.781,.781-2.047,.781-2.828,0L2.043,10.543c-.188-.188-.293-.442-.293-.707V4.25Z"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M3.25,1.75v-.5h5.586c.265,0,.52,.105,.707,.293l5.793,5.793c.432,.432,.625,1.012,.579,1.577"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <circle
+          cx="5.25"
+          cy="7.75"
+          fill="currentColor"
+          r="1.25"
+          stroke="none"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/utils/src/constants/pricing.tsx b/packages/utils/src/constants/pricing.tsx
@@ -1,9 +1,22 @@
+import { nFormatter } from "../functions";
+
+export type PlanFeature = {
+  id?: string;
+  text: string;
+  footnote?: {
+    title: string;
+    cta: string;
+    href: string;
+  };
+};
+
 const BUSINESS_PLAN_MODIFIER = ({
   name = "Business",
   monthly = 59,
   yearly = 49,
   links = 5000,
   clicks = 150000,
+  conversions = 500,
   domains = 40,
   users = 15,
   ids = [],
@@ -13,9 +26,9 @@ const BUSINESS_PLAN_MODIFIER = ({
   yearly: number;
   links: number;
   clicks: number;
+  conversions: number;
   domains: number;
   users: number;
-  tags: number;
   ids: string[];
 }) => ({
   name,
@@ -29,6 +42,7 @@ const BUSINESS_PLAN_MODIFIER = ({
   limits: {
     links,
     clicks,
+    conversions,
     domains,
     tags: 1000000000,
     users,
@@ -41,20 +55,30 @@ const BUSINESS_PLAN_MODIFIER = ({
   },
   cta: {
     text: "Get started with Business",
-    shortText: "Get started",
+    shortText: "Get Business",
     href: "https://app.dub.co/register",
     color: "bg-black hover:bg-gray-800 hover:ring-gray-200",
   },
   featureTitle: "Everything in Pro, plus:",
   features: [
-    { text: `${Intl.NumberFormat("en-US").format(links)} new links/mo` },
     {
-      text: `${Intl.NumberFormat("en-US").format(clicks)} tracked clicks/mo`,
+      id: "clicks",
+      text: `${nFormatter(clicks)} tracked clicks/mo`,
     },
-    { text: "3-year analytics retention" },
-    { text: `${domains} custom domains` },
-    { text: `${users} users` },
     {
+      id: "links",
+      text: `${Intl.NumberFormat("en-US").format(links)} new links/mo`,
+    },
+    {
+      id: "conversions",
+      text: `${Intl.NumberFormat("en-US").format(conversions)} conversions/mo`,
+    },
+    {
+      id: "retention",
+      text: "3-year analytics retention",
+    },
+    {
+      id: "tags",
       text: "Unlimited tags",
       footnote: {
         title:
@@ -64,6 +88,15 @@ const BUSINESS_PLAN_MODIFIER = ({
       },
     },
     {
+      id: "domains",
+      text: `${domains} domains`,
+    },
+    {
+      id: "users",
+      text: `${users} users`,
+    },
+    {
+      id: "events",
       text: "Real-time events stream",
       footnote: {
         title:
@@ -73,6 +106,7 @@ const BUSINESS_PLAN_MODIFIER = ({
       },
     },
     {
+      id: "webhooks",
       text: "Event webhooks (beta)",
       footnote: {
         title:
@@ -81,7 +115,7 @@ const BUSINESS_PLAN_MODIFIER = ({
         href: "https://d.to/webhooks",
       },
     },
-  ],
+  ] as PlanFeature[],
 });
 
 export const PLANS = [
@@ -112,14 +146,16 @@ export const PLANS = [
     },
     featureTitle: "What's included:",
     features: [
-      { text: "25 new links/mo" },
       {
+        id: "clicks",
         text: "1K tracked clicks/mo",
       },
-      { text: "30-day analytics retention" },
-      { text: "3 custom domains" },
-      { text: "1 user" },
+      { id: "links", text: "25 new links/mo" },
+      { id: "retention", text: "30-day analytics retention" },
+      { id: "domains", text: "3 domains" },
+      { id: "user", text: "1 user" },
       {
+        id: "analytics",
         text: "Advanced analytics",
         footnote: {
           title:
@@ -128,19 +164,18 @@ export const PLANS = [
           href: "https://dub.co/help/article/dub-analytics",
         },
       },
-      { text: "10 AI credits/mo" },
-      {
-        text: "Basic support",
-      },
+      { id: "ai", text: "10 AI credits/mo" },
+      { id: "basic-support", text: "Basic support" },
       {
+        id: "api",
         text: "API Access",
         footnote: {
           title: "Programatically manage your links using our REST API.",
           cta: "Learn more.",
           href: "https://dub.co/docs/api-reference/introduction",
         },
       },
-    ],
+    ] as PlanFeature[],
   },
   {
     name: "Pro",
@@ -173,25 +208,25 @@ export const PLANS = [
     },
     cta: {
       text: "Get started with Pro",
-      shortText: "Get started",
+      shortText: "Get Pro",
       href: "https://app.dub.co/register",
       color: "bg-blue-600 hover:bg-blue-700 hover:ring-blue-100",
     },
     featureTitle: "Everything in Free, plus:",
     features: [
-      { text: "1,000 new links/mo" },
-      {
-        text: "50K tracked clicks/mo",
-      },
-      { text: "1-year analytics retention" },
-      { text: "10 custom domains" },
-      { text: "5 users" },
+      { id: "clicks", text: "50K tracked clicks/mo" },
+      { id: "links", text: "1,000 new links/mo" },
+      { id: "retention", text: "1-year analytics retention" },
+      { id: "domains", text: "10 domains" },
+      { id: "users", text: "5 users" },
       {
+        id: "link-features",
         text: "Advanced link features",
         footnote:
           "Custom social media cards, password-protected links, link expiration, link cloaking, device targeting, geo targeting etc.",
       },
       {
+        id: "ai",
         text: "Unlimited AI credits",
         footnote: {
           title:
@@ -200,10 +235,9 @@ export const PLANS = [
           href: "https://dub.co/blog/introducing-dub-ai",
         },
       },
+      { id: "priority-support", text: "Priority support" },
       {
-        text: "Priority support",
-      },
-      {
+        id: "dublink",
         text: "Premium dub.link domain",
         footnote: {
           title: "Stand out from the crowd with a premium dub.link domain.",
@@ -212,24 +246,25 @@ export const PLANS = [
         },
       },
       {
-        text: "Complimentary custom domain",
+        id: "dotlink",
+        text: "Free custom domain",
         footnote: {
           title:
             "All our paid plans come with a free .link custom domain, which helps improve click-through rates.",
           cta: "Learn more.",
           href: "https://dub.co/help/article/free-dot-link-domain",
         },
       },
-    ],
+    ] as PlanFeature[],
   },
   BUSINESS_PLAN_MODIFIER({
     name: "Business",
     monthly: 59,
     yearly: 49,
     links: 5000,
     clicks: 150000,
+    conversions: 500,
     domains: 40,
-    tags: 150,
     users: 15,
     ids: [
       "price_1LodLoAlJJEpqkPV9rD0rlNL", // old monthly
@@ -247,8 +282,8 @@ export const PLANS = [
     yearly: 99,
     links: 15000,
     clicks: 400000,
+    conversions: 1500,
     domains: 100,
-    tags: 300,
     users: 30,
     ids: [
       "price_1OnWu0AlJJEpqkPVWk4144ZG", // monthly (test)
@@ -263,8 +298,8 @@ export const PLANS = [
     yearly: 199,
     links: 40000,
     clicks: 1000000,
+    conversions: 5000,
     domains: 250,
-    tags: 500,
     users: 50,
     ids: [
       "price_1OnWvCAlJJEpqkPVLzLHx5QD", // monthly (test)
@@ -279,8 +314,8 @@ export const PLANS = [
     yearly: 399,
     links: 100000,
     clicks: 2500000,
+    conversions: 15000,
     domains: 500,
-    tags: 1000,
     users: 100,
     ids: [
       "price_1OnWwLAlJJEpqkPVXtJyPqLk", // monthly (test)
@@ -319,16 +354,12 @@ export const PLANS = [
     },
     featureTitle: "Everything in Business, plus:",
     features: [
-      { text: "Custom usage limits" },
-      { text: "Volume discounts" },
-      { text: "SSO/SAML" },
-      { text: "Role-based access controls" },
-      { text: "Custom contract & SLA" },
-      { text: "Whiteglove onboarding" },
-      { text: "Dedicated success manager" },
-      { text: "Priority support" },
-      { text: "Dedicated Slack channel" },
-    ],
+      { id: "sso", text: "SSO/SAML" },
+      { id: "roles", text: "Role-based controls" },
+      { id: "sla", text: "Custom SLA" },
+      { id: "logs", text: "Audit logs" },
+      { id: "success", text: "Dedicated success manager" },
+    ] as PlanFeature[],
   },
 ];