docs(nx-dev): add credit pricing section (#28946)

It renames the ResourceClasses component to CreditPricing and updates its references throughout the application. It also includes additional non-compute pricing information and a more detailed breakdown of credit costs associated with various CI/CD operations for Nx Cloud.
nrwl · Nov 15, 2024 · 2d5acec · 2d5acec
1 parent 88017bb
commit 2d5acec
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 10 deletions.
diff --git a/nx-dev/nx-dev/app/pricing/page.tsx b/nx-dev/nx-dev/app/pricing/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import {
   Faq,
   Oss,
-  ResourceClasses,
+  CreditPricing,
   PlansDisplay,
   TrialCallout,
 } from '@nx/nx-dev/ui-pricing';
@@ -47,7 +47,7 @@ export default function PricingPage() {
         <TrialCallout pageId="pricing" />
       </div>
       <div className="mt-32 lg:mt-56">
-        <ResourceClasses />
+        <CreditPricing />
       </div>
       <div className="mt-32 lg:mt-56">
         <Faq />

diff --git a/nx-dev/ui-pricing/src/index.ts b/nx-dev/ui-pricing/src/index.ts
@@ -1,5 +1,5 @@
 export * from './lib/faq';
 export * from './lib/oss';
 export * from './lib/plans-display';
-export * from './lib/resource-classes';
+export * from './lib/credit-pricing';
 export * from './lib/trial-callout';
diff --git a/...v/ui-pricing/src/lib/resource-classes.tsx → nx-dev/ui-pricing/src/lib/credit-pricing.tsx b/...v/ui-pricing/src/lib/resource-classes.tsx → nx-dev/ui-pricing/src/lib/credit-pricing.tsx
@@ -2,6 +2,16 @@ import { ReactElement } from 'react';
 import { LinuxIcon, WindowsIcon } from '@nx/nx-dev/ui-icons';
 import { SectionDescription, SectionHeading } from '@nx/nx-dev/ui-common';
 
+const nonComputeItems = [
+  {
+    name: 'CI Pipeline Execution',
+    description:
+      'A CI Pipeline Execution is a CI run or a Workflow run (depending on your CI provider). For instance, running a PR or running CI on the main branch are CI Pipeline Executions.',
+    creditCost: 500,
+    suffix: 'execution',
+  },
+];
+
 const linuxAmd64 = [
   {
     icon: <LinuxIcon aria-hidden="true" className="size-6" />,
@@ -77,7 +87,7 @@ const windows = [
   },
 ];
 
-export function ResourceClasses(): ReactElement {
+export function CreditPricing(): ReactElement {
   return (
     <section
       id="resource-classes"
@@ -86,15 +96,47 @@ export function ResourceClasses(): ReactElement {
       <header>
         <div className="mx-auto max-w-4xl text-center">
           <SectionHeading as="h2" variant="title">
-            Agents resource classes
-          </SectionHeading>
-          <SectionHeading as="p" variant="subtitle" className="mt-6">
-            Credits are the Nx Cloud currency allowing for usage-based pricing.
+            Credit pricing
           </SectionHeading>
         </div>
       </header>
 
       <div className="mx-auto mt-10 max-w-full space-y-12 sm:mt-20">
+        <SectionHeading as="h3" variant="subtitle">
+          Non-compute pricing
+        </SectionHeading>
+        <div>
+          <ul role="list" className="mt-4 space-y-4 sm:space-y-6">
+            {nonComputeItems.map((project) => (
+              <li
+                key={project.name}
+                className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
+              >
+                <div className="flex flex-1 items-center justify-between bg-white dark:bg-slate-900">
+                  <div className="flex-1 px-4 py-2 text-sm">
+                    <span className="font-medium text-slate-900 dark:text-slate-100">
+                      {project.name}
+                    </span>
+                    <p className="text-xs text-slate-500">
+                      {project.description}
+                    </p>
+                  </div>
+                  <div className="shrink-0 pr-4 text-sm font-semibold">
+                    <span>
+                      {new Intl.NumberFormat('en-US', {
+                        style: 'decimal',
+                      }).format(project.creditCost)}{' '}
+                      credits/{project.suffix}
+                    </span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <SectionHeading as="h3" variant="subtitle">
+          Agents resource classes
+        </SectionHeading>
         <div>
           <SectionDescription as="h3">Docker / Linux AMD64</SectionDescription>
           <ul
@@ -119,7 +161,12 @@ export function ResourceClasses(): ReactElement {
                     </p>
                   </div>
                   <div className="shrink-0 pr-4 text-sm font-semibold">
-                    <span>{project.creditCost} credits/min</span>
+                    <span>
+                      {new Intl.NumberFormat('en-US', {
+                        style: 'decimal',
+                      }).format(project.creditCost)}{' '}
+                      credits/min
+                    </span>
                   </div>
                 </div>
               </li>

diff --git a/nx-dev/ui-pricing/src/lib/faq.tsx b/nx-dev/ui-pricing/src/lib/faq.tsx
@@ -59,7 +59,7 @@ export function Faq(): ReactElement {
     {
       question: 'What is a CI Pipeline Execution?',
       answer:
-        'By default, a CI pipeline execution is a 1:1 match to your CI provider of choice\'s concept of a "workflow".',
+        'A CI Pipeline Execution is a CI run or a Workflow run (depending on your CI provider). For instance, running a PR or running CI on the main branch are CI Pipeline Executions.',
     },
     {
       question: 'What is the Team Plan?',