Merge pull request #150 from Shopify/ah.add-edit-pages

Add payment and delivery details pages

Author: andrewhassan

sample-apps/delivery-customizations/web/frontend/pages/delivery-customization/[functionId]/[id].jsx

@@ -0,0 +1,166 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import {
+  Layout,
+  Form,
+  FormLayout,
+  TextField,
+  Card,
+  Page,
+  Frame,
+  SkeletonPage,
+  SkeletonBodyText,
+} from "@shopify/polaris";
+import { useAppBridge } from "@shopify/app-bridge-react";
+import { Redirect } from "@shopify/app-bridge/actions";
+import { useAuthenticatedFetch } from "../../../hooks/useAuthenticatedFetch";
+import { useAppQuery } from "../../../hooks/useAppQuery";
+
+// Utility hooks for invoking the server endpoints that you created
+function useCustomization(id) {
+  const url = `/api/deliveryCustomization/${id}`;
+  return useAppQuery({ url });
+}
+
+function useUpdateCustomization() {
+  const fetch = useAuthenticatedFetch();
+  return async (deliveryCustomization) => {
+    return await fetch("/api/deliveryCustomization/update", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(deliveryCustomization),
+    });
+  };
+}
+
+// A utility hook for redirecting back to the Delivery Customizations list
+function useRedirectToCustomizations() {
+  const app = useAppBridge();
+  const redirect = Redirect.create(app);
+  return () => {
+    redirect.dispatch(Redirect.Action.ADMIN_PATH, {
+      path: "/settings/shipping/customizations",
+    });
+  };
+}
+
+export default function NewCustomizationPage() {
+  // Read the function and customization IDs from the URL
+  const { functionId, id } = useParams();
+
+  // Fetch customization data
+  const { isLoading, data: customization } = useCustomization(id);
+
+  // Utility hooks
+  const updateCustomization = useUpdateCustomization();
+  const redirect = useRedirectToCustomizations();
+
+  // Page state management
+  const [mutationIsLoading, setMutationIsLoading] = useState(false);
+  const [formData, setFormData] = useState({});
+
+  // Page breadcrumbs [
+  const breadcrumbs = [
+    {
+      content: "Delivery Customizations",
+      onAction: redirect,
+    },
+  ];
+
+  // Store the form state on change
+  const handleInputChange = (value, name) => {
+    setFormData((data) => ({ ...data, [name]: value }));
+  };
+
+  // Invoke the server endpoint when the form is submitted
+  const handleSubmit = async () => {
+    setMutationIsLoading(true);
+    const response = await updateCustomization({
+      functionId,
+      ...formData,
+    });
+    if (response.status != 200) {
+      const errorResponse = await response.json();
+      console.log(
+        "Error updating delivery customization: ",
+        errorResponse.error
+      );
+    } else {
+      redirect();
+    }
+    setMutationIsLoading(false);
+  };
+
+  // When the customization is loaded, set the form state
+  useEffect(() => {
+    setFormData(customization);
+  }, [customization, setFormData]);
+
+  if (isLoading) {
+    return (
+      <Frame>
+        <SkeletonPage
+          title="Add message to delivery options"
+          breadcrumbs={breadcrumbs}
+          primaryAction
+        >
+          <Layout.Section>
+            <Card sectioned>
+              <SkeletonBodyText />
+            </Card>
+          </Layout.Section>
+        </SkeletonPage>
+      </Frame>
+    );
+  }
+
+  // A basic input form page created using Polaris components
+  return (
+    <Frame>
+      <Page
+        title="Add message to delivery options"
+        primaryAction={{
+          onAction: handleSubmit,
+          content: "Save",
+          loading: mutationIsLoading,
+        }}
+        breadcrumbs={breadcrumbs}
+      >
+        <Layout.Section>
+          <Card>
+            <Card.Section>
+              <Form onSubmit={handleSubmit}>
+                <FormLayout>
+                  <FormLayout.Group condensed>
+                    <TextField
+                      type="text"
+                      maxLength={2}
+                      label="State/Province Code"
+                      value={formData?.stateProvinceCode}
+                      onChange={(value) =>
+                        handleInputChange(value, "stateProvinceCode")
+                      }
+                      disabled={isLoading}
+                      requiredIndicator
+                    />
+                  </FormLayout.Group>
+                  <FormLayout.Group>
+                    <TextField
+                      type="text"
+                      multiline={2}
+                      label="Message"
+                      value={formData?.message}
+                      onChange={(value) => handleInputChange(value, "message")}
+                      disabled={isLoading}
+                      requiredIndicator
+                    />
+                  </FormLayout.Group>
+                </FormLayout>
+              </Form>
+            </Card.Section>
+          </Card>
+        </Layout.Section>
+      </Page>
+    </Frame>
+  );
+}

sample-apps/delivery-customizations/web/index.js

@@ -45,6 +45,133 @@ function handleUserError(userErrors, res) {
   return false;
 }
 
+// Endpoint for fetching a delivery customization
+app.get("/api/deliveryCustomization/:id", async (req, res) => {
+  const id = `gid://shopify/DeliveryCustomization/${req.params.id}`;
+  const graphqlClient = new shopify.api.clients.Graphql({
+    session: res.locals.shopify.session,
+  });
+
+  try {
+    const response = await graphqlClient.query({
+      data: {
+        query: `query DeliveryCustomization($id: ID!) {
+          deliveryCustomization(id: $id) {
+            id
+            metafield(namespace: "delivery-customization", key: "function-configuration") {
+              value
+            }
+          }
+        }`,
+        variables: {
+          id,
+        },
+      },
+    });
+
+    if (!response.body.data || !response.body.data.deliveryCustomization) {
+      res.status(404).send({ error: "Delivery customization not found" });
+    }
+
+    const metafieldValue = response.body.data.deliveryCustomization.metafield
+      ? JSON.parse(response.body.data.deliveryCustomization.metafield.value)
+      : {};
+    const { stateProvinceCode, message } = metafieldValue;
+
+    const deliveryCustomization = {
+      id,
+      stateProvinceCode,
+      message,
+    };
+
+    res.status(200).send(deliveryCustomization);
+  } catch (error) {
+    console.error(`Failed to fetch delivery customization ${id}`, error);
+    res.status(500).send();
+  }
+});
+
+app.put("/api/deliveryCustomization/update", async (req, res) => {
+  const payload = req.body;
+  const graphqlClient = new shopify.api.clients.Graphql({
+    session: res.locals.shopify.session,
+  });
+
+  try {
+    // Create the delivery customization for the provided function ID
+    const updateResponse = await graphqlClient.query({
+      data: {
+        query: `mutation DeliveryCustomizationUpdate($id: ID!, $input: DeliveryCustomizationInput!) {
+          deliveryCustomizationUpdate(id: $id, deliveryCustomization: $input) {
+            deliveryCustomization {
+              id
+            }
+            userErrors {
+              message
+            }
+          }
+        }`,
+        variables: {
+          input: {
+            functionId: payload.functionId,
+            title: `Display message for ${payload.stateProvinceCode}`,
+            enabled: true,
+          },
+          id: payload.id,
+        },
+      },
+    });
+    let updateResult = updateResponse.body.data.deliveryCustomizationUpdate;
+    if (handleUserError(updateResult.userErrors, res)) {
+      return;
+    }
+
+    // Populate the function configuration metafield for the delivery customization
+    const customizationId = updateResult.deliveryCustomization.id;
+    const metafieldResponse = await graphqlClient.query({
+      data: {
+        query: `mutation MetafieldsSet($customizationId: ID!, $configurationValue: String!) {
+          metafieldsSet(metafields: [
+            {
+              ownerId: $customizationId
+              namespace: "delivery-customization"
+              key: "function-configuration"
+              value: $configurationValue
+              type: "json"
+            }
+          ]) {
+            metafields {
+              id
+            }
+            userErrors {
+              message
+            }
+          }
+        }`,
+        variables: {
+          customizationId,
+          configurationValue: JSON.stringify({
+            stateProvinceCode: payload.stateProvinceCode,
+            message: payload.message,
+          }),
+        },
+      },
+    });
+    let metafieldResult = metafieldResponse.body.data.metafieldsSet;
+    if (handleUserError(metafieldResult, res)) {
+      return;
+    }
+  } catch (error) {
+    // Handle errors thrown by the graphql client
+    if (!(error instanceof GraphqlQueryError)) {
+      throw error;
+    }
+    return res.status(500).send({ error: error.response });
+  }
+
+  return res.status(200).send();
+});
+
 // Endpoint for the delivery customization UI to invoke
 app.post("/api/deliveryCustomization/create", async (req, res) => {
   const payload = req.body;