Merge pull request #169 from Shopify/sample-apps-javascript

Adding JavaScript functions to sample apps

Author: nickwesselman

.graphqlrc.cjs

@@ -26,6 +26,8 @@ function getProjects(path) {
 
 const projects = {
     ...getProjects("sample-apps/discounts/extensions"),
+    ...getProjects("sample-apps/payment-customizations/extensions"),
+    ...getProjects("sample-apps/delivery-customizations/extensions"),
     ...getProjects("checkout/rust/delivery-customization"),
     ...getProjects("checkout/rust/payment-customization"),
     ...getProjects("checkout/javascript/delivery-customization"),

Cargo.toml

@@ -3,3 +3,9 @@ members = [
     "*/rust/*/*",
     "sample-apps/*/extensions/*",
 ]
+exclude = [
+    # Excludes do not support globbing -- https://github.com/rust-lang/cargo/issues/11405
+    "sample-apps/delivery-customizations/extensions/delivery-customization-js",
+    "sample-apps/discounts/extensions/product-discount-js",
+    "sample-apps/payment-customizations/extensions/payment-customization-js/",
+]

package.json

@@ -19,6 +19,7 @@
   },
   "private": true,
   "workspaces": [
-    "*/javascript/**"
+    "*/javascript/**",
+    "sample-apps/*/extensions/*-js"
   ]
 }

sample-apps/delivery-customizations/extensions/delivery-customization-js/.gitignore

@@ -0,0 +1,2 @@
+dist
+generated

sample-apps/delivery-customizations/extensions/delivery-customization/input.graphql renamed to sample-apps/delivery-customizations/extensions/delivery-customization-js/input.graphql

@@ -0,0 +1,27 @@
+{
+  "name": "delivery-customization",
+  "version": "0.0.1",
+  "license": "UNLICENSED",
+  "scripts": {
+    "shopify": "npm exec -- shopify",
+    "typegen": "npm exec -- shopify app function typegen",
+    "build": "npm exec -- shopify app function build",
+    "preview": "npm exec -- shopify app function run",
+    "test": "vitest"
+  },
+  "codegen": {
+    "schema": "schema.graphql",
+    "documents": "input.graphql",
+    "generates": {
+      "./generated/api.ts": {
+        "plugins": [
+          "typescript",
+          "typescript-operations"
+        ]
+      }
+    }
+  },
+  "devDependencies": {
+    "vitest": "^0.29.2"
+  }
+}

sample-apps/delivery-customizations/extensions/delivery-customization-js/package.json

@@ -0,0 +1,11 @@
+name = "delivery-customization-js"
+type = "delivery_customization"
+api_version = "2023-04"
+
+[build]
+command = ""
+path = "dist/function.wasm"
+
+[ui.paths]
+create = "/delivery-customization/:functionId/new"
+details = "/delivery-customization/:functionId/:id"

sample-apps/delivery-customizations/extensions/delivery-customization/schema.graphql renamed to sample-apps/delivery-customizations/extensions/delivery-customization-js/schema.graphql

@@ -0,0 +1,48 @@
+// @ts-check
+
+/**
+ * @typedef {import("../generated/api").InputQuery} InputQuery
+ * @typedef {import("../generated/api").FunctionResult} FunctionResult
+ * @typedef {import("../generated/api").Operation} Operation
+ */
+
+/**
+ * @type {FunctionResult}
+ */
+const NO_CHANGES = {
+  operations: [],
+};
+
+export default /**
+ * @param {InputQuery} input
+ * @returns {FunctionResult}
+ */
+  (input) => {
+    /**
+     * @type {{
+    *   stateProvinceCode: string
+    *   message: number
+    * }}
+    */
+    const configuration = JSON.parse(
+      input?.deliveryCustomization?.metafield?.value ?? "{}"
+    );
+    if (!configuration.stateProvinceCode || !configuration.message) {
+      return NO_CHANGES;
+    }
+
+    let toRename = input.cart.deliveryGroups
+      .filter(group => group.deliveryAddress?.provinceCode &&
+        group.deliveryAddress.provinceCode == configuration.stateProvinceCode)
+      .flatMap(group => group.deliveryOptions)
+      .map(option => /** @type {Operation} */({
+        rename: {
+          deliveryOptionHandle: option.handle,
+          title: option.title ? `${option.title} - ${configuration.message}` : configuration.message
+        }
+      }));
+
+    return {
+      operations: toRename
+    };
+  };

sample-apps/delivery-customizations/extensions/delivery-customization-js/shopify.function.extension.toml

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import deliveryCustomization from './index';
+
+/**
+ * @typedef {import("../generated/api").FunctionResult} FunctionResult
+ */
+
+describe('delivery customization function', () => {
+    it('returns no operations without configuration', () => {
+        const result = deliveryCustomization({
+            "cart": {
+                "deliveryGroups": []
+            },
+            "deliveryCustomization": {
+                "metafield": null
+            }
+        });
+        const expected = /** @type {FunctionResult} */ ({ operations: [] });
+
+        expect(result).toEqual(expected);
+    });
+
+    it('renames delivery options if state/province matches', () => {
+        const result = deliveryCustomization({
+            "cart": {
+                "deliveryGroups": [{
+                    "deliveryAddress": {
+                        "provinceCode": "ON"
+                    },
+                    "deliveryOptions": [{
+                        "handle": "test_delivery_option",
+                        "title": "Test Delivery Option"
+                    }, {
+                        "handle": "test_delivery_option_2",
+                        "title": "Test Delivery Option 2"
+                    }]
+                }]
+            },
+            "deliveryCustomization": {
+                "metafield": {
+                    "value": "{\"stateProvinceCode\": \"ON\", \"message\": \"Test Message\"}"
+                }
+            }
+        });
+        const expected = /** @type {FunctionResult} */ ({
+            operations: [
+                {
+                    rename: {
+                        deliveryOptionHandle: "test_delivery_option",
+                        title: "Test Delivery Option - Test Message"
+                    }
+                },
+                {
+                    rename: {
+                        deliveryOptionHandle: "test_delivery_option_2",
+                        title: "Test Delivery Option 2 - Test Message"
+                    }
+                }
+            ]
+        });
+
+        expect(result).toEqual(expected);
+    });
+
+    it('returns no operations if state/province code does not match', () => {
+        const result = deliveryCustomization({
+            "cart": {
+                "deliveryGroups": [{
+                    "deliveryAddress": {
+                        "provinceCode": "NC"
+                    },
+                    "deliveryOptions": [{
+                        "handle": "test_delivery_option",
+                        "title": "Test Delivery Option"
+                    }]
+                }]
+            },
+            "deliveryCustomization": {
+                "metafield": {
+                    "value": "{\"stateProvinceCode\": \"ON\", \"message\": \"Test Message\"}"
+                }
+            }
+        });
+        const expected = /** @type {FunctionResult} */ ({ operations: [] });
+
+        expect(result).toEqual(expected);
+    });
+});

sample-apps/delivery-customizations/extensions/delivery-customization-js/src/index.js

@@ -0,0 +1,18 @@
+query Input {
+  cart {
+    deliveryGroups {
+      deliveryAddress {
+        provinceCode
+      }
+      deliveryOptions {
+        handle
+        title
+      }
+    }
+  }
+  deliveryCustomization {
+    metafield(namespace: "$app:delivery-customization", key: "function-configuration") {
+      value
+    }
+  }
+}