From 444df394c41142687e0a9ab6d127f96f2fc52f38 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Thu, 15 Aug 2024 10:22:47 -0400
Subject: [PATCH] feat(nx-dev): add Explain with AI to Enterprise and Pro Plans

This commit integrates the "Explain with AI" feature into the Enterprise and Pro plans for providing detailed explanations and insights for failed task outputs. It also remove the Nx Workflows mention of the pricing page. It also updates various links within the Hobby plan and modifies plan table descriptions to reflect the accurate feature names.
---
 .../src/lib/plans/enterprise-plan.tsx         | 19 ++++++++++++++++
 .../ui-pricing/src/lib/plans/hobby-plan.tsx   | 22 ++-----------------
 .../ui-pricing/src/lib/plans/plan-table.tsx   | 19 +++++++---------
 nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx  | 19 ++++++++++++++++
 4 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
index 9a8d93c569327..54ed3686d0d05 100644
--- a/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans/enterprise-plan.tsx
@@ -1,5 +1,6 @@
 import { CheckIcon } from '@heroicons/react/24/outline';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
+import Link from 'next/link';
 
 const features = [
   'White glove onboarding',
@@ -64,6 +65,24 @@ export function EnterprisePlan({
             {feature}
           </li>
         ))}
+        <li className="flex gap-x-3">
+          <CheckIcon
+            className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
+            aria-hidden="true"
+          />
+          <p>
+            <Link
+              href="/ci/troubleshooting/explain-with-ai"
+              title="Learn more about Explain with AI"
+              prefetch={false}
+              className="font-medium text-slate-700 underline dark:text-slate-300"
+            >
+              Explain with AI
+            </Link>
+            : provide detailed explanations and insights for failed task
+            outputs.
+          </p>
+        </li>
       </ul>
     </article>
   );
diff --git a/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx
index fe3b2b4a8b551..862506bbefbc3 100644
--- a/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans/hobby-plan.tsx
@@ -67,7 +67,7 @@ export function HobbyPlan({
           />
           <p>
             <Link
-              href="/products/replay#content"
+              href="/ci/features/remote-cache"
               title="Learn more about Nx Replay"
               prefetch={false}
               className="font-medium text-slate-700 underline dark:text-slate-300"
@@ -84,7 +84,7 @@ export function HobbyPlan({
           />
           <p>
             <Link
-              href="/products/agents#content"
+              href="/ci/features/agents"
               title="Learn more about Nx Agents"
               prefetch={false}
               className="font-medium text-slate-700 underline dark:text-slate-300"
@@ -94,24 +94,6 @@ export function HobbyPlan({
             : native task distribution solution for CI{' '}
           </p>
         </li>
-        <li className="flex gap-x-3">
-          <CheckIcon
-            className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
-            aria-hidden="true"
-          />
-          <p>
-            <Link
-              href="https://nx.app/products/workflows#content?utm_source=nx.dev"
-              title="Learn more about Nx Workflows"
-              prefetch={false}
-              className="font-medium text-slate-700 underline dark:text-slate-300"
-            >
-              Nx Workflows
-            </Link>
-            : full CI replacement{' '}
-            <span className="text-xs italic">(Coming Soon)</span>
-          </p>
-        </li>
         {features.map((feature) => (
           <li key={feature} className="flex gap-x-3">
             <CheckIcon
diff --git a/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
index 5e7501d36207e..bbfbc43dae019 100644
--- a/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans/plan-table.tsx
@@ -495,16 +495,15 @@ export function PlanTable(): JSX.Element {
               <span className="sr-only">yes</span>
             </td>
           </tr>
-          <tr className="bg-slate-50/40 text-sm transition hover:bg-slate-50/60 dark:bg-slate-800/40 dark:hover:bg-slate-800/60">
+          <tr className="text-sm transition hover:bg-slate-50/60 dark:hover:bg-slate-800/60">
             <th
               className="min-w-[124px] border-l border-t border-slate-200 px-2 py-1.5 text-left font-normal leading-tight md:min-w-[180px] md:p-2 md:px-3 lg:w-[325px] lg:px-4 lg:py-2.5 lg:pl-8 dark:border-slate-800"
               scope="row"
             >
               <span className="font-medium text-slate-700 dark:text-slate-300">
-                Nx Workflows
+                Nx Replay
               </span>
-              : full CI replacement{' '}
-              <span className="text-xs italic">(Coming Soon)</span>
+              : remote caching
             </th>
             <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
               <CheckIcon
@@ -534,16 +533,14 @@ export function PlanTable(): JSX.Element {
               scope="row"
             >
               <span className="font-medium text-slate-700 dark:text-slate-300">
-                Nx Replay
+                Explain with AI
               </span>
-              : Remote Caching
+              : provide detailed explanations and insights for failed task
+              outputs.
             </th>
             <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
-              <CheckIcon
-                className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
-                aria-hidden="true"
-              />
-              <span className="sr-only">yes</span>
+              <XMarkIcon className="h-6 w-5 flex-none" aria-hidden="true" />
+              <span className="sr-only">no</span>
             </td>
             <td className="border-l border-t border-slate-200 px-2 py-1.5 md:px-3 lg:px-4 lg:py-2.5 dark:border-slate-800">
               <CheckIcon
diff --git a/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx b/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx
index a83dc31df857b..9f71320b4637a 100644
--- a/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx
+++ b/nx-dev/ui-pricing/src/lib/plans/pro-plan.tsx
@@ -3,6 +3,7 @@ import { Popover, Transition } from '@headlessui/react';
 import { CheckIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
 import { ButtonLink } from '@nx/nx-dev/ui-common';
 import { Fragment } from 'react';
+import Link from 'next/link';
 
 const features = [
   '300k credits included',
@@ -93,6 +94,24 @@ export function ProPlan({
             {feature}
           </li>
         ))}
+        <li className="flex gap-x-3">
+          <CheckIcon
+            className="h-6 w-5 flex-none text-blue-600 dark:text-sky-600"
+            aria-hidden="true"
+          />
+          <p>
+            <Link
+              href="/ci/troubleshooting/explain-with-ai"
+              title="Learn more about Explain with AI"
+              prefetch={false}
+              className="font-medium text-slate-700 underline dark:text-slate-300"
+            >
+              Explain with AI
+            </Link>
+            : provide detailed explanations and insights for failed task
+            outputs.
+          </p>
+        </li>
       </ul>
     </article>
   );