feat: updated schematic accounts (#149)

* feat: update schematics with reworked storefront including account pages

* feat: updated deps

* chore: changesets

* fix: read me should have the correct project name

* fix: typo on template ext

* fix: payment schematics corrected for ep and manual

* fix: copied over the correct layout

* feat: added powered by stripe to ep payments label

* chore: changeset

* feat: using listr tasks to manage configuration

- added self sign up tasks
- converted old approach to use tasks

* chore: changeset

* refactor: remove unused module

* fix: updated error message to match function

* feat: algolia moved to listr style tasks

* feat: using ink alerts

* feat: moved git init to cli instead of schematics

* feat: migration to ink based errors

- moved logger over to ink based reporting
- added deployment onto summary of scaffolding

* feat: embedded authentication has to be done to enable the profile fetching of brand-new users

* feat: removed the use of listr logger and replaced with output where needed

* feat: failed tasks don't impact other tasks and

* fix: moved algolia routes to the correct store sub folder

* feat: removed store_type as the property is going away

* test: tests updated to use snapshots for file changes

* test: added search modal back into header template

* feat: removed search modal as it's not used currently

* feat: updated snapshots and added script to help update

* refactor: removed temp command for testing

* feat: support skipping config

* chore: changeset

* feat: removed unused root dependency

* build: updated algolia example config

* feat: bump moltin version

* feat: fix version numbers for instantsearch

* feat: generated latest examples

* chore: changeset

.changeset/angry-pianos-remain.md

@@ -0,0 +1,5 @@
+---
+"composable-cli": patch
+---
+
+Added powered by stripe to ep payments label

.changeset/gentle-waves-rest.md

@@ -0,0 +1,9 @@
+---
+"@elasticpath/react-shopper-hooks": patch
+"@elasticpath/composable-common": patch
+"composable-cli": patch
+"@elasticpath/d2c-schematics": patch
+"@elasticpath/shopper-common": patch
+---
+
+Bumped moltin/sdk version

.changeset/long-countries-design.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/composable-common": minor
+---
+
+Fix to authenticate new intergration hub tokens using the embedded authentication endpoint

.changeset/many-boats-pump.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": minor
+---
+
+Storefront now supports accounts and is moving towards the anders design

.changeset/quick-tables-destroy.md

@@ -0,0 +1,8 @@
+---
+"composable-cli": minor
+---
+
+Using listr tasks to manage configuration
+
+- added self sign up tasks
+- converted old approach to use tasks

examples/algolia/README.md

@@ -1,4 +1,4 @@
-# `BETA` Elastic Path D2C Starter Kit - mystorefront678
+# `BETA` Elastic Path D2C Starter Kit - algolia
 
 This project was generated with [Elastic Path Commerce Cloud CLI](https://www.elasticpath.com/).
 

examples/algolia/e2e/checkout-flow.spec.ts

@@ -0,0 +1,48 @@
+import { test } from "@playwright/test";
+import { createD2CProductDetailPage } from "./models/d2c-product-detail-page";
+import { client } from "./util/epcc-client";
+import { createD2CCartPage } from "./models/d2c-cart-page";
+import { createD2CCheckoutPage } from "./models/d2c-checkout-page";
+
+test.describe("Checkout flow", async () => {
+  test("should perform product checkout", async ({ page }) => {
+    const productDetailPage = createD2CProductDetailPage(page, client);
+    const cartPage = createD2CCartPage(page);
+    const checkoutPage = createD2CCheckoutPage(page);
+
+    /* Go to simple product page */
+    await productDetailPage.gotoSimpleProduct();
+
+    /* Add the product to cart */
+    await productDetailPage.addProductToCart();
+
+    /* Go to cart page and checkout */
+    await cartPage.goto();
+    await cartPage.checkoutCart();
+
+    /* Enter information */
+    await checkoutPage.enterInformation({
+      Email: { value: "[email protected]", fieldType: "input" },
+      "First Name": { value: "Jim", fieldType: "input" },
+      "Last Name": { value: "Brown", fieldType: "input" },
+      "Street Address": { value: "Main Street", fieldType: "input" },
+      "Extended Address": { value: "Extended Address", fieldType: "input" },
+      City: { value: "Brownsville", fieldType: "input" },
+      County: { value: "Brownsville County", fieldType: "input" },
+      Region: { value: "Browns", fieldType: "input" },
+      Postcode: { value: "ABC 123", fieldType: "input" },
+      Country: { value: "Algeria", fieldType: "select" },
+      "Phone Number": { value: "01234567891", fieldType: "input" },
+      "Additional Instructions": {
+        value: "This is some extra instructions.",
+        fieldType: "input",
+      },
+    });
+
+    await checkoutPage.checkout();
+    await checkoutPage.checkOrderComplete;
+
+    /* Continue Shopping */
+    await checkoutPage.continueShopping();
+  });
+});

examples/algolia/e2e/models/d2c-checkout-page.ts

@@ -0,0 +1,55 @@
+import type { Locator, Page } from "@playwright/test";
+import { fillAllFormFields, FormInput } from "../util/fill-form-field";
+import { expect } from "@playwright/test";
+import { enterPaymentInformation as _enterPaymentInformation } from "../util/enter-payment-information";
+
+export interface D2CCheckoutPage {
+  readonly page: Page;
+  readonly payNowBtn: Locator;
+  readonly checkoutBtn: Locator;
+  readonly goto: () => Promise<void>;
+  readonly enterInformation: (values: FormInput) => Promise<void>;
+  readonly checkout: () => Promise<void>;
+  readonly enterPaymentInformation: (values: FormInput) => Promise<void>;
+  readonly submitPayment: () => Promise<void>;
+  readonly checkOrderComplete: () => Promise<void>;
+  readonly continueShopping: () => Promise<void>;
+}
+
+export function createD2CCheckoutPage(page: Page): D2CCheckoutPage {
+  const payNowBtn = page.getByRole("button", { name: "Pay now" });
+  const checkoutBtn = page.getByRole("button", { name: "Checkout Now" });
+  const continueShoppingBtn = page.getByRole("button", {
+    name: "Continue Shopping",
+  });
+
+  return {
+    page,
+    payNowBtn,
+    checkoutBtn,
+    async goto() {
+      await page.goto(`/cart`);
+    },
+    async enterPaymentInformation(values: FormInput) {
+      await _enterPaymentInformation(page, values);
+    },
+    async enterInformation(values: FormInput) {
+      await fillAllFormFields(page, values);
+    },
+    async submitPayment() {
+      await payNowBtn.click();
+    },
+    async checkout() {
+      await checkoutBtn.click();
+    },
+    async checkOrderComplete() {
+      await page.getByText("Thank you for your order!");
+    },
+    async continueShopping() {
+      await continueShoppingBtn.click();
+      await expect(
+        page.getByRole("heading", { name: "Your Elastic Path storefront" }),
+      ).toBeVisible();
+    },
+  };
+}

examples/algolia/e2e/util/enter-payment-information.ts

@@ -0,0 +1,10 @@
+import { Page } from "@playwright/test";
+import { fillAllFormFields, FormInput } from "./fill-form-field";
+
+export async function enterPaymentInformation(page: Page, values: FormInput) {
+  const paymentIframe = await page
+    .locator('[id="payment-element"]')
+    .frameLocator("iframe");
+
+  await fillAllFormFields(paymentIframe, values);
+}

examples/algolia/e2e/util/gateway-check.ts

@@ -0,0 +1,13 @@
+import type { Moltin as EPCCClient } from "@moltin/sdk";
+
+export async function gatewayCheck(client: EPCCClient): Promise<boolean> {
+  try {
+    const gateways = await client.Gateways.All();
+    const epPaymentGateway = gateways.data.find(
+      (gateway) => gateway.slug === "elastic_path_payments_stripe",
+    )?.enabled;
+    return !!epPaymentGateway;
+  } catch (err) {
+    return false;
+  }
+}

examples/algolia/e2e/util/gateway-is-enabled.ts

@@ -0,0 +1,10 @@
+import { test } from "@playwright/test";
+import { gatewayCheck } from "./gateway-check";
+import { adminClient } from "./epcc-admin-client";
+
+export async function gatewayIsEnabled(): Promise<void> {
+  test.skip(
+    !(await gatewayCheck(adminClient)),
+    "Skipping tests because they payment gateway is not enabled.",
+  );
+}

examples/algolia/package.json

@@ -19,28 +19,45 @@
     "start:e2e": "NODE_ENV=test next start"
   },
   "dependencies": {
-    "@algolia/react-instantsearch-widget-color-refinement-list": "^1.4.7",
+    "@algolia/react-instantsearch-widget-color-refinement-list": "1.4.7",
     "@elasticpath/react-shopper-hooks": "workspace:*",
     "@elasticpath/shopper-common": "workspace:*",
+    "@floating-ui/react": "^0.26.3",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
-    "@moltin/sdk": "^27.0.0",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^3.3.2",
+    "@moltin/sdk": "^27.6.0",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@tanstack/react-query": "^5.17.15",
     "algoliasearch": "^4.14.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cookies-next": "^4.0.0",
     "focus-visible": "^5.2.0",
     "formik": "^2.2.9",
-    "instantsearch.js": "4.59.0",
+    "instantsearch.js": "4.64.0",
     "next": "^14.0.0",
     "pure-react-carousel": "^1.29.0",
     "rc-slider": "^10.3.0",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-instantsearch": "^7.2.0",
-    "react-instantsearch-nextjs": "^0.1.2",
+    "react-hook-form": "^7.49.0",
+    "react-instantsearch": "7.5.2",
+    "react-instantsearch-nextjs": "0.1.9",
     "react-toastify": "^9.1.3",
     "server-only": "^0.0.1",
+    "tailwind-clip-path": "^1.0.0",
+    "tailwind-merge": "^2.0.0",
     "zod": "^3.22.4",
     "zod-formik-adapter": "^1.2.0"
   },
@@ -72,6 +89,8 @@
     "tailwindcss": "^3.3.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.30",
-    "prettier-plugin-tailwindcss": "^0.5.4"
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "@tailwindcss/forms": "^0.5.7",
+    "tailwindcss-animate": "^1.0.7"
   }
 }

examples/algolia/src/app/(auth)/account-memeber-credentials-schema.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+
+export const accountMemberCredentialSchema = z.object({
+  account_id: z.string(),
+  account_name: z.string(),
+  expires: z.string(),
+  token: z.string(),
+  type: z.literal("account_management_authentication_token"),
+});
+
+export type AccountMemberCredential = z.infer<
+  typeof accountMemberCredentialSchema
+>;
+
+export const accountMemberCredentialsSchema = z.object({
+  accounts: z.record(z.string(), accountMemberCredentialSchema),
+  selected: z.string(),
+  accountMemberId: z.string(),
+});
+
+export type AccountMemberCredentials = z.infer<
+  typeof accountMemberCredentialsSchema
+>;