@automattic/onboarding 1.0.0

package/dist/cjs/select-items-alt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select-items-alt/index.tsx"],"names":[],"mappings":";;;;AAAA,uDAAgD;AAChD,sDAAgD;AAChD,4CAA8C;AAC9C,wDAAwB;AAExB,wBAAsB;AAkBtB,SAAS,cAAc,CAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAc;IACvE,OAAO,CACN,gCAAK,SAAS,EAAG,IAAA,cAAI,EAAE,kBAAkB,EAAE,SAAS,CAAE,YACnD,KAAK,CAAC,GAAG,CACV,CAAE,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,EAAG,EAAE,CACzE,IAAI,IAAI,CACP,gCAAiB,SAAS,EAAC,wBAAwB,YAClD,iCAAK,SAAS,EAAC,qCAAqC,aACnD,gCAAK,SAAS,EAAC,6BAA6B,YAC3C,8BAAG,SAAS,EAAC,oCAAoC,YAAG,WAAW,GAAM,GAChE,EACN,uBAAC,mBAAM,IACN,QAAQ,EAAG,OAAO,EAClB,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAG,GAAG,EAAE,CAAC,QAAQ,CAAE,KAAK,CAAE,YAE/B,UAAU,GACJ,EAEP,OAAO,IAAI,CACZ,uEAEC,uBAAC,oBAAO,IAAC,IAAI,EAAG,WAAqB,EAAG,QAAQ,EAAC,eAAe,YAC/D,gCAAK,SAAS,EAAC,sCAAsC,YACpD,uBAAC,YAAI,IAAC,IAAI,EAAG,YAAI,EAAG,IAAI,EAAG,EAAE,GAAK,GAC7B,GACG,IACR,CACH,IACI,IAvBI,GAAG,CAwBR,CACN,CACF,GACI,CACN,CAAC;AACH,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/dist/cjs/select-items-alt/style.scss

@@ -0,0 +1,72 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "@automattic/typography/styles/fonts";
+
+.select-items-alt {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding-left: 40px;
+
+	@include break-small {
+		padding-left: 60px;
+	}
+}
+
+.select-items-alt__item {
+	display: flex;
+	align-items: flex-start;
+	position: relative;
+	padding: 8px 0;
+
+	@include break-small {
+		width: 342px;
+	}
+
+	@include break-medium {
+		width: 456px;
+	}
+
+	&-info-wrapper {
+		@include break-mobile {
+			display: flex;
+			align-items: flex-start;
+			width: 100%;
+		}
+	}
+
+	&-info {
+		flex: 1;
+		padding-right: 6px;
+	}
+
+	&-description {
+		font-size: $font-body-small;
+		color: #646970;
+		margin-bottom: 0;
+	}
+
+	&-button {
+		margin-top: 8px;
+		padding: 0;
+		min-width: 130px;
+		border: none;
+		background: none;
+		color: #101517;
+		text-decoration: underline;
+		font-weight: 500;
+		text-align: end;
+
+		@include break-mobile {
+			margin-top: 0;
+		}
+
+		&:not([disabled]):hover {
+			color: var(--color-neutral-70);
+		}
+	}
+
+	&-disabled-info svg {
+		fill: var(--color-neutral-20);
+	}
+}

package/dist/cjs/sensei-logo/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SenseiLogo = ({ className = 'sensei-logo', size = 18, }) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, width: size, height: size, fill: "none", viewBox: "0 0 18 18", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "9", r: "9", fill: "#101517" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", fillRule: "evenodd", d: "M7.427 11.513c.211-.175.126-.36.422-.427-.013.147.103.296.178.427-.077-.279-.002-.407.055-.546.245-.596-.466-.981-.95-1.076.165-.125.28-.248.489-.27a1.574 1.574 0 00-.746.175c-.783.403-1.403-.397-.993-1.122.219-.388.468-.394.692-.657a.85.85 0 01.053.428.747.747 0 00.034-.504c-.073-.255-.282-.256-.32-.623-.009-.076-.075.043-.186-.058-.027-.024-.08-.068-.115-.048-.06.033-.127.006-.163.025-.06.032-.077-.034-.141.012-.114.082-.126-.01-.234.005-.136.017-.226.198-.303.108-.071-.081-.145.058-.197.058-.036 0-.22.24-.3.02-.061-.163-.197.157-.27.048-.023-.034-.086.082-.126-.033-.01-.026 0-.06-.076-.02-.151.075-.098-.046-.146-.11-.059-.078-.08-.078-.048-.204.025-.1-.013-.25.14-.276.04-.007.076-.004.13-.113.068-.136.163-.07.146-.132-.025-.09.101-.213.16-.27.077-.078.179-.19.215-.3a.48.48 0 01.072-.107c.057-.064.074-.002.16-.034.062-.023.014.04.075-.053.02-.03.073-.002.133-.03.182-.085.2-.084.245-.282.008-.037.017-.066.056-.062.077.007.094-.04.142-.039.042.002.057-.022.08-.05.126-.165.195-.042.251-.055.043-.01.016-.108.13-.078.163.044.11-.039.214-.012.122.032.13.144.215.171.101.032.149.15.216.15.238-.005.166.173.316.244-.113-.122.008-.32-.248-.345-.057-.005-.077-.096-.162-.139-.103-.05-.092-.16-.277-.204.047-.032.062.003.09-.056.042-.084.065-.035.08-.086.015-.048.005-.075.117-.118.116-.044.228-.148.332-.142.092.005.13-.06.125-.143-.006-.086-.023-.204.156-.167.108.02.106.001.106-.077-.001-.078.028-.125.122-.122.07.003.137-.001.163-.088.02-.07.146-.087.213-.113.223-.086.254.038.315-.071.05-.09.138-.241.237-.133.02.022.038.038.105-.043.057-.067.19-.151.238-.036.02.046.061.092.097.033a.057.057 0 01.038-.03c.036-.007.055-.017.073-.026.154-.077.22-.072.15.095-.1.24.558-.146.375.114-.067.095.379.15.444.193.035.024.034.044.101.058.191.037.188.02.2.184.005.074.076.033.076.128 0 .405.332.201.386.302.009.017.023.032.056.032.104 0 .11-.022.158.068.02.036.035.054.09.072.083.029.078.039.047.105-.038.079.021.078.098.085.07.007.103.048.151.105.079.092.2.119.303.172.06.03.001.106.1.185.074.058.111.05.013.125-.417.317.154.23.314.526.035.066.083.148.151.224.16.174.07.223.156.331.05.063.011.048.092.104.191.133-.074.222-.224.161-.07-.027-.117-.064-.104-.02.01.038-.008.064-.037.092-.088.085.086.052.128.046.127-.02.467-.058.465.07-.004.167.095.205.176.216.13.018.167.043.239.17.064.116.102.054.203.157.068.07.153.195.014.214-.033.004-.07 0-.085.012a.28.28 0 01-.098.05c-.208.069.098.104.173.086.066-.015.147-.037.21-.02.041.011.045.06.173.081.043.007.025.075.004.122-.073.162.135.076.114.199-.013.07.076.185-.048.188-.04 0-.082-.011-.08.025.002.08-.117-.022-.224.088-.04.041-.134.07-.192-.007-.022-.029-.05-.052-.153-.017-.102.035-.171.154-.216-.03-.012-.05-.035-.05-.1-.074-.088-.033-.08-.196-.21-.09a.16.16 0 01-.15.028c-.101-.027-.214.01-.223-.072a.255.255 0 00-.266-.225c-.104.006-.195.025-.25-.104.04.148.146.158.269.158.102 0 .162.057.18.17.031.201.144.075.286.17.07.046.12.12.148.207.03.09.261-.018.199.196-.027.092-.076.127-.171.201-.282.223-.352.003-.436.181-.043.093-.044.024-.138.07-.155.073-.254-.098-.367-.035-.128.071-.118-.061-.248.028-.107.073-.217-.056-.268.145-.044.172-.227.176-.31.084-.133-.147-.093.173-.255.041-.086-.07-.15.032-.276.034-.233.004-.344-.214-.458-.081-.135.156-.233-.024-.235-.184-.002-.163-.548-.109-.834-.194-.16-.047-.658.01-.495-.265-.262.296.321.277.48.345.096.04.173.072.266.086.091.225.15.468.16.764.03-.162.037-.329.02-.492-.03-.29.17.144.194.207.13.341-.016.968-.344 1.157a2.293 2.293 0 00-.396-.751c.18.297.434.904.23 1.251a.74.74 0 01-.386-.366c.053.253.29.533.575.44.498-.161.496.177 1.156.233.48.084 1.165 0 1.492.028.179.015.93.15.926.352-.013.84-.308.883-1.084.963-.45.046-.799.064-1.284.084a44.096 44.096 0 01-3.429-.002c-.51-.022-.755-.026-1.297-.103-.541-.076-.838-.275-.83-.9.004-.231.638-.451.845-.476.245-.03.636.003.99-.089.372-.096.527-.16.8-.385zm3.766-4.59c-.117-.033-.035-.106-.238-.012-.12.056-.137-.098-.258-.07-.12.027-.17-.096-.35-.127-.225-.039-.063-.1-.418-.024-.068.014-.126-.069-.339-.04-.25.035-.162.064-.313-.087-.192-.19-.344-.062-.54-.14.151.127.259.015.438.168-.17.105-.369.609-.678.64.337.082.5.269.808.314.356.051.622.089.812.402.212.352.31.15.615.128.194-.013.199-.14.23-.275.045-.186.09-.194.22-.219.15-.028.114-.07.075-.118-.106-.13.013-.157.103-.185.156-.049.03-.057.03-.127-.196-.067-.045-.164.064-.206.119.079.17.066.223.055.077-.016.128.023.193-.022-.096.012-.115-.027-.196-.015-.036.006-.08.008-.154-.04-.127-.082-.19.036-.327 0zM9.588 8.165l-.769-.414c-.926-.498-1.348.238-1.646 1.044l-.54.554c.387-.256.703-.541 1.11-.539.064 0 1.067.368.906-.07-.03-.078.063-.04.088-.152.028-.129.038-.107.137-.025.062.052.149.086.122-.036-.011-.055-.027-.104.197-.003.107.047.067-.049.214-.068.204-.026.16-.236.257-.265.053-.017.107.043.207-.058.035-.036.077-.068.164-.044-.1-.055-.155-.01-.206.023-.103.067-.143-.028-.241.053zM8.017 6.707c.112-.015.225-.027.34-.035a.09.09 0 00.057-.113.204.204 0 01.103-.157L8.516 6.4c-.182 0-.329.075-.515.16-.037.017-.017.084-.083.161a.194.194 0 01-.142.179.094.094 0 00-.063.034.09.09 0 00-.018.07.169.169 0 01-.195.047c-.141-.059-.246-.05-.316.027a.258.258 0 01.28.011c.095.05.212.023.275-.062a.095.095 0 01.089-.075c.1-.04.162-.122.189-.245z", clipRule: "evenodd" })] }));
+};
+exports.default = SenseiLogo;
+//# sourceMappingURL=index.js.map

package/dist/cjs/sensei-logo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/sensei-logo/index.tsx"],"names":[],"mappings":";;;AAKA,MAAM,UAAU,GAAqC,CAAE,EACtD,SAAS,GAAG,aAAa,EACzB,IAAI,GAAG,EAAE,GACT,EAAG,EAAE;IACL,OAAO,CACN,iCACC,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAG,SAAS,EACrB,KAAK,EAAG,IAAI,EACZ,MAAM,EAAG,IAAI,EACb,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,aAEnB,mCAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAU,EACpD,iCACC,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uiKAAuiK,EACziK,QAAQ,EAAC,SAAS,GACX,IACH,CACN,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/dist/cjs/setup-tailored-site-after-creation.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupSiteAfterCreation = exports.base64ImageToBlob = void 0;
+const tslib_1 = require("tslib");
+const calypso_analytics_1 = require("@automattic/calypso-analytics");
+const data_stores_1 = require("@automattic/data-stores");
+const data_1 = require("@wordpress/data");
+const wpcom_proxy_request_1 = tslib_1.__importDefault(require("wpcom-proxy-request"));
+const utils_1 = require("./utils");
+const ONBOARD_STORE = data_stores_1.Onboard.register();
+// `client_id` and `client_secret` are only needed when signing up users.
+const SITE_STORE = data_stores_1.Site.register({ client_id: '', client_secret: '' });
+const base64ImageToBlob = (base64String) => {
+    // extract content type and base64 payload from original string
+    const pos = base64String.indexOf(';base64,');
+    const type = base64String.substring(5, pos);
+    const b64 = base64String.substr(pos + 8);
+    // decode base64
+    const imageContent = atob(b64);
+    // create an ArrayBuffer and a view (as unsigned 8-bit)
+    const buffer = new ArrayBuffer(imageContent.length);
+    const view = new Uint8Array(buffer);
+    // fill the view, using the decoded base64
+    for (let n = 0; n < imageContent.length; n++) {
+        view[n] = imageContent.charCodeAt(n);
+    }
+    // convert ArrayBuffer to Blob
+    return new Blob([buffer], { type: type });
+};
+exports.base64ImageToBlob = base64ImageToBlob;
+function setupSiteAfterCreation({ siteId, flowName }) {
+    // const { resetOnboardStore } = dispatch( ONBOARD_STORE );
+    const goals = (0, data_1.select)(ONBOARD_STORE).getGoals();
+    const selectedDesign = (0, data_1.select)(ONBOARD_STORE).getSelectedDesign();
+    const siteTitle = (0, data_1.select)(ONBOARD_STORE).getSelectedSiteTitle();
+    const siteDescription = (0, data_1.select)(ONBOARD_STORE).getSelectedSiteDescription();
+    const siteLogo = (0, data_1.select)(ONBOARD_STORE).getSelectedSiteLogo();
+    if (siteId && flowName) {
+        const formData = [];
+        const settings = {
+            blogname: siteTitle,
+            blogdescription: siteDescription,
+        };
+        const promises = [];
+        if ((0, utils_1.isNewsletterOrLinkInBioFlow)(flowName) || (0, utils_1.isFreeFlow)(flowName)) {
+            // link-in-bio and link-in-bio-tld are considered the same intent.
+            if ((0, utils_1.isLinkInBioFlow)(flowName) || (0, utils_1.isFreeFlow)(flowName)) {
+                settings.site_intent = (0, utils_1.isLinkInBioFlow)(flowName) ? utils_1.LINK_IN_BIO_FLOW : utils_1.FREE_FLOW;
+                if (selectedDesign && selectedDesign.is_virtual) {
+                    const { assembleSite } = (0, data_1.dispatch)(SITE_STORE);
+                    promises.push((0, wpcom_proxy_request_1.default)({
+                        path: `/sites/${encodeURIComponent(siteId)}/themes?status=active`,
+                        apiNamespace: 'wp/v2',
+                    }).then((activeThemes) => {
+                        assembleSite(String(siteId), activeThemes[0].stylesheet, {
+                            homeHtml: selectedDesign.recipe?.pattern_html,
+                            headerHtml: selectedDesign.recipe?.header_html,
+                            footerHtml: selectedDesign.recipe?.footer_html,
+                            siteSetupOption: 'assembler-virtual-theme',
+                        });
+                    }));
+                }
+            }
+            else {
+                settings.site_intent = flowName;
+            }
+            settings.launchpad_screen = 'full';
+        }
+        // Newsletter flow sets "paid-newsletter" goal as an indication to setup paid newsletter later on
+        if ((0, utils_1.isNewsletterFlow)(flowName) && goals && goals.length > 0) {
+            settings.site_goals = Array.from(goals);
+        }
+        formData.push(['settings', JSON.stringify(settings)]);
+        if (siteLogo) {
+            formData.push([
+                'site_icon',
+                new File([(0, exports.base64ImageToBlob)(siteLogo)], 'site-logo.png'),
+            ]);
+        }
+        promises.push((0, wpcom_proxy_request_1.default)({
+            path: `/sites/${siteId}/onboarding-customization`,
+            method: 'POST',
+            apiNamespace: 'wpcom/v2',
+            apiVersion: '2',
+            formData,
+        }).then(() => {
+            (0, calypso_analytics_1.recordTracksEvent)('calypso_signup_site_options_submit', {
+                has_site_title: !!siteTitle,
+                has_tagline: !!siteDescription,
+            });
+            /**
+             * We need to wait the site being created, then go to checkout and wait for the user
+             * to buy the plan before we can set a premium theme to the site. If we reset the store
+             * here we loose this information.
+             */
+            // resetOnboardStore();
+        }));
+        if ((0, utils_1.isFreeFlow)(flowName)) {
+            if (siteTitle || siteDescription || siteLogo) {
+                promises.push((0, data_stores_1.updateLaunchpadSettings)(siteId, {
+                    checklist_statuses: { setup_free: true },
+                }));
+            }
+        }
+        return Promise.all(promises);
+    }
+}
+exports.setupSiteAfterCreation = setupSiteAfterCreation;
+//# sourceMappingURL=setup-tailored-site-after-creation.js.map

package/dist/cjs/setup-tailored-site-after-creation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-tailored-site-after-creation.js","sourceRoot":"","sources":["../../src/setup-tailored-site-after-creation.ts"],"names":[],"mappings":";;;;AAAA,qEAAkE;AAClE,yDAMiC;AACjC,0CAAmD;AACnD,sFAA+C;AAC/C,mCAOiB;AAGjB,MAAM,aAAa,GAAG,qBAAO,CAAC,QAAQ,EAAE,CAAC;AACzC,yEAAyE;AACzE,MAAM,UAAU,GAAG,kBAAI,CAAC,QAAQ,CAAE,EAAE,SAAS,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,CAAE,CAAC;AAElE,MAAM,iBAAiB,GAAG,CAAE,YAAoB,EAAG,EAAE;IAC3D,+DAA+D;IAC/D,MAAM,GAAG,GAAG,YAAY,CAAC,OAAO,CAAE,UAAU,CAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,YAAY,CAAC,SAAS,CAAE,CAAC,EAAE,GAAG,CAAE,CAAC;IAC9C,MAAM,GAAG,GAAG,YAAY,CAAC,MAAM,CAAE,GAAG,GAAG,CAAC,CAAE,CAAC;IAE3C,gBAAgB;IAChB,MAAM,YAAY,GAAG,IAAI,CAAE,GAAG,CAAE,CAAC;IAEjC,uDAAuD;IACvD,MAAM,MAAM,GAAG,IAAI,WAAW,CAAE,YAAY,CAAC,MAAM,CAAE,CAAC;IACtD,MAAM,IAAI,GAAG,IAAI,UAAU,CAAE,MAAM,CAAE,CAAC;IAEtC,0CAA0C;IAC1C,KAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAG,CAAC;QAChD,IAAI,CAAE,CAAC,CAAE,GAAG,YAAY,CAAC,UAAU,CAAE,CAAC,CAAE,CAAC;IAC1C,CAAC;IAED,8BAA8B;IAC9B,OAAO,IAAI,IAAI,CAAE,CAAE,MAAM,CAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAE,CAAC;AAC/C,CAAC,CAAC;AApBW,QAAA,iBAAiB,qBAoB5B;AAOF,SAAgB,sBAAsB,CAAE,EAAE,MAAM,EAAE,QAAQ,EAA8B;IACvF,2DAA2D;IAC3D,MAAM,KAAK,GAAK,IAAA,aAAM,EAAE,aAAa,CAAqB,CAAC,QAAQ,EAAE,CAAC;IACtE,MAAM,cAAc,GAAK,IAAA,aAAM,EAAE,aAAa,CAAqB,CAAC,iBAAiB,EAAE,CAAC;IACxF,MAAM,SAAS,GAAK,IAAA,aAAM,EAAE,aAAa,CAAqB,CAAC,oBAAoB,EAAE,CAAC;IACtF,MAAM,eAAe,GAAK,IAAA,aAAM,EAAE,aAAa,CAAqB,CAAC,0BAA0B,EAAE,CAAC;IAClG,MAAM,QAAQ,GAAK,IAAA,aAAM,EAAE,aAAa,CAAqB,CAAC,mBAAmB,EAAE,CAAC;IAEpF,IAAK,MAAM,IAAI,QAAQ,EAAG,CAAC;QAC1B,MAAM,QAAQ,GAA0B,EAAE,CAAC;QAC3C,MAAM,QAAQ,GAMV;YACH,QAAQ,EAAE,SAAS;YACnB,eAAe,EAAE,eAAe;SAChC,CAAC;QAEF,MAAM,QAAQ,GAAG,EAAE,CAAC;QAEpB,IAAK,IAAA,mCAA2B,EAAE,QAAQ,CAAE,IAAI,IAAA,kBAAU,EAAE,QAAQ,CAAE,EAAG,CAAC;YACzE,kEAAkE;YAClE,IAAK,IAAA,uBAAe,EAAE,QAAQ,CAAE,IAAI,IAAA,kBAAU,EAAE,QAAQ,CAAE,EAAG,CAAC;gBAC7D,QAAQ,CAAC,WAAW,GAAG,IAAA,uBAAe,EAAE,QAAQ,CAAE,CAAC,CAAC,CAAC,wBAAgB,CAAC,CAAC,CAAC,iBAAS,CAAC;gBAClF,IAAK,cAAc,IAAI,cAAc,CAAC,UAAU,EAAG,CAAC;oBACnD,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,eAAQ,EAAE,UAAU,CAAiB,CAAC;oBAC/D,QAAQ,CAAC,IAAI,CACZ,IAAA,6BAAY,EAAmB;wBAC9B,IAAI,EAAE,UAAW,kBAAkB,CAAE,MAAM,CAAG,uBAAuB;wBACrE,YAAY,EAAE,OAAO;qBACrB,CAAE,CAAC,IAAI,CAAE,CAAE,YAAY,EAAG,EAAE;wBAC5B,YAAY,CAAE,MAAM,CAAE,MAAM,CAAE,EAAE,YAAY,CAAE,CAAC,CAAE,CAAC,UAAU,EAAE;4BAC7D,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,YAAY;4BAC7C,UAAU,EAAE,cAAc,CAAC,MAAM,EAAE,WAAW;4BAC9C,UAAU,EAAE,cAAc,CAAC,MAAM,EAAE,WAAW;4BAC9C,eAAe,EAAE,yBAAyB;yBAC1C,CAAE,CAAC;oBACL,CAAC,CAAE,CACH,CAAC;gBACH,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,QAAQ,CAAC,WAAW,GAAG,QAAQ,CAAC;YACjC,CAAC;YAED,QAAQ,CAAC,gBAAgB,GAAG,MAAM,CAAC;QACpC,CAAC;QAED,iGAAiG;QACjG,IAAK,IAAA,wBAAgB,EAAE,QAAQ,CAAE,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAG,CAAC;YACjE,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAE,KAAK,CAAE,CAAC;QAC3C,CAAC;QAED,QAAQ,CAAC,IAAI,CAAE,CAAE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAE,QAAQ,CAAE,CAAE,CAAE,CAAC;QAE5D,IAAK,QAAQ,EAAG,CAAC;YAChB,QAAQ,CAAC,IAAI,CAAE;gBACd,WAAW;gBACX,IAAI,IAAI,CAAE,CAAE,IAAA,yBAAiB,EAAE,QAAQ,CAAE,CAAE,EAAE,eAAe,CAAE;aAC9D,CAAE,CAAC;QACL,CAAC;QAED,QAAQ,CAAC,IAAI,CACZ,IAAA,6BAAY,EAAyB;YACpC,IAAI,EAAE,UAAW,MAAO,2BAA2B;YACnD,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,UAAU;YACxB,UAAU,EAAE,GAAG;YACf,QAAQ;SACR,CAAE,CAAC,IAAI,CAAE,GAAG,EAAE;YACd,IAAA,qCAAiB,EAAE,oCAAoC,EAAE;gBACxD,cAAc,EAAE,CAAC,CAAE,SAAS;gBAC5B,WAAW,EAAE,CAAC,CAAE,eAAe;aAC/B,CAAE,CAAC;YACJ;;;;eAIG;YACH,uBAAuB;QACxB,CAAC,CAAE,CACH,CAAC;QAEF,IAAK,IAAA,kBAAU,EAAE,QAAQ,CAAE,EAAG,CAAC;YAC9B,IAAK,SAAS,IAAI,eAAe,IAAI,QAAQ,EAAG,CAAC;gBAChD,QAAQ,CAAC,IAAI,CACZ,IAAA,qCAAuB,EAAE,MAAM,EAAE;oBAChC,kBAAkB,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE;iBACxC,CAAE,CACH,CAAC;YACH,CAAC;QACF,CAAC;QAED,OAAO,OAAO,CAAC,GAAG,CAAE,QAAQ,CAAE,CAAC;IAChC,CAAC;AACF,CAAC;AAjGD,wDAiGC"}

package/dist/cjs/step-container/index.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+const action_buttons_1 = tslib_1.__importDefault(require("../action-buttons"));
+const sensei_logo_1 = tslib_1.__importDefault(require("../sensei-logo"));
+const step_navigation_link_1 = tslib_1.__importDefault(require("../step-navigation-link"));
+const videopress_logo_1 = tslib_1.__importDefault(require("../videopress-logo"));
+require("./style.scss");
+const StepContainer = ({ stepContent, stepName, shouldHideNavButtons, shouldStickyNavButtons, hasStickyNavButtonsPadding, hideBack, backLabelText, hideSkip, skipLabelText, skipButtonAlign = 'top', skipHeadingText, hideNext = true, nextLabelText, formattedHeader, headerImageUrl, headerButton, hideFormattedHeader, className, isHorizontalLayout, isFullLayout, isWideLayout, isExtraWideLayout, isExternalBackUrl, isLargeSkipLayout, customizedActionButtons, goBack, goNext, flowName, intent, stepSectionName, recordTracksEvent, showHeaderJetpackPowered, showHeaderWooCommercePowered, showJetpackPowered, showSenseiPowered, showVideoPressPowered, showFooterWooCommercePowered, }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    const recordClick = (direction, stepSectionName) => {
+        const tracksProps = {
+            flow: flowName,
+            step: stepName,
+            intent: intent,
+        };
+        // We don't need to track if we are in the sub-steps since it's not really going back a step
+        if (direction === 'back' && !stepSectionName) {
+            recordTracksEvent('calypso_signup_previous_step_button_click', tracksProps);
+        }
+        if (direction === 'forward') {
+            recordTracksEvent('calypso_signup_skip_step', tracksProps);
+        }
+    };
+    function BackButton() {
+        // Hide back button if goBack is falsy, it won't do anything in that case.
+        if (shouldHideNavButtons || !goBack) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(step_navigation_link_1.default, { direction: "back", handleClick: goBack, label: backLabelText, hasBackIcon: true, rel: isExternalBackUrl ? 'external' : '', recordClick: () => recordClick('back', stepSectionName) }));
+    }
+    function SkipButton() {
+        if (shouldHideNavButtons || !goNext) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__skip-wrapper", children: [skipHeadingText && ((0, jsx_runtime_1.jsx)("div", { className: "step-container__skip-heading", children: skipHeadingText })), (0, jsx_runtime_1.jsx)(step_navigation_link_1.default, { direction: "forward", handleClick: goNext, label: skipLabelText, cssClass: (0, clsx_1.default)('step-container__navigation-link', 'has-underline', {
+                        'has-skip-heading': skipHeadingText,
+                    }), borderless: true, recordClick: () => recordClick('forward') })] }));
+    }
+    function NextButton() {
+        if (shouldHideNavButtons || !goNext) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(step_navigation_link_1.default, { direction: "forward", handleClick: goNext, label: nextLabelText || translate('Continue'), cssClass: "step-container__navigation-link", borderless: false, primary: true }));
+    }
+    const classes = (0, clsx_1.default)('step-container', className, flowName, stepName, {
+        'is-horizontal-layout': isHorizontalLayout,
+        'is-wide-layout': isWideLayout,
+        'is-full-layout': isFullLayout,
+        'is-large-skip-layout': isLargeSkipLayout,
+        'has-navigation': !shouldHideNavButtons,
+        'is-extra-wide-layout': isExtraWideLayout,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsxs)(action_buttons_1.default, { className: (0, clsx_1.default)('step-container__navigation', {
+                    'should-hide-nav-buttons': shouldHideNavButtons,
+                    'should-sticky-nav-buttons': shouldStickyNavButtons,
+                    'has-sticky-nav-buttons-padding': hasStickyNavButtonsPadding,
+                }), children: [shouldStickyNavButtons && ((0, jsx_runtime_1.jsx)(components_1.WordPressLogo, { className: "step-container__navigation-logo", size: 24 })), !hideBack && (0, jsx_runtime_1.jsx)(BackButton, {}), !hideSkip && skipButtonAlign === 'top' && (0, jsx_runtime_1.jsx)(SkipButton, {}), !hideNext && (0, jsx_runtime_1.jsx)(NextButton, {}), customizedActionButtons] }), !hideFormattedHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header", children: [formattedHeader, headerImageUrl && ((0, jsx_runtime_1.jsx)("div", { className: "step-container__header-image", children: (0, jsx_runtime_1.jsx)("img", { src: headerImageUrl, alt: "" }) })), headerButton && (0, jsx_runtime_1.jsx)("div", { className: "step-container__header-button", children: headerButton }), showHeaderJetpackPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header-jetpack-powered", children: [(0, jsx_runtime_1.jsx)(components_1.JetpackLogo, { monochrome: true, size: 18 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Jetpack powered') })] })), showHeaderWooCommercePowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__header-woocommerce-powered", children: [(0, jsx_runtime_1.jsx)(components_1.WooCommerceWooLogo, {}), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('WooCommerce powered') })] }))] })), (0, jsx_runtime_1.jsx)("div", { className: "step-container__content", children: stepContent }), !hideSkip && skipButtonAlign === 'bottom' && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__buttons", children: [isLargeSkipLayout && (0, jsx_runtime_1.jsx)("hr", { className: "step-container__skip-hr" }), (0, jsx_runtime_1.jsx)(SkipButton, {})] })), showJetpackPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__jetpack-powered", children: [(0, jsx_runtime_1.jsx)(components_1.JetpackLogo, { monochrome: true, size: 18 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Jetpack powered') })] })), showFooterWooCommercePowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__woocommerce-powered", children: [(0, jsx_runtime_1.jsx)(components_1.WooCommerceWooLogo, {}), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('WooCommerce powered') })] })), showSenseiPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__sensei-powered", children: [(0, jsx_runtime_1.jsx)(sensei_logo_1.default, {}), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Powered by Sensei') })] })), showVideoPressPowered && ((0, jsx_runtime_1.jsxs)("div", { className: "step-container__videopress-powered", children: [(0, jsx_runtime_1.jsx)(videopress_logo_1.default, { size: 24 }), " ", (0, jsx_runtime_1.jsx)("span", { children: translate('Powered by VideoPress') })] }))] }));
+};
+exports.default = StepContainer;
+//# sourceMappingURL=index.js.map

package/dist/cjs/step-container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step-container/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/step-container/style.scss

@@ -0,0 +1,304 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "../../styles/mixins.scss";
+
+/**
+ *	General
+ */
+.step-container {
+	max-width: 960px;
+	margin: 0 auto;
+
+	// Some steps (like plans) need a larger
+	// width column.
+	&.is-wide-layout {
+		max-width: 1040px;
+	}
+
+	// Some steps (like courses) have their width limitation
+	&.is-full-layout {
+		max-width: unset;
+	}
+
+	// Some steps (intent gathering) use a horizontal layout
+	&.is-horizontal-layout {
+		align-items: flex-start;
+		justify-content: space-between;
+		margin-top: 28px;
+		max-width: 1024px;
+		padding: 0 20px;
+
+		&.has-navigation {
+			padding-bottom: 60px;
+		}
+
+		@include break-small {
+			margin-top: 25vh;
+			display: flex;
+
+			.step-container__header {
+				margin-top: 0;
+				padding-inline-end: 20px;
+			}
+		}
+	}
+
+	.step-container__buttons {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.step-container__skip-hr {
+		background: var(--color-primary-light);
+		max-width: 270px;
+		margin-bottom: 50px;
+		margin-top: -20px;
+
+		@include break-small {
+			margin: 30px auto;
+		}
+	}
+
+	.is-large-skip-layout .step-container__buttons {
+		margin-bottom: 34px;
+
+		@include break-small {
+			margin-bottom: 14px;
+		}
+	}
+
+	/**
+	 *	Header
+	 */
+	.step-container__header {
+		margin-bottom: 32px;
+		margin-top: 0;
+		display: block;
+		justify-content: space-between;
+		align-items: center;
+
+		.formatted-header {
+			margin: 0;
+			flex-grow: 1;
+
+			.formatted-header__title {
+				@include onboarding-font-recoleta;
+				color: var(--studio-gray-100);
+				letter-spacing: 0.2px;
+				font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */
+				font-weight: 400;
+				padding: 0;
+				margin: 0;
+
+				@include break-xlarge {
+					font-size: 2.75rem;
+				}
+			}
+
+			.formatted-header__subtitle {
+				padding: 0;
+				text-align: start;
+				color: var(--studio-gray-60);
+				font-size: 1rem;
+				margin-top: 16px;
+				line-height: 24px;
+
+				&.is-center-align {
+					text-align: center;
+				}
+
+				@include break-small {
+					margin-top: 8px;
+				}
+			}
+		}
+
+		.step-container__header-button {
+			@include break-small {
+				flex-basis: 100%;
+			}
+		}
+
+		.step-container__header-image {
+			margin-top: 64px;
+			display: none;
+
+			@include break-small {
+				display: block;
+
+				// Fix overflow caused by header_image
+				img {
+					height: auto;
+					max-width: 100%;
+				}
+			}
+		}
+
+		@include break-small {
+			flex-wrap: wrap;
+			margin-top: 24px;
+		}
+	}
+
+	/**
+	 *	Navigation
+	 */
+	.step-container__navigation {
+		pointer-events: none;
+		* {
+			pointer-events: auto;
+		}
+	}
+	.step-container__navigation.action-buttons {
+		background-color: $white;
+		height: 60px;
+		align-items: center;
+		justify-content: space-between;
+		display: flex;
+		font-size: 0.875rem;
+		position: fixed;
+		z-index: 30;
+		inset-inline-start: 0;
+		inset-inline-end: 0;
+		bottom: 0;
+		padding: 0 20px;
+		margin: 0;
+		border-top: none;
+		box-shadow: inset 0 1px 0 #e2e4e7;
+
+		&:empty {
+			display: none;
+		}
+
+		&.should-hide-nav-buttons {
+			justify-content: flex-end;
+		}
+
+		.step-container__navigation-link {
+			font-size: 0.875rem;
+			font-weight: 500;
+
+			&.button.is-primary {
+				border-radius: 4px;
+				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+			}
+
+			&.has-underline {
+				text-decoration: underline;
+			}
+
+			&.has-skip-heading {
+				transform: translateY(-3px);
+				// override unessecary super specificity added by another class
+				padding-top: 0 !important;
+			}
+		}
+
+		.step-container__navigation-link.forward,
+		.step-container__skip-wrapper {
+			margin-inline-start: auto;
+		}
+
+		.step-container__skip-heading {
+			color: var(--color-text-inverted);
+		}
+
+		.step-container__navigation-logo {
+			display: none;
+			// Align with wordpress logo in signup-header
+			margin-top: 1px;
+			margin-inline-end: 24px;
+			fill: var(--color-text);
+			stroke: var(--color-text);
+
+			@include break-small {
+				display: block;
+			}
+		}
+
+		@include break-small {
+			position: absolute;
+			top: 8px;
+			inset-inline-start: 72px;
+			inset-inline-end: 24px;
+			// Align with wordpress logo in signup-header
+			padding: 1px 0 0;
+			background-color: transparent;
+			border: none;
+			box-shadow: none;
+
+			&.should-sticky-nav-buttons {
+				position: fixed;
+				inset-inline-start: 0;
+				inset-inline-end: 0;
+				padding-inline-start: 24px;
+				padding-inline-end: 24px;
+				background-color: $white;
+			}
+
+			&.has-sticky-nav-buttons-padding {
+				padding-bottom: 48px;
+			}
+		}
+	}
+
+	/**
+	 *	Content
+	 */
+	.step-container__content {
+		margin-top: 0;
+		display: block;
+		min-height: 65vh;
+
+		@supports ( min-height: 65svh ) {
+			min-height: calc(65svh - 50px);
+		}
+	}
+
+	/**
+	 * Jetpack, Sensei and VideoPress Powered
+	 */
+	.step-container__jetpack-powered,
+	.step-container__header-jetpack-powered,
+	.step-container__woocommerce-powered,
+	.step-container__header-woocommerce-powered,
+	.step-container__sensei-powered,
+	.step-container__videopress-powered {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		text-align: center;
+		font-family: "SF Pro Text", $sans;
+		font-size: $font-body-extra-small;
+		font-weight: 400;
+		line-height: 20px;
+
+		svg {
+			margin-inline-end: 6px;
+		}
+	}
+
+	.step-container__jetpack-powered {
+		margin: 1rem 0;
+		width: 100%;
+	}
+
+	.step-container__header-jetpack-powered {
+		position: absolute;
+		top: 32px;
+		visibility: hidden;
+
+		@include break-small {
+			visibility: visible;
+		}
+	}
+
+	.step-container__sensei-powered {
+		padding-bottom: 24px;
+
+		svg {
+			margin-inline-end: 8px;
+		}
+	}
+}

package/dist/cjs/step-navigation-link/index.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("@automattic/components");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const i18n_calypso_1 = require("i18n-calypso");
+require("./style.scss");
+const StepNavigationLink = ({ direction, handleClick, label, hasBackIcon, hasForwardIcon, primary, borderless = true, cssClass, rel, recordClick, }) => {
+    const translate = (0, i18n_calypso_1.useTranslate)();
+    let backGridicon;
+    let text;
+    let forwardGridicon;
+    if (direction === 'back') {
+        backGridicon = hasBackIcon ? (0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "chevron-left", size: 18 }) : null;
+        if (label) {
+            text = label;
+        }
+        else {
+            text = translate('Back');
+        }
+    }
+    else if (direction === 'forward') {
+        forwardGridicon = hasForwardIcon ? (0, jsx_runtime_1.jsx)(components_1.Gridicon, { icon: "chevron-right", size: 18 }) : null;
+        text = label ? label : translate('Skip for now');
+    }
+    const buttonClasses = (0, clsx_1.default)('navigation-link', cssClass);
+    const onClick = () => {
+        recordClick?.();
+        handleClick?.();
+    };
+    return ((0, jsx_runtime_1.jsxs)(components_1.Button, { primary: primary, borderless: borderless, className: buttonClasses, onClick: onClick, rel: rel, children: [backGridicon, text, forwardGridicon] }));
+};
+exports.default = StepNavigationLink;
+//# sourceMappingURL=index.js.map

package/dist/cjs/step-navigation-link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step-navigation-link/index.tsx"],"names":[],"mappings":";;;;AAAA,uDAA0D;AAC1D,wDAAwB;AACxB,+CAA6D;AAC7D,wBAAsB;AAetB,MAAM,kBAAkB,GAAsB,CAAE,EAC/C,SAAS,EACT,WAAW,EACX,KAAK,EACL,WAAW,EACX,cAAc,EACd,OAAO,EACP,UAAU,GAAG,IAAI,EACjB,QAAQ,EACR,GAAG,EACH,WAAW,GACX,EAAG,EAAE;IACL,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,IAAI,YAAY,CAAC;IACjB,IAAI,IAAI,CAAC;IACT,IAAI,eAAe,CAAC;IAEpB,IAAK,SAAS,KAAK,MAAM,EAAG,CAAC;QAC5B,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,uBAAC,qBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAG,EAAE,GAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QACjF,IAAK,KAAK,EAAG,CAAC;YACb,IAAI,GAAG,KAAK,CAAC;QACd,CAAC;aAAM,CAAC;YACP,IAAI,GAAG,SAAS,CAAE,MAAM,CAAE,CAAC;QAC5B,CAAC;IACF,CAAC;SAAM,IAAK,SAAS,KAAK,SAAS,EAAG,CAAC;QACtC,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,uBAAC,qBAAQ,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAG,EAAE,GAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QACxF,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAE,cAAc,CAAE,CAAC;IACpD,CAAC;IAED,MAAM,aAAa,GAAG,IAAA,cAAI,EAAE,iBAAiB,EAAE,QAAQ,CAAE,CAAC;IAE1D,MAAM,OAAO,GAAG,GAAG,EAAE;QACpB,WAAW,EAAE,EAAE,CAAC;QAChB,WAAW,EAAE,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACN,wBAAC,mBAAM,IACN,OAAO,EAAG,OAAO,EACjB,UAAU,EAAG,UAAU,EACvB,SAAS,EAAG,aAAa,EACzB,OAAO,EAAG,OAAO,EACjB,GAAG,EAAG,GAAG,aAEP,YAAY,EACZ,IAAI,EACJ,eAAe,IACT,CACT,CAAC;AACH,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}