feat(cloud): enable free trial (#236)

* feat(cloud): add free trial

* fix: center workspace name icon when collapsed

* feat: add 14 day free trial notice to pricing page

* feat: hide upgrade button when on active subscription

* chore: translations

apps/web/src/views/members/components/InviteMemberForm.tsx

@@ -176,6 +176,13 @@ export function InviteMemberForm({
   };
 
   const handleInviteLinkToggle = async () => {
+    if (
+      env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+      !hasTeamSubscription &&
+      !hasProSubscription
+    )
+      return handleUpgrade();
+
     setIsLoadingInviteLink(true);
 
     if (isShareInviteLinkEnabled && workspace.publicId) {
@@ -342,11 +349,6 @@ export function InviteMemberForm({
               : t`Create invite link`
           }
           isChecked={isShareInviteLinkEnabled}
-          disabled={
-            env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-            !hasTeamSubscription &&
-            !hasProSubscription
-          }
           onChange={handleInviteLinkToggle}
         />
         <div>
@@ -354,7 +356,7 @@ export function InviteMemberForm({
           !hasTeamSubscription &&
           !hasProSubscription ? (
             <Button type="button" onClick={handleUpgrade}>
-              {t`Upgrade to Team Plan`}
+              {t`Start 14 day free trial`}
             </Button>
           ) : (
             <Button

apps/web/src/views/members/index.tsx

@@ -181,7 +181,7 @@ export default function MembersPage() {
           <div className="flex items-center gap-3">
             {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
               <>
-                {!proSubscription && (
+                {!proSubscription && !teamSubscription && (
                   <Link
                     href="/settings/workspace?upgrade=pro"
                     className="hidden items-center rounded-full border border-emerald-300 bg-emerald-50 px-3 py-1 text-center text-xs text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 lg:flex"

apps/web/src/views/pricing/components/PricingTiers.tsx

@@ -131,11 +131,11 @@ const Pricing = ({
               >
                 {tier.name}
               </h3>
-              {tier.highlighted && frequency?.value === "annually" ? (
+              {tier.highlighted && (
                 <p className="rounded-full bg-light-50 px-2.5 py-1 text-[12px] font-semibold text-dark-500 dark:bg-dark-1000 dark:text-dark-50">
-                  -20%
+                  {t`14 day free trial`}
                 </p>
-              ) : null}
+              )}
             </div>
             <p
               className={twMerge(

apps/web/src/views/settings/WorkspaceSettings.tsx

@@ -80,7 +80,8 @@ export default function WorkspaceSettings() {
         />
 
         {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-          !hasActiveSubscription(subscriptions, "pro") && (
+          !hasActiveSubscription(subscriptions, "pro") &&
+          !hasActiveSubscription(subscriptions, "team") && (
             <div className="my-8">
               <Button
                 onClick={() => openModal("UPGRADE_TO_PRO")}

apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx

@@ -48,9 +48,11 @@ export function UpgradeToProConfirmation({
   return (
     <div className="p-5">
       <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-bold text-neutral-900 dark:text-dark-1000">
-          {t`Upgrade to Pro`}
-        </h2>
+        <div className="pb-4">
+          <h2 className="text-md font-bold text-neutral-900 dark:text-dark-1000">
+            {t`Upgrade to Pro`}
+          </h2>
+        </div>
         <p className="mb-4 text-sm font-medium text-light-900 dark:text-dark-900">
           {t`Supercharge your workspace for just $29/month. Here's what you'll get:`}
         </p>
@@ -106,7 +108,7 @@ export function UpgradeToProConfirmation({
         <Button
           onClick={handleUpgrade}
           iconRight={<HiBolt />}
-        >{t`Upgrade`}</Button>
+        >{t`Start 14 day free trial`}</Button>
       </div>
     </div>
   );