firmhouse · fthts · Aug 15, 2024 · Jun 27, 2024 · Jun 27, 2024 · Aug 13, 2024
diff --git a/examples/nextjs/headless-checkout/.eslintrc.json b/examples/nextjs/headless-checkout/.eslintrc.json
@@ -0,0 +1,40 @@
+{
+  "extends": [
+    "plugin:@nx/react-typescript",
+    "next",
+    "next/core-web-vitals",
+    "../../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*", ".next/**/*"],
+  "overrides": [
+    {
+      "files": ["*.*"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": [
+          "error",
+          "examples/nextjs/headless-checkout/pages"
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
+}
diff --git a/examples/nextjs/headless-checkout/app/global.css b/examples/nextjs/headless-checkout/app/global.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/examples/nextjs/headless-checkout/app/layout.tsx b/examples/nextjs/headless-checkout/app/layout.tsx
@@ -0,0 +1,18 @@
+import './global.css';
+
+export const metadata = {
+  title: 'Welcome to headless-checkout',
+  description: 'Generated by create-nx-workspace',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/nextjs/headless-checkout/app/page.module.css b/examples/nextjs/headless-checkout/app/page.module.css
@@ -0,0 +1,2 @@
+.page {
+}
diff --git a/examples/nextjs/headless-checkout/app/page.tsx b/examples/nextjs/headless-checkout/app/page.tsx
@@ -0,0 +1,15 @@
+import Checkout from '../components/checkout';
+import styles from './page.module.css';
+
+export default async function Index() {
+  const apiToken =
+    process.env.NEXT_PUBLIC_FIRMHOUSE_HEADLESS_CHECKOUT_ACCESS_TOKEN;
+  if (!apiToken) {
+    throw new Error('Please provide a Firmhouse API token');
+  }
+  return (
+    <div className={styles.page}>
+      <Checkout apiToken={apiToken} />
+    </div>
+  );
+}
diff --git a/examples/nextjs/headless-checkout/components/checkout.tsx b/examples/nextjs/headless-checkout/components/checkout.tsx
@@ -0,0 +1,74 @@
+'use client';
+import {
+  CheckoutForm,
+  FirmhouseCartProvider,
+  OrderSummary,
+  OrderedProductsList,
+  defaultCheckoutFields,
+} from '@firmhouse/headless-react';
+
+export interface CheckoutProps {
+  apiToken: string;
+}
+
+const fields = [...defaultCheckoutFields];
+fields[0].fields = [
+  ...fields[0].fields,
+  {
+    id: '1568',
+    name: '1568',
+    type: 'dropdown',
+    label: 'How did you find us?',
+    inputProps: {
+      options: [
+        { label: 'Friends', value: 'Friends' },
+        { label: 'Social Media', value: 'Social Media' },
+        { label: 'Email', value: 'Email' },
+        { label: 'Search Engine', value: 'Search Engine' },
+        { label: 'Ads', value: 'Ads' },
+      ],
+    },
+  },
+];
+
+export default function Checkout({ apiToken }: CheckoutProps) {
+  return (
+    <FirmhouseCartProvider
+      apiToken={apiToken}
+      locale="en"
+      translations={{
+        en: {
+          opGroups: {
+            months_one: 'Every month',
+            months_other: 'Every {{count}} months',
+            weeks_one: 'Every week',
+            weeks_other: 'Every {{count}} weeks',
+            days_one: 'Every day',
+            days_other: 'Every {{count}} days',
+          },
+        },
+      }}
+    >
+      <div className="flex lg:flex-row w-full md:flex-col p-4">
+        <div className="w-full lg:w-3/4">
+          <CheckoutForm fields={fields} />
+        </div>
+        <div className="lg:min-w-1/4">
+          <h2 className="text-xl font-bold mb-8">Your order</h2>
+          <OrderedProductsList onlyOneTimeProducts />
+          <OrderedProductsList
+            onlyRecurringProducts
+            groupBy={(op, t) =>
+              t?.(
+                `opGroups.${op.product.intervalUnitOfMeasure?.toLocaleLowerCase()}`,
+                { count: op.product.interval ?? 0 }
+              ) ?? ''
+            }
+          />
+
+          <OrderSummary />
+        </div>
+      </div>
+    </FirmhouseCartProvider>
+  );
+}
diff --git a/examples/nextjs/headless-checkout/index.d.ts b/examples/nextjs/headless-checkout/index.d.ts
@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}
diff --git a/examples/nextjs/headless-checkout/jest.config.ts b/examples/nextjs/headless-checkout/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'nextjs-headless-checkout',
+  preset: '../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../coverage/examples/nextjs/headless-checkout',
+};
diff --git a/examples/nextjs/headless-checkout/next-env.d.ts b/examples/nextjs/headless-checkout/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/nextjs/headless-checkout/next.config.js b/examples/nextjs/headless-checkout/next.config.js
@@ -0,0 +1,22 @@
+//@ts-check
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { composePlugins, withNx } = require('@nx/next');
+
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  nx: {
+    // Set this to true if you would like to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
+  },
+};
+
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withNx,
+];
+
+module.exports = composePlugins(...plugins)(nextConfig);
diff --git a/examples/nextjs/headless-checkout/postcss.config.js b/examples/nextjs/headless-checkout/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/nextjs/headless-checkout/project.json b/examples/nextjs/headless-checkout/project.json
@@ -0,0 +1,72 @@
+{
+  "name": "nextjs-headless-checkout",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/nextjs/headless-checkout",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/next:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/examples/nextjs/headless-checkout",
+        "postcssConfig": "examples/nextjs/headless-checkout/postcss.config.js"
+      },
+      "configurations": {
+        "development": {
+          "outputPath": "examples/nextjs/headless-checkout"
+        },
+        "production": {}
+      }
+    },
+    "serve": {
+      "executor": "@nx/next:server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "nextjs-headless-checkout:build",
+        "dev": true,
+        "postcssConfig": "examples/nextjs/headless-checkout/postcss.config.js"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "nextjs-headless-checkout:build:development",
+          "dev": true
+        },
+        "production": {
+          "buildTarget": "nextjs-headless-checkout:build:production",
+          "dev": false
+        }
+      }
+    },
+    "export": {
+      "executor": "@nx/next:export",
+      "options": {
+        "buildTarget": "nextjs-headless-checkout:build:production"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "examples/nextjs/headless-checkout/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "examples/nextjs/headless-checkout/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/examples/nextjs/headless-checkout/public/.gitkeep b/examples/nextjs/headless-checkout/public/.gitkeep
diff --git a/examples/nextjs/headless-checkout/public/favicon.ico b/examples/nextjs/headless-checkout/public/favicon.ico