feat: init app with checkout ui extension

Author: suryarajendhran

.gitignore

@@ -0,0 +1,21 @@
+# Environment Configuration
+.env
+.env.*
+
+# Dependency directory
+node_modules
+
+# Test coverage directory
+coverage
+
+# Ignore Apple macOS Desktop Services Store
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# extensions build output
+extensions/*/build
+
+# lock files

.graphqlrc.js

@@ -0,0 +1,30 @@
+const fs = require("node:fs");
+
+function getConfig() {
+  const config = {
+    projects: {},
+  };
+
+  let extensions = [];
+  try {
+    extensions = fs.readdirSync("./extensions");
+  } catch {
+    // ignore if no extensions
+  }
+
+  for (const entry of extensions) {
+    const extensionPath = `./extensions/${entry}`;
+    const schema = `${extensionPath}/schema.graphql`;
+    if (!fs.existsSync(schema)) {
+      continue;
+    }
+    config.projects[entry] = {
+      schema,
+      documents: [`${extensionPath}/**/*.graphql`],
+    };
+  }
+
+  return config;
+}
+
+module.exports = getConfig();

.npmrc

@@ -0,0 +1,3 @@
+engine-strict=true
+auto-install-peers=true
+shamefully-hoist=true

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "graphql.vscode-graphql"
+  ]
+}

README.md

@@ -0,0 +1,78 @@
+# Shopify App Template - None (app with extensions only)
+
+This is a template for building a [Shopify app](https://shopify.dev/docs/apps/getting-started) that includes no app home UI. It contains the basics for building a Shopify app that uses only app extensions.
+
+**If you plan for your app to load its own page in the Shopify Admin, then you'll want to choose one of our other templates.**
+
+Whether you choose to use this template or another one, you can use your preferred package manager and the Shopify CLI with [these steps](#installing-the-template).
+
+## Benefits
+
+Shopify apps are built on a variety of Shopify tools to create a great merchant experience. The [create an app](https://shopify.dev/docs/apps/getting-started/create) tutorial in our developer documentation will guide you through creating a Shopify app.
+
+This app template does little more than install the CLI and scaffold a respository.
+
+## Getting started
+
+### Requirements
+
+1. You must [download and install Node.js](https://nodejs.org/en/download/) if you don't already have it.
+1. You must [create a Shopify partner account](https://partners.shopify.com/signup) if you don’t have one.
+1. You must create a store for testing if you don't have one, either a [development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) or a [Shopify Plus sandbox store](https://help.shopify.com/en/partners/dashboard/managing-stores/plus-sandbox-store).
+
+### Installing the template
+
+This template can be installed using your preferred package manager:
+
+Using yarn:
+
+```shell
+yarn create @shopify/app
+```
+
+Using npm:
+
+```shell
+npm init @shopify/app@latest
+```
+
+Using pnpm:
+
+```shell
+pnpm create @shopify/app@latest
+```
+
+This will clone the template and install the required dependencies.
+
+#### Local Development
+
+[The Shopify CLI](https://shopify.dev/docs/apps/tools/cli) connects to an app in your Partners dashboard. It provides environment variables and runs commands in parallel..
+
+You can develop locally using your preferred package manager. Run one of the following commands from the root of your app.
+
+Using yarn:
+
+```shell
+yarn dev
+```
+
+Using npm:
+
+```shell
+npm run dev
+```
+
+Using pnpm:
+
+```shell
+pnpm run dev
+```
+
+Open the URL generated in your console. Once you grant permission to the app, you can start development (such as generating extensions).
+
+## Developer resources
+
+- [Introduction to Shopify apps](https://shopify.dev/docs/apps/getting-started)
+- [App authentication](https://shopify.dev/docs/apps/auth)
+- [Shopify CLI](https://shopify.dev/docs/apps/tools/cli)
+- [Shopify API Library documentation](https://github.com/Shopify/shopify-api-js#readme)

SECURITY.md

@@ -0,0 +1,59 @@
+# Security Policy
+
+## Supported versions
+
+### New features
+
+New features will only be added to the master branch and will not be made available in point releases.
+
+### Bug fixes
+
+Only the latest release series will receive bug fixes. When enough bugs are fixed and its deemed worthy to release a new gem, this is the branch it happens from.
+
+### Security issues
+
+Only the latest release series will receive patches and new versions in case of a security issue.
+
+### Severe security issues
+
+For severe security issues we will provide new versions as above, and also the last major release series will receive patches and new versions. The classification of the security issue is judged by the core team.
+
+### Unsupported Release Series
+
+When a release series is no longer supported, it's your own responsibility to deal with bugs and security issues. If you are not comfortable maintaining your own versions, you should upgrade to a supported version.
+
+## Reporting a bug
+
+All security bugs in shopify repositories should be reported to [our hackerone program](https://hackerone.com/shopify)
+Shopify's whitehat program is our way to reward security researchers for finding serious security vulnerabilities in the In Scope properties listed at the bottom of this page, including our core application (all functionality associated with a Shopify store, particularly your-store.myshopify.com/admin) and certain ancillary applications.
+
+## Disclosure Policy
+
+We look forward to working with all security researchers and strive to be respectful, always assume the best and treat others as peers. We expect the same in return from all participants. To achieve this, our team strives to:
+
+- Reply to all reports within one business day and triage within two business days (if applicable)
+- Be as transparent as possible, answering all inquires about our report decisions and adding hackers to duplicate HackerOne reports
+- Award bounties within a week of resolution (excluding extenuating circumstances)
+- Only close reports as N/A when the issue reported is included in Known Issues, Ineligible Vulnerabilities Types or lacks evidence of a vulnerability
+
+**The following rules must be followed in order for any rewards to be paid:**
+
+- You may only test against shops you have created which include your HackerOne YOURHANDLE @ wearehackerone.com registered email address.
+- You must not attempt to gain access to, or interact with, any shops other than those created by you.
+- The use of commercial scanners is prohibited (e.g., Nessus).
+- Rules for reporting must be followed.
+- Do not disclose any issues publicly before they have been resolved.
+- Shopify reserves the right to modify the rules for this program or deem any submissions invalid at any time. Shopify may cancel the whitehat program without notice at any time.
+- Contacting Shopify Support over chat, email or phone about your HackerOne report is not allowed. We may disqualify you from receiving a reward, or from participating in the program altogether.
+- You are not an employee of Shopify; employees should report bugs to the internal bug bounty program.
+- You hereby represent, warrant and covenant that any content you submit to Shopify is an original work of authorship and that you are legally entitled to grant the rights and privileges conveyed by these terms. You further represent, warrant and covenant that the consent of no other person or entity is or will be necessary for Shopify to use the submitted content.
+- By submitting content to Shopify, you irrevocably waive all moral rights which you may have in the content.
+- All content submitted by you to Shopify under this program is licensed under the MIT License.
+- You must report any discovered vulnerability to Shopify as soon as you have validated the vulnerability.
+- Failure to follow any of the foregoing rules will disqualify you from participating in this program.
+
+\*\* Please see our [Hackerone Profile](https://hackerone.com/shopify) for full details
+
+## Receiving Security Updates
+
+To receive all general updates to vulnerabilities, please subscribe to our hackerone [Hacktivity](https://hackerone.com/shopify/hacktivity)

extensions/.gitkeep

@@ -0,0 +1,39 @@
+# Checkout UI Extension
+
+Checkout UI extensions let app developers build custom functionality that merchants can install at defined targets in the checkout flow. You can learn more about checkout UI extensions in Shopify’s [developer documentation](https://shopify.dev/api/checkout-extensions/checkout).
+
+## Prerequisites
+
+Before you start building your extension, make sure that you’ve created a [development store](https://shopify.dev/docs/apps/tools/development-stores) with the [checkout extensibility developer preview](https://shopify.dev/docs/api/release-notes/developer-previews#previewing-new-features).
+
+## Your new Extension
+
+Your new extension contains the following files:
+
+- `README.md`, the file you are reading right now.
+- `shopify.extension.toml`, the configuration file for your extension. This file defines your extension’s name, where it will appear in the checkout, and other metadata.
+- `src/Checkout.jsx`, the source code for your extension.
+- `locales/en.default.json` and `locales/fr.json`, which contain translations used to [localized your extension](https://shopify.dev/docs/apps/checkout/best-practices/localizing-ui-extensions).
+
+By default, your extension is configured to target the `purchase.checkout.block.render` [extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview). You will find the target both in your `shopify.extension.toml`, and in the source code of your extension. The default target allows the merchant to configure where in the checkout *they* want your extension to appear. If you are building an extension that is tied to existing UI element in the checkout, such as the cart lines or shipping options, you can change the extension target so that your UI extension will render in the correct location. Check out the list of [all available extension targets](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview) to get some inspiration for the kinds of content you can provide with checkout UI extensions.
+
+To build your extension, you will need to use APIs provided by Shopify that let you render content, and to read and write data in the checkout. The following resources will help you get started with checkout extensions:
+
+- [APIs by extension target](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
+- [All APIs for reading and writing checkout data](https://shopify.dev/docs/api/checkout-ui-extensions/apis)
+- [Available components and their properties](https://shopify.dev/docs/api/checkout-ui-extensions/components)
+
+## Useful Links
+
+- [Checkout app documentation](https://shopify.dev/apps/checkout)
+- [Checkout UI extension documentation](https://shopify.dev/api/checkout-extensions)
+  - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
+  - [Extension Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
+  - [API Reference](https://shopify.dev/docs/api/checkout-ui-extensions/apis)
+  - [UI Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
+- [Checkout UI extension tutorials](https://shopify.dev/docs/apps/checkout)
+  - [Enable extended delivery instructions](https://shopify.dev/apps/checkout/delivery-instructions)
+  - [Creating a custom banner](https://shopify.dev/apps/checkout/custom-banners)
+  - [Thank you and order status pages](https://shopify.dev/docs/apps/checkout/thank-you-order-status)
+  - [Adding field validation](https://shopify.dev/apps/checkout/validation)
+  - [Localizing an extension](https://shopify.dev/apps/checkout/localize-ui-extensions)

extensions/checkout-ui/README.md

@@ -0,0 +1,5 @@
+{
+  "welcome": "Welcome to the {{target}} extension!",
+  "iWouldLikeAFreeGiftWithMyOrder": "I would like to receive a free gift with my order",
+  "attributeChangesAreNotSupported": "Attribute changes are not supported in this checkout"
+}

extensions/checkout-ui/locales/en.default.json

@@ -0,0 +1,5 @@
+{
+  "welcome": "Bienvenue dans l'extension {{target}}!",
+  "iWouldLikeAFreeGiftWithMyOrder": "Je souhaite recevoir un cadeau gratuit avec ma commande",
+  "attributeChangesAreNotSupported": "Les modifications d'attribut ne sont pas prises en charge dans cette commande"
+}

extensions/checkout-ui/locales/fr.json

@@ -0,0 +1,15 @@
+{
+  "name": "checkout-ui",
+  "private": true,
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "react": "^18.0.0",
+    "@shopify/ui-extensions": "2024.7.x",
+    "@shopify/ui-extensions-react": "2024.7.x"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react-reconciler": "0.29.0"
+  }
+}

extensions/checkout-ui/package.json

@@ -0,0 +1,52 @@
+# Learn more about configuring your checkout UI extension:
+# https://shopify.dev/api/checkout-extensions/checkout/configuration
+
+# The version of APIs your extension will receive. Learn more:
+# https://shopify.dev/docs/api/usage/versioning
+api_version = "2024-07"
+
+[[extensions]]
+name = "checkout-ui"
+handle = "checkout-ui"
+type = "ui_extension"
+
+
+# Controls where in Shopify your extension will be injected,
+# and the file that contains your extension’s source code. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview
+
+[[extensions.targeting]]
+module = "./src/Checkout.jsx"
+target = "purchase.checkout.block.render"
+
+[extensions.capabilities]
+# Gives your extension access to directly query Shopify’s storefront API.
+# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
+api_access = true
+
+# Gives your extension access to make external network calls, using the
+# JavaScript `fetch()` API. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
+# network_access = true
+
+# Loads metafields on checkout resources, including the cart,
+# products, customers, and more. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields
+
+# [[extensions.metafields]]
+# namespace = "my_namespace"
+# key = "my_key"
+# [[extensions.metafields]]
+# namespace = "my_namespace"
+# key = "my_other_key"
+
+# Defines settings that will be collected from merchants installing
+# your extension. Learn more:
+# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition
+
+# [extensions.settings]
+# [[extensions.settings.fields]]
+# key = "banner_title"
+# type = "single_line_text_field"
+# name = "Banner title"
+# description = "Enter a title for the banner"

extensions/checkout-ui/shopify.extension.toml

@@ -0,0 +1,59 @@
+import {
+  reactExtension,
+  Banner,
+  BlockStack,
+  Checkbox,
+  Text,
+  useApi,
+  useApplyAttributeChange,
+  useInstructions,
+  useTranslate,
+} from "@shopify/ui-extensions-react/checkout";
+
+// 1. Choose an extension target
+export default reactExtension("purchase.checkout.block.render", () => (
+  <Extension />
+));
+
+function Extension() {
+  const translate = useTranslate();
+  const { extension } = useApi();
+  const instructions = useInstructions();
+  const applyAttributeChange = useApplyAttributeChange();
+
+
+  // 2. Check instructions for feature availability, see https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions for details
+  if (!instructions.attributes.canUpdateAttributes) {
+    // For checkouts such as draft order invoices, cart attributes may not be allowed
+    // Consider rendering a fallback UI or nothing at all, if the feature is unavailable
+    return (
+      <Banner title="checkout-ui" status="warning">
+        {translate("attributeChangesAreNotSupported")}
+      </Banner>
+    );
+  }
+
+  // 3. Render a UI
+  return (
+    <BlockStack border={"dotted"} padding={"tight"}>
+      <Banner title="checkout-ui">
+        {translate("welcome", {
+          target: <Text emphasis="italic">{extension.target}</Text>,
+        })}
+      </Banner>
+      <Checkbox onChange={onCheckboxChange}>
+        {translate("iWouldLikeAFreeGiftWithMyOrder")}
+      </Checkbox>
+    </BlockStack>
+  );
+
+  async function onCheckboxChange(isChecked) {
+    // 4. Call the API to modify checkout
+    const result = await applyAttributeChange({
+      key: "requestedFreeGift",
+      type: "updateAttribute",
+      value: isChecked ? "yes" : "no",
+    });
+    console.log("applyAttributeChange result", result);
+  }
+}