add ecommerce

ecommerce/.npmrc

@@ -0,0 +1,6 @@
+PUPPETEER_SKIP_DOWNLOAD=true
+registry=https://artifactory.oci.oraclecorp.com/api/npm/global-dev-npm
+@types:registry=https://artifactory.oci.oraclecorp.com/api/npm/global-dev-npm
+@oracle:registry=https://artifactory.oci.oraclecorp.com/api/npm/global-dev-npm
+strict-ssl=false
+scripts-prepend-node-path=true

ecommerce/README.md

@@ -0,0 +1,62 @@
+# How to run:
+
+## sample-data
+
+### change to the sample-data directory
+    $ cd sample-data
+
+### setup the schema
+    $ mysqlsh --sql -u admin -p'<pw>' < ddl.sql
+
+### seed the sample data
+    $ mysqlsh --sql -u admin -p'<pw>' < data.sql
+
+### define the stored procedures
+    $ mysqlsh --sql -u admin -p'<pw>' < define_stored_procedures.sql
+
+### insert the reviews
+    $ msqlsh --sql -u admin
+    <pw>
+    mysqlsh> call insert_reviews();
+    mysqlsh> \quit
+
+## strapi
+
+### install
+    $ cd strapi
+    $ npm install
+
+### setup
+    $ cp .env.example .env
+
+Also, add the following values to your .env file
+
+    # Database
+    DATABASE_CLIENT=mysql2
+    DATABASE_HOST=localhost
+    DATABASE_PORT=3306
+    DATABASE_NAME=<database name>
+    DATABASE_USERNAME=<database username>
+    DATABASE_SSL=true
+    DATABASE_SSL_REJECT_UNAUTHORIZED=false
+
+### run
+    $ DATABASE_PASSWORD=<pw> npm develop
+
+### access
+
+http://localhost:1337
+
+## next.js
+
+### install
+    $ cd nextjs
+    $ npm install
+
+## run
+    $ npm run dev
+
+### access
+
+http://localhost:3000
+

ecommerce/nextjs/.env.example

@@ -0,0 +1,16 @@
+# Add custom values
+SITE_NAME="Ecwid Store"
+COMPANY_NAME="Ecwid by Lightspeed."
+TWITTER_CREATOR="@ecwid"
+TWITTER_SITE="https://ecwid.com"
+
+# Your Store ID: https://support.ecwid.com/hc/en-us/articles/207806465-Where-is-my-Store-ID
+ECWID_STORE_ID=""
+
+# We recommend using a public token. How you can get it: https://api-docs.ecwid.com/reference/customizations-for-a-single-store
+ECWID_API_KEY=""
+
+# Provide Ecwid team (https://developers.ecwid.com/contact) with webhook URL and webhook events to set for your application:
+# category.created, category.deleted, category.updated, product.created, product.deleted, product.updated, profile.updated
+# and custom HTTP header "X-Ecwid-Revalidation-Secret" with value of your revalidation secret
+ECWID_REVALIDATION_SECRET=""

ecommerce/nextjs/.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+    extends: ['next', 'prettier'],
+    plugins: ['unicorn', 'prettier'],
+    rules: {
+        'no-unused-vars': [
+            'error',
+            {
+                args: 'after-used',
+                caughtErrors: 'none',
+                ignoreRestSiblings: true,
+                vars: 'all',
+                varsIgnorePattern: '^_',
+                argsIgnorePattern: '^_',
+            },
+        ],
+        'prettier/prettier': ['error'],
+        'prefer-const': 'error',
+        'react-hooks/exhaustive-deps': 'error',
+        'unicorn/filename-case': [
+            'error',
+            {
+                case: 'kebabCase',
+            },
+        ],
+    },
+    parserOptions: {
+        babelOptions: {
+            presets: [require.resolve('next/babel')],
+        },
+    },
+};

ecommerce/nextjs/.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+    - package-ecosystem: 'github-actions'
+      directory: '/'
+      schedule:
+          interval: 'weekly'

ecommerce/nextjs/.github/workflows/test.yml

@@ -0,0 +1,35 @@
+name: test
+on: pull_request
+
+# Cancel in progress workflows on pull_requests.
+# https://docs.github.com/en/actions/using-jobs/using-concurrency#example-using-a-fallback-value
+concurrency:
+    group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+    cancel-in-progress: true
+
+jobs:
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repo
+              uses: actions/checkout@v4
+            - name: Set node version
+              uses: actions/setup-node@v3
+              with:
+                  node-version-file: '.nvmrc'
+            - name: Set pnpm version
+              uses: pnpm/action-setup@v2
+              with:
+                  run_install: false
+                  version: 7
+            - name: Cache node_modules
+              id: node-modules-cache
+              uses: actions/cache@v3
+              with:
+                  path: '**/node_modules'
+                  key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
+            - name: Install dependencies
+              if: steps.node-modules-cache.outputs.cache-hit != 'true'
+              run: pnpm install --no-frozen-lockfile
+            - name: Run tests
+              run: pnpm test

ecommerce/nextjs/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+.playwright
+
+# 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*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.env*.local

ecommerce/nextjs/.nvmrc

@@ -0,0 +1 @@
+18

ecommerce/nextjs/.prettierignore

@@ -0,0 +1,3 @@
+.vercel
+.next
+pnpm-lock.yaml

ecommerce/nextjs/.prettierrc.js

@@ -0,0 +1,13 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+    singleQuote: true,
+    arrowParens: 'avoid',
+    quoteProps: 'as-needed',
+    trailingComma: 'es5',
+    useTabs: false,
+    singleAttributePerLine: true,
+    semi: true,
+    printWidth: 100,
+    tabWidth: 4,
+    // plugins: ['prettier-plugin-tailwindcss'],
+};

ecommerce/nextjs/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Next.js: debug server-side",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "pnpm dev"
+        },
+        {
+            "name": "Next.js: debug client-side",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:3000"
+        },
+        {
+            "name": "Next.js: debug full stack",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "pnpm dev",
+            "serverReadyAction": {
+                "pattern": "started server on .+, url: (https?://.+)",
+                "uriFormat": "%s",
+                "action": "debugWithChrome"
+            }
+        }
+    ]
+}

ecommerce/nextjs/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll": "explicit",
+        "source.organizeImports": "explicit",
+        "source.sortMembers": "explicit"
+    }
+}

ecommerce/nextjs/README.md

@@ -0,0 +1,55 @@
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FEcwid%2Fecwid-nextjs-commerce&repository-name=ecwid-nextjs-commerce&env=ECWID_STORE_ID,ECWID_API_KEY,COMPANY_NAME,SITE_NAME)
+
+# Next.js Commerce
+
+A Next.js 14 and App Router-ready ecommerce template featuring:
+
+-   Next.js App Router
+-   Optimized for SEO using Next.js's Metadata
+-   React Server Components (RSCs) and Suspense
+-   Server Actions for mutations
+-   Edge Runtime
+-   New fetching and caching paradigms
+-   Dynamic OG images
+-   Styling with Tailwind CSS
+-   Checkout and payments with Ecwid
+-   Automatic light/dark mode based on system settings
+
+<h3 id="subscription-note"></h3>
+
+> Note: [Contact us](https://ecommerce-store.typeform.com/to/pZ5PYgNF?utm_source=github-commerce) if you’re a developer and need a premium Ecwid subscription for testing purposes.
+
+## Integrations
+
+Integrations enable upgraded or additional functionality for Next.js Commerce
+
+-   [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
+    -   Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
+    -   Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
+
+## Running locally
+
+You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+
+> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Ecwid store.
+
+1. Install Vercel CLI: `npm i -g vercel`
+2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
+3. Download your environment variables: `vercel env pull`
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Your app should now be running on [localhost:3000](http://localhost:3000/).
+
+<details>
+  <summary>Expand if you work at Vercel and want to run locally and / or contribute</summary>
+
+1. Run `vc link`.
+1. Select the `Vercel Solutions` scope.
+1. Connect to the existing `commerce-ecwid` project.
+1. Run `vc env pull` to get environment variables.
+1. Run `pnpm dev` to ensure everything is working correctly.
+ </details>

ecommerce/nextjs/app/[locale]/(checkout)/checkout/layout.tsx

@@ -0,0 +1,15 @@
+import Footer from 'components/layout/footer';
+import { Suspense } from 'react';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+        <Suspense>
+            <div className="w-full">
+                <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
+                    <Suspense>{children}</Suspense>
+                </div>
+            </div>
+            <Footer />
+        </Suspense>
+    );
+}