Skip to content

Commit

Permalink
added examples for Klevu and global services(to allow binding against…
Browse files Browse the repository at this point in the history
… a vercel environment variables not related to the demo)
  • Loading branch information
jimmy-ventura-elasticpath committed Sep 23, 2024
1 parent a2a6f45 commit da54bb0
Show file tree
Hide file tree
Showing 518 changed files with 29,724 additions and 1 deletion.
6 changes: 6 additions & 0 deletions examples/global-services/.composablerc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"version": 1,
"cli": {
"packageManager": "pnpm"
}
}
12 changes: 12 additions & 0 deletions examples/global-services/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"extends": ["next/core-web-vitals", "prettier"],
"plugins": ["react"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"react/jsx-curly-brace-presence": "error"
}
}
45 changes: 45 additions & 0 deletions examples/global-services/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.idea/

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
.env.*

# vercel
.vercel

# typescript
*.tsbuildinfo

# Being generated by the moltin js-sdk during dev server from server side requests
/localStorage

test-results
32 changes: 32 additions & 0 deletions examples/global-services/.lintstagedrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const path = require("path");

/**
* Using next lint with lint-staged requires this setup
* https://nextjs.org/docs/basic-features/eslint#lint-staged
*/

const buildEslintCommand = (filenames) =>
`next lint --fix --file ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(" --file ")}`;

/**
* () => "npm run type:check"
* needs to be a function because arguments are getting passed from lint-staged
* when those arguments get through to the "tsc" command that "npm run type:check"
* is calling the args cause "tsc" to ignore the tsconfig.json in our root directory.
* https://github.com/microsoft/TypeScript/issues/27379
*/
module.exports = {
"*.{js,jsx}": [
"npm run format:fix",
buildEslintCommand,
"npm run format:check",
],
"*.{ts,tsx}": [
"npm run format:fix",
() => "npm run type:check",
buildEslintCommand,
"npm run format:check",
],
};
1 change: 1 addition & 0 deletions examples/global-services/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
**/.next/**
1 change: 1 addition & 0 deletions examples/global-services/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
59 changes: 59 additions & 0 deletions examples/global-services/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# global-services Elastic Path storefront starter

This project was generated with [Composable CLI](https://www.npmjs.com/package/composable-cli).

This storefront accelerates the development of a direct-to-consumer ecommerce experience using Elastic Path's modular products.

## Tech Stack

- [Elastic Path](https://www.elasticpath.com/products): A family of composable products for businesses that need to quickly & easily create unique experiences and next-level customer engagements that drive revenue.

- [Next.js](https://nextjs.org/): a React framework for building static and server-side rendered applications

- [Tailwind CSS](https://tailwindcss.com/): enabling you to get started with a range of out the box components that are
easy to customize

- [Headless UI](https://headlessui.com/): completely unstyled, fully accessible UI components, designed to integrate
beautifully with Tailwind CSS.

- [Radix UI Primitives](https://www.radix-ui.com/primitives): Unstyled, accessible, open source React primitives for high-quality web apps and design systems.

- [Typescript](https://www.typescriptlang.org/): a typed superset of JavaScript that compiles to plain JavaScript

## Getting Started

Run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page will hot reload as you edit the file.

## Deployment

Deployment is typical for a Next.js site. We recommend using a provider
like [Netlify](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/)
or [Vercel](https://vercel.com/docs/frameworks/nextjs) to get full Next.js feature support.

## Current feature set reference

| **Feature** | **Notes** |
|------------------------------------------|-----------------------------------------------------------------------------------------------|
| PDP | Product Display Pages |
| PLP | Product Listing Pages. |
| EPCC PXM product variations | [Learn more](https://elasticpath.dev/docs/pxm/products/pxm-product-variations/pxm-variations) |
| EPCC PXM bundles | [Learn more](https://elasticpath.dev/docs/pxm/products/pxm-bundles/pxm-bundles) |
| EPCC PXM hierarchy-based navigation menu | Main site nav driven directly from your store's hierarchy and node structure |
| Prebuilt helper components | Some basic building blocks for typical ecommerce store features |
| Checkout | [Learn more](https://elasticpath.dev/docs/commerce-cloud/checkout/checkout-workflow) |
| Cart | [Learn more](https://elasticpath.dev/docs/commerce-cloud/carts/carts) |

41 changes: 41 additions & 0 deletions examples/global-services/e2e/checkout-flow.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
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 Address": { value: "[email protected]", fieldType: "input" },
"First Name": { value: "Jim", fieldType: "input" },
"Last Name": { value: "Brown", fieldType: "input" },
Address: { value: "Main Street", fieldType: "input" },
City: { value: "Brownsville", fieldType: "input" },
Region: { value: "Browns", fieldType: "input" },
Postcode: { value: "ABC 123", fieldType: "input" },
Country: { value: "Algeria", fieldType: "combobox" },
"Phone Number": { value: "01234567891", fieldType: "input" },
});

await checkoutPage.checkout();

/* Continue Shopping */
await checkoutPage.continueShopping();
});
});
10 changes: 10 additions & 0 deletions examples/global-services/e2e/home-page.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { test } from "@playwright/test";
import { createD2CHomePage } from "./models/d2c-home-page";
import { skipIfMissingCatalog } from "./util/missing-published-catalog";

test.describe("Home Page", async () => {
test("should load home page", async ({ page }) => {
const d2cHomePage = createD2CHomePage(page);
await d2cHomePage.goto();
});
});
23 changes: 23 additions & 0 deletions examples/global-services/e2e/models/d2c-cart-page.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import type { Locator, Page } from "@playwright/test";

export interface D2CCartPage {
readonly page: Page;
readonly checkoutBtn: Locator;
readonly goto: () => Promise<void>;
readonly checkoutCart: () => Promise<void>;
}

export function createD2CCartPage(page: Page): D2CCartPage {
const checkoutBtn = page.getByRole("link", { name: "Checkout" });

return {
page,
checkoutBtn,
async goto() {
await page.goto(`/cart`);
},
async checkoutCart() {
await checkoutBtn.click();
},
};
}
48 changes: 48 additions & 0 deletions examples/global-services/e2e/models/d2c-checkout-page.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import type { Locator, Page } from "@playwright/test";
import { fillAllFormFields, FormInput } from "../util/fill-form-field";
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 continueShopping: () => Promise<void>;
}

export function createD2CCheckoutPage(page: Page): D2CCheckoutPage {
const payNowBtn = page.getByRole("button", { name: "Pay $" });
const checkoutBtn = page.getByRole("button", { name: "Pay $" });
const continueShoppingBtn = page.getByRole("link", {
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 continueShopping() {
await continueShoppingBtn.click();
await page.waitForURL("/");
},
};
}
15 changes: 15 additions & 0 deletions examples/global-services/e2e/models/d2c-home-page.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Page } from "@playwright/test";

export interface D2CHomePage {
readonly page: Page;
readonly goto: () => Promise<void>;
}

export function createD2CHomePage(page: Page): D2CHomePage {
return {
page,
async goto() {
await page.goto("/");
},
};
}
Loading

0 comments on commit da54bb0

Please sign in to comment.