Merge branch 'main' into feature/add-trial-days

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
-    "shopify.polaris-for-vscode"
+    "shopify.polaris-for-vscode",
+    "lokalise.i18n-ally"
   ]
-} 
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "i18n-ally.localesPaths": [
+    "web/frontend/locales"
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "i18next-shopify"
+  ],
+  "i18n-ally.keystyle": "nested"
+}

README.md

@@ -26,6 +26,12 @@ This template combines a number of third party open source tools:
 -   [Vite](https://vitejs.dev/) builds the [React](https://reactjs.org/) frontend.
 -   [React Router](https://reactrouter.com/) is used for routing. We wrap this with file-based routing.
 -   [React Query](https://react-query.tanstack.com/) queries the Admin API.
+-   [`i18next`](https://www.i18next.com/) and related libraries are used to internationalize the frontend.
+    -   [`react-i18next`](https://react.i18next.com/) is used for React-specific i18n functionality.
+    -   [`i18next-resources-to-backend`](https://github.com/i18next/i18next-resources-to-backend) is used to dynamically load app translations.
+    -   [`@formatjs/intl-localematcher`](https://formatjs.io/docs/polyfills/intl-localematcher/) is used to match the user locale with supported app locales.
+    -   [`@formatjs/intl-locale`](https://formatjs.io/docs/polyfills/intl-locale) is used as a polyfill for [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) if necessary.
+    -   [`@formatjs/intl-pluralrules`](https://formatjs.io/docs/polyfills/intl-pluralrules) is used as a polyfill for [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) if necessary.
 
 These third party tools are complemented by Shopify specific tools to ease app development:
 
@@ -34,6 +40,7 @@ These third party tools are complemented by Shopify specific tools to ease app d
 -   [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
 -   [Custom hooks](https://github.com/Shopify/shopify-frontend-template-react/tree/main/hooks) make authenticated requests to the GraphQL Admin API.
 -   [File-based routing](https://github.com/Shopify/shopify-frontend-template-react/blob/main/Routes.jsx) makes creating new pages easier.
+-   [`@shopify/i18next-shopify`](https://github.com/Shopify/i18next-shopify) is a plugin for [`i18next`](https://www.i18next.com/) that allows translation files to follow the same JSON schema used by Shopify [app extensions](https://shopify.dev/docs/apps/checkout/best-practices/localizing-ui-extensions#how-it-works) and [themes](https://shopify.dev/docs/themes/architecture/locales/storefront-locale-files#usage).
 
 ## Getting started
 
@@ -265,7 +272,9 @@ To do that, you can [install the `cloudflared` CLI tool](https://developers.clou
 # Note that you can also use a different port
 cloudflared tunnel --url http://localhost:3000
 ```
+
 In the output produced by `cloudflared tunnel` command, you will notice a https URL where the domain ends with `trycloudflare.com`. This is your tunnel URL. You need to copy this URL as you will need it in the next step.
+
 ```shell
 2022-11-11T19:57:55Z INF Requesting new quick Tunnel on trycloudflare.com...
 2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+
@@ -291,3 +300,10 @@ pnpm dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000
 -   [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-php/tree/main/docs)
+-   [Getting started with internationalizing your app](https://shopify.dev/docs/apps/best-practices/internationalization/getting-started)
+    -   [i18next](https://www.i18next.com/)
+        -   [Configuration options](https://www.i18next.com/overview/configuration-options)
+    -   [react-i18next](https://react.i18next.com/)
+        -   [`useTranslation` hook](https://react.i18next.com/latest/usetranslation-hook)
+        -   [`Trans` component usage with components array](https://react.i18next.com/latest/trans-component#alternative-usage-components-array)
+    -   [i18n-ally VS Code extension](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)

web/app/Http/Kernel.php

@@ -21,6 +21,7 @@ class Kernel extends HttpKernel
         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
         \App\Http\Middleware\TrimStrings::class,
         \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
+        \App\Http\Middleware\AccessControlHeaders::class,
     ];
 
     /**

web/app/Http/Middleware/AccessControlHeaders.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Shopify\Context;
+
+class AccessControlHeaders
+{
+    /**
+     * Ensures that Access Control Headers are set for embedded apps.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle(Request $request, Closure $next)
+    {
+        if (Context::$IS_EMBEDDED_APP) {
+
+            /** @var Response $response */
+            $response = $next($request);
+
+            $response->headers->set("Access-Control-Allow-Origin", "*");
+            $response->headers->set("Access-Control-Allow-Header", "Authorization");
+            $response->headers->set("Access-Control-Expose-Headers", 'X-Shopify-API-Request-Failure-Reauthorize-Url');
+
+            return $response;
+        }
+    }
+}

web/shopify.web.toml

@@ -1,4 +1,4 @@
-type="backend"
+roles = ["backend"]
 
 [commands]
 dev = "composer serve"