Swell integration (#24)

* installed swell package

* added types

* added store classes

* added products api route

* adds more properties to products

* added example env

* types fixes

* final changes

Author: skydiver

.env.example

@@ -0,0 +1,4 @@
+DEFAULT_STORE="swell"
+
+SWELL_STORE_ID=""
+SWELL_SECRET_KEY=""

.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+/.env

package-lock.json

@@ -16,6 +16,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-icons": "^4.4.0",
+    "swell-node": "^4.0.10",
     "swiper": "^8.3.2"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,24 @@
+import Swell from './Swell';
+
+/*****************************************************************************
+ * Wrapper class for given store client
+ ****************************************************************************/
+class Store {
+  private storeClass;
+
+  constructor() {
+    const defaultStore = process.env.DEFAULT_STORE as string;
+
+    if (defaultStore === 'swell') {
+      this.storeClass = new Swell();
+    } else {
+      throw new Error('Store not found');
+    }
+  }
+
+  async getProducts(): Promise<Product[]> {
+    return await this.storeClass.getProducts();
+  }
+}
+
+export default new Store();

src/lib/Store.ts

@@ -0,0 +1,31 @@
+import { createClient } from 'swell-node';
+
+/*****************************************************************************
+ * Initialize Swell client
+ ****************************************************************************/
+const SWELL_STORE_ID = process.env.SWELL_STORE_ID as string;
+const SWELL_SECRET_KEY = process.env.SWELL_SECRET_KEY as string;
+const swell = createClient(SWELL_STORE_ID, SWELL_SECRET_KEY);
+
+export default class Swell {
+  /*****************************************************************************
+   * Get products from Swell and transform into a list of Product objects
+   ****************************************************************************/
+  async getProducts(): Promise<Product[]> {
+    const { results }: { results: SwellProduct[] } = await swell.get('/products', {
+      active: true
+    });
+
+    return results.map((product) => ({
+      id: product.id,
+      name: product.name,
+      active: product.active,
+      description: product.description,
+      slug: product.slug,
+      tags: product.tags,
+      price: product.price,
+      sale: product.sale,
+      sku: product.sku
+    }));
+  }
+}

src/lib/Swell.ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import Store from '~/lib/Store';
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const products = await Store.getProducts();
+  res.status(200).json(products);
+};
+
+export default handler;

src/pages/api/products.tsx

@@ -0,0 +1,12 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      SWELL_STORE_ID?: string;
+      SWELL_SECRET_KEY?: string;
+    }
+  }
+}
+
+// If this file has no import/export statements (i.e. is a script)
+// convert it into a module by adding an empty export statement.
+export {};

src/types/Environment.d.ts

@@ -0,0 +1,17 @@
+interface Product {
+  id: string;
+  name: string;
+  active: boolean;
+  description: string;
+  slug: string;
+  tags: string[];
+  price: number;
+  images?: ProductImage[];
+  sale?: boolean;
+  sku?: string;
+}
+
+interface ProductImage {
+  url: string;
+  alt?: string;
+}

src/types/Generic/Products.d.ts

@@ -0,0 +1,58 @@
+interface SwellProduct {
+  name: string;
+  active: boolean;
+  cross_sells: [];
+  currency: string;
+  date_created: string;
+  date_updated: string;
+  description: string;
+  meta_title?: string;
+  meta_description?: string;
+  options: SwellProductOption[];
+  slug: string;
+  stock_tracking: boolean;
+  tags: string[];
+  type: string;
+  up_sells: [];
+  delivery: string;
+  tax_class: string;
+  price: number;
+  stock_status: string;
+  images: SwellProductImage[];
+  stock_level: number;
+  popularity: number;
+  prices: [];
+  sale: boolean;
+  sale_price?: string;
+  sku?: string;
+  id: string;
+}
+
+interface SwellProductImage {
+  caption?: string;
+  file: SwellProductFile;
+  id: string;
+}
+
+interface SwellProductFile {
+  width: number;
+  height: number;
+  id: string;
+  length: number;
+  date_uploaded: string;
+  content_type: string;
+  md5: string;
+  url: string;
+}
+
+interface SwellProductOption {
+  name: string;
+  variant: boolean;
+  active: boolean;
+  values: {
+    name: string;
+    id: string;
+  }[];
+  required: boolean;
+  id: string;
+}

src/types/Swell/Product.d.ts

@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Source: https://github.com/swellstores/swell-node/issues/11
+ ****************************************************************************/
+
+declare module 'swell-node' {
+  import EventEmitter from 'node:events';
+
+  type Callback<D, T> = (error: unknown, data?: D, response?: T) => void | Promise<void>;
+
+  interface SwellNodeClientParams {
+    clientId?: string;
+    clientKey?: string;
+    host?: string;
+    port?: string;
+    verifyCert?: boolean;
+    version?: string;
+    session?: unknown;
+    route?: unknown;
+    timeout?: number;
+    routeClientId?: string;
+    cache?: boolean;
+    debug?: boolean;
+  }
+
+  interface SwellNodeClient extends EventEmitter {
+    params: unknown;
+    server: unknown;
+    cache: unknown;
+    authed: boolean;
+
+    // eslint-disable-next-line @typescript-eslint/no-misused-new
+    new (
+      clientId: string,
+      clientKey: string,
+      options?: SwellNodeClientParams,
+      callback?: (arg: this) => void | Promise<void>
+    ): SwellNodeClient;
+    create(
+      clientId: string,
+      clientKey: string,
+      options?: SwellNodeClientParams,
+      callback?: (arg: this) => void | Promise<void>
+    ): SwellNodeClient;
+    init(clientId: string, clientKey: string, options?: SwellNodeClientParams): SwellNodeClient;
+    connect(callback: (arg: this) => void | Promise<void>): void;
+    request<T = unknown>(method: string, url: string, data?: unknown): Promise<T>;
+    get<T = unknown>(url: string, data?: unknown): Promise<T>;
+    post<T = unknown>(url: string, data?: unknown): Promise<T>;
+    put<T = unknown>(url: string, data?: unknown): Promise<T>;
+    delete<T = unknown>(url: string, data?: unknown): Promise<T>;
+  }
+
+  export function createClient(
+    clientId: string,
+    clientKey: string,
+    options?: SwellNodeClientParams,
+    callback?: (arg: this) => void
+  ): SwellNodeClient;
+}