upodate CTAs on the pricing page to lead to org creation when user is…

… signed in (#13129)
pulumi · Oct 16, 2024 · 380fc90 · 380fc90
1 parent 253448b
commit 380fc90
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
diff --git a/layouts/page/pricing.html b/layouts/page/pricing.html
@@ -74,15 +74,26 @@ <h4 class="text-center">{{ $tier.title }}</h4>
                                 </div>
                                 {{ if eq $index 0 }}
                                     <div class="flex flex-wrap flex-col justify-center align-center items-center text-center my-4 h-14 lg:h-24 xl:h-14">
-                                        <pricing-cta button-class="text-white text-s bg-violet-600 border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-500"></pricing-cta>
+                                        <pricing-cta button-class="text-white text-s bg-violet-600 border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-500 text-nowrap" signed-in-text="Create an Organization" signed-out-text="Sign Up"></pricing-cta>
+                                    </div>
+                                {{ else if eq $index 1 }}
+                                    <div class="flex flex-wrap justify-center items-center text-center my-4 h-14 lg:h-24 xl:h-14">
+                                        <pricing-cta button-class="text-white text-s bg-violet-600 border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-500 text-nowrap" signed-in-text="{{ $tier.primary_cta }}" signed-out-text="{{ $tier.primary_cta }}"></pricing-cta>
+                                    </div>
+                                {{ else if eq $index 2 }}
+                                    <div class="flex flex-wrap justify-center items-center text-center my-4 h-14 lg:h-24 xl:h-14">
+                                        <pricing-cta button-class="text-white text-s bg-violet-600 border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-500 text-nowrap mr-1 mb-0 lg:mb-1 xl:mb-0" signed-in-text="{{ $tier.primary_cta }}" signed-out-text="{{ $tier.primary_cta }}"></pricing-cta>
+                                        {{ if $tier.secondary_cta }}
+                                            <a href="{{ $tier.secondary_cta_link }}" class="text-violet-600 text-s border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-100">{{ $tier.secondary_cta }}</a>
+                                        {{ end }}
                                     </div>
                                 {{ else }}
-                                <div class="flex flex-wrap justify-center items-center text-center my-4 h-14 lg:h-24 xl:h-14">
-                                    <a href="{{ $tier.primary_cta_link}}" class="text-white text-s bg-violet-600 border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-500 mr-1 mb-0 lg:mb-1 xl:mb-0">{{ $tier.primary_cta }}</a>
-                                    {{ if $tier.secondary_cta }}
-                                        <a href="{{ $tier.secondary_cta_link }}" class="text-violet-600 text-s border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-100">{{ $tier.secondary_cta }}</a>
-                                    {{ end }}
-                                </div>
+                                    <div class="flex flex-wrap justify-center items-center text-center my-4 h-14 lg:h-24 xl:h-14">
+                                        <a href="{{ $tier.primary_cta_link}}" class="text-white text-s bg-violet-600 border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-500 mr-1 mb-0 lg:mb-1 xl:mb-0">{{ $tier.primary_cta }}</a>
+                                        {{ if $tier.secondary_cta }}
+                                            <a href="{{ $tier.secondary_cta_link }}" class="text-violet-600 text-s border-2 border-violet-600 rounded-lg py-2 px-2 hover:bg-violet-100">{{ $tier.secondary_cta }}</a>
+                                        {{ end }}
+                                    </div>
                                 {{ end }}
                                 <div class="border-dotted border-2 border-gray-200 rounded-lg px-4">
                                     <div class="text-sm">{{ $tier.items | markdownify }}</div>

diff --git a/theme/stencil/src/components.d.ts b/theme/stencil/src/components.d.ts
@@ -33,6 +33,8 @@ export namespace Components {
     }
     interface PricingCta {
         "buttonClass": string;
+        "signedInText": string;
+        "signedOutText": string;
     }
     interface PulumiApiDocFilterableNav {
         "baseDirectory": string;
@@ -525,6 +527,8 @@ declare namespace LocalJSX {
     }
     interface PricingCta {
         "buttonClass"?: string;
+        "signedInText"?: string;
+        "signedOutText"?: string;
     }
     interface PulumiApiDocFilterableNav {
         "baseDirectory"?: string;

diff --git a/theme/stencil/src/components/pricing-cta/pricing-cta.tsx b/theme/stencil/src/components/pricing-cta/pricing-cta.tsx
@@ -9,6 +9,12 @@ export class pricingCta {
     @Prop()
     buttonClass = "";
 
+    @Prop()
+    signedInText: string;
+
+    @Prop()
+    signedOutText: string;
+
     @State()
     loading = true;
 
@@ -38,12 +44,12 @@ export class pricingCta {
 
         if (this.isLoggedIn) {
             return(
-                <a class={this.buttonClass} href="https://app.pulumi.com/?create-organization=1" target="_blank">Create an Organization</a>
+                <a class={this.buttonClass} href="https://app.pulumi.com/?create-organization=1" target="_blank">{this.signedInText}</a>
             );
         }
 
         return (
-            <a class={this.buttonClass} href="https://app.pulumi.com/signup/" target="_blank">Sign Up</a>
+            <a class={this.buttonClass} href="https://app.pulumi.com/signup/" target="_blank">{this.signedOutText}</a>
         );
     }