Skip to content
This repository has been archived by the owner on Jul 1, 2024. It is now read-only.

Commit

Permalink
Update header cta to be dynamic (#3539)
Browse files Browse the repository at this point in the history
* Update header cta to be dynamic

* Open in new tab
  • Loading branch information
Zack Chase authored Oct 25, 2023
1 parent cf812a6 commit aa42393
Show file tree
Hide file tree
Showing 11 changed files with 118 additions and 69 deletions.
12 changes: 12 additions & 0 deletions themes/default/assets/css/bundle.css

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions themes/default/assets/css/marketing.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/*!*********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/_marketing.scss ***!
\*********************************************************************************************************************************************************************************************************************/
/*! tailwindcss v2.2.15 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
Expand Down
67 changes: 1 addition & 66 deletions themes/default/assets/js/bundle.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions themes/default/assets/js/marketing.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions themes/default/layouts/partials/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -482,8 +482,8 @@
</div>
</ul>

<div class="cta-container">
<a class="header-btn-primary" data-track="header-get-started" href="/docs/get-started" title="Sign up for Pulumi Cloud"> Get Started </a>
<div class="cta-container my-2">
<header-cta button-class="header-btn-primary"></header-cta>
</div>
</div>
</header>
Expand Down
15 changes: 15 additions & 0 deletions themes/default/theme/stencil/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export namespace Components {
"modalTitle": string;
"redirectUrl": string;
}
interface HeaderCta {
"buttonClass": string;
}
interface HomeSlots {
"centerItems": string;
"imageClass": string;
Expand Down Expand Up @@ -197,6 +200,12 @@ declare global {
prototype: HTMLEventSessionRegistrationModalElement;
new (): HTMLEventSessionRegistrationModalElement;
};
interface HTMLHeaderCtaElement extends Components.HeaderCta, HTMLStencilElement {
}
var HTMLHeaderCtaElement: {
prototype: HTMLHeaderCtaElement;
new (): HTMLHeaderCtaElement;
};
interface HTMLHomeSlotsElement extends Components.HomeSlots, HTMLStencilElement {
}
var HTMLHomeSlotsElement: {
Expand Down Expand Up @@ -415,6 +424,7 @@ declare global {
};
interface HTMLElementTagNameMap {
"event-session-registration-modal": HTMLEventSessionRegistrationModalElement;
"header-cta": HTMLHeaderCtaElement;
"home-slots": HTMLHomeSlotsElement;
"pulumi-api-doc-filterable-nav": HTMLPulumiApiDocFilterableNavElement;
"pulumi-api-doc-nav-node": HTMLPulumiApiDocNavNodeElement;
Expand Down Expand Up @@ -461,6 +471,9 @@ declare namespace LocalJSX {
"modalTitle"?: string;
"redirectUrl"?: string;
}
interface HeaderCta {
"buttonClass"?: string;
}
interface HomeSlots {
"centerItems"?: string;
"imageClass"?: string;
Expand Down Expand Up @@ -628,6 +641,7 @@ declare namespace LocalJSX {
}
interface IntrinsicElements {
"event-session-registration-modal": EventSessionRegistrationModal;
"header-cta": HeaderCta;
"home-slots": HomeSlots;
"pulumi-api-doc-filterable-nav": PulumiApiDocFilterableNav;
"pulumi-api-doc-nav-node": PulumiApiDocNavNode;
Expand Down Expand Up @@ -671,6 +685,7 @@ declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"event-session-registration-modal": LocalJSX.EventSessionRegistrationModal & JSXBase.HTMLAttributes<HTMLEventSessionRegistrationModalElement>;
"header-cta": LocalJSX.HeaderCta & JSXBase.HTMLAttributes<HTMLHeaderCtaElement>;
"home-slots": LocalJSX.HomeSlots & JSXBase.HTMLAttributes<HTMLHomeSlotsElement>;
"pulumi-api-doc-filterable-nav": LocalJSX.PulumiApiDocFilterableNav & JSXBase.HTMLAttributes<HTMLPulumiApiDocFilterableNavElement>;
"pulumi-api-doc-nav-node": LocalJSX.PulumiApiDocNavNode & JSXBase.HTMLAttributes<HTMLPulumiApiDocNavNodeElement>;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:host {
display: block;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Component, Prop, State, h } from "@stencil/core";
import { parseCookie } from "../../util/util";

@Component({
tag: "header-cta",
styleUrl: "header-cta.scss",
shadow: false,
})
export class HeaderCta {
@Prop()
buttonClass = "";

@State()
loading = true;

@State()
isLoggedIn = false;

componentWillRender() {
try {
const cookie = parseCookie();
const userCookie = cookie["pulumi_web_user_info"] ?? "j:{}";
const userInfo = JSON.parse(decodeURIComponent(userCookie).slice(2));

if (userInfo && userInfo.userId && userInfo.userId !== "") {
this.isLoggedIn = true;
}
} catch (e) {
// Swallow the error and so the component shows the "Get Started" button.
}

this.loading = false;
}

render() {
if (this.loading) {
return;
}

if (this.isLoggedIn) {
return(
<a class={this.buttonClass} data-track="header-get-started-mobile" href="https://app.pulumi.com/signup/" target="_blank" rel="noopener noreferrer" title="Dashboard">Dashboard</a>
);
}

return (
<a class={this.buttonClass} data-track="header-get-started" href="/docs/get-started" title="Get Started">Get Started</a>
);
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { newE2EPage } from '@stencil/core/testing';

describe('header-cta', () => {
it('renders', async () => {
const page = await newE2EPage();
await page.setContent('<header-cta></header-cta>');

const element = await page.find('header-cta');
expect(element).toHaveClass('hydrated');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { newSpecPage } from '@stencil/core/testing';
import { HeaderCta } from '../header-cta';

describe('header-cta', () => {
it('renders', async () => {
const page = await newSpecPage({
components: [HeaderCta],
html: `<header-cta></header-cta>`,
});
expect(page.root).toEqualHtml(`
<header-cta>
<mock:shadow-root>
<slot></slot>
</mock:shadow-root>
</header-cta>
`);
});
});
2 changes: 1 addition & 1 deletion themes/default/theme/stencil/src/util/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export function parseUTMCookieString(utmCookieString: string) {
}

// parseCookie parses the document's cookie into an object.
export function parseCookie() {
export function parseCookie(): Record<string, string> {
return document.cookie.split(";").reduce((obj, cookie) => {
const index = cookie.indexOf("=");
const key = cookie.substring(0, index).trim();
Expand Down

0 comments on commit aa42393

Please sign in to comment.