Merge branch 'main' into feat/update-storefront-2.5.7

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "spree_starter"]
-	path = spree_starter
-	url = https://github.com/spree/spree_starter

README.md

@@ -24,25 +24,29 @@ This integration is being developed and maintained by [Upside](https://upsidelab
 ## Requirements
 
 - Node 14.15+
-- Spree-based store with V2 API available. Some API endpoints used by the integration are only available in Spree 4.2+, so you may need to either upgrade the store or backport these features to your backend.
+- Spree 4.3+
 
 ## Deploy in the cloud
 
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
 ## Getting Started
 
-1. Clone this repository
+The easiest way to setup a new Spree + Vue Storefront setup, is to follow out [Quick Start Guide](https://dev-docs.spreecommerce.org/getting-started/quick-start-guide).
+
+Simply run the Spree CLI and follow the instructions:
+
 ```sh
-git clone https://github.com/vuestorefront/spree.git
+npx @spree/cli new app
 ```
 
-2. Install all required dependencies:
+## Manually adding Vue Storefront to an existing Spree project
 
+1. Clone this repository
 ```sh
-yarn install
+git clone https://github.com/vuestorefront/spree.git
 ```
 
-3. Set backend URL via env variable
+2. Set backend URL via env variable
 ```sh
 export BACKEND_URL=https://demo.spreecommerce.org
 ```
@@ -51,45 +55,20 @@ Or via `.env.development` file:
 BACKEND_URL=https://demo.spreecommerce.org
 ```
 
-4. Then build all three projects:
+3. Then install dependencies and build the required packages
 
 ```sh
-yarn build
+bin/setup
 ```
 
 5. If everything built properly, you can start working on your new frontend with:
 
 ```sh
-yarn dev
+bin/start
 ```
 
 Changing some parts of the code (notably the `api-client`) will trigger a re-build but the change will not be hot-reloaded. To ensure that the app sees you changes, re-run either `yarn build` or `yarn dev`.
 
-## Running Vue Storefront + Spree in Docker
-
-1. Initialize the Git submodules and setup Spree images
-```sh
-./bin/setup
-```
-
-2. (optional) Seed the backend database
-```sh
-./bin/seed
-```
-
-3. Start the application
-```sh
-./bin/start
-```
-
-The Vue Storefront application is available at `http://localhost:3000`.
-The Spree backend is exposed at `http://localhost:4000`.
-
-4. Stopping the application
-```sh
-./bin/stop
-```
-
 ## Enabling optional features
 
 Some features that are either provided by Spree's extensions or that are only available in newer versions, need to be manually enabled in the configuration file. To do that, open the `packages/theme/middleware.config.js` and update the configuration to desired state
@@ -127,32 +106,6 @@ The monorepo contains three submodules:
 
 For more details, refer to the official [project structure](https://docs.vuestorefront.io/v2/getting-started/project-structure.html).
 
-## Feature support
-
-| Feature | Status | Notes |
-| --- | --- | --- |
-| Sign in | Available | |
-| Sign up | Available | |
-| Product catalog | Available | Default implementation uses /v2/storefront/products endpoint for filtering, it's advisable to use ElasticSearch for best performance | Product details page | Available | |
-| Account | Partial | Requires Spree 4.2 |
-| Account - saved addresses | Available | Requires Spree 4.2 |
-| Account - reset password | Available | URL from password reset emails should point to: `/resetPassword?token=...` |
-| Account - order history | Available | |
-| Cart | Available | Associating guest orders upon login requires Spree 4.3 and needs to be enable via configuration |
-| Checkout | Available | |
-| Checkout - Shipping methods | Available | |
-| Checkout - Payment methods | Available | Cash and Stripe Elements gateways supported out of the box. |
-| Wishlists | Available | Available only for logged in users. By default, this feature is disabled and can be enabled in `middleware.config.js` |
-| Multi-currency support | Available | Requires Spree 4.2 or spree_multi_currency extension |
-
-## Caching and performance concerns
-
-### Spree 4.3
-
-V2 API endpoints include built-in cache.
-
-### Spree 4.2
-In Spree < 4.3, API endpoints aren't cached out of the box. To ensure smooth operation of the frontend, you need to add caching to GET actions of the API. Putting e.g. AWS Cloudfront in front of the API is a fairly simple option and can do wonders in that regard. If your application uses custom logic (e.g. different price for each user), remember to make sure that your cache keys reflect that.
 
 ## Resources
 

app.json

@@ -11,8 +11,8 @@
       "value": "https://demo.spreecommerce.org"
     },
     "SPREE_VERSION": {
-      "description": "Spree version of the backend. Either \"spree42\" or \"spree43\".",
-      "value": "spree42"
+      "description": "Spree version of the backend. Either \"spree43\", \"spree44\" or \"spree45\".",
+      "value": "spree45"
     }
   },
   "buildpacks": [

bin/setup

@@ -1,16 +1,6 @@
-#!/usr/bin/env bash
+#!/bin/bash
+set -o errexit
 
-git submodule init && git submodule update
-
-cd spree_starter && rm -rf .env && cp -f .env.sample .env &&
-docker-compose pull &&
-docker-compose build web &&
-docker-compose run --rm web bash -c '
-  bin/wait-for-services &&
-  (bundle check || bundle install) &&
-  bundle exec rails db:drop &&
-  bundle exec rails db:create &&
-  bundle exec rails db:migrate &&
-  bundle exec rails db:seed &&
-  rm -rf tmp/latest.dump
-'
+yarn install
+yarn build
+yarn dev

bin/setup-docker

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -o errexit
+
+docker compose build

bin/start

@@ -1,4 +1,4 @@
-#!/usr/bin/env bash
+#!/bin/bash
+set -o errexit
 
-docker-compose -f spree_starter/docker-compose.yml up -d
-docker-compose up -d
+yarn dev

bin/start-docker

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -o errexit
+
+docker compose up

docs/.vuepress/config.js

@@ -48,7 +48,7 @@ module.exports = {
           ['/', 'Introduction'],
           ['/guide/getting-started', 'Getting started'],
           ['/guide/configuration', 'Configuration'],
-          ['/guide/multi-currency', 'Mult-currency support'],
+          ['/guide/feature-support', 'Feature support'],
           ['/guide/about', 'About'],
         ]
       },

docs/guide/configuration.md

@@ -1,42 +1,70 @@
 # Configuration
 
-The integration is configured via `middleware.config.js` file.
+The integration is configured via `middleware.config.js` file:
 
-```
+```js
 module.exports = {
   integrations: {
     spree: {
       location: '@vue-storefront/spree-api/server',
       configuration: {
         backendUrl: process.env.BACKEND_URL,
         assetsUrl: process.env.ASSETS_URL,
-        spreeFeatures: defaultFeatures.spree43
+        spreeFeatures: {
+          ...defaultFeatures[process.env.SPREE_VERSION || 'spree45'],
+          wishlist: 'disabled'
+        }
       }
     }
   }
 };
 ```
 
-## Backend URL
+## Environment variables
+All the settings can be specified by using the environment variables as long as you don't need to make custom changes to [Spree Features](#spree-features) configuration.
+
+A recommended way of setting the variables is via `.env.development` and `.env.production` files:
+```sh
+BACKEND_URL=http://localhost:4000
+ASSETS_URL=...
+SPREE_VERSION=...
+```
+
+### Backend URL
+
+By default, the Vue Storefront application will connect to the API at https://demo.spreecommerce.org. You can change it by setting the `BACKEND_URL` env variable.
 
-By default the integration will use the `BACKEND_URL` environment variable. If it's not present, it will fallback to `https://demo.spreecommerce.org`.
+### Assets URL
+The `ASSETS_URL` indicates the main url for images, css. If it's not present, it will fallback to `BACKEND_URL`.
 
-## Assets URL
-The `ASSETS_URL` indicate the main url for images, css. f it's not present, it will fallback to `BACKEND_URL`.
+### Spree version (presets)
+Specify the version of Spree that you are using (if not provided, it will fallback to `spree45`). Using a dedicated preset will ensure that Vue Storefront only uses the [features](#spree-features) compatible with your version of Spree.
+
+The supported options are: `spree43`, `spree44`, `spree45`.
 
 ## Spree Features
 
-Spree features is an object containing features flags to be enabled.
-This is done to achieve backwards compatibility, as some of the features require Spree 4.3+. They can be disabled, to provide slightly degraded experience, but you may do it if you'd like to experiment with Vue Storefront without upgrading 4.2 to 4.3.
+Spree features is an object containing features flags to be enabled. This is done to achieve backwards compatibility with various Spree versions.
+
+Also some features that are either provided by Spree's extensions or that are only available in newer versions, need to be manually enabled in the configuration file (for example wishlists). You can also use it to overwrite the chosen [preset](#spree-version-presets)'s feature configuration.
 
 ```js
 spreeFeatures: {
-  associateGuestCart: true,
-  fetchPrimaryVariant: true,
-  wishlist: 'disabled'
+  ...
+  // Associate guest cart after the customer logs in. Requires Spree 4.3+
+  associateGuestCart: false,
+  // Fetch basic information about products from the `primary_variant` relationship. Requires Spree 4.3+
+  fetchPrimaryVariant: false,
+  // Wishlist for authenticated users.
+  // Accepted values: 'enabled' (Spree 4.4+), 'legacy' (Spree with `spree_wishlist` gem), 'disabled'.
+  wishlist:  'disabled'
 }
 ```
 
+:::tip
+Some of the features that require Spree 4.3+ can be disabled, to provide slightly degraded experience, but you may do it if you'd like to experiment with Vue Storefront without upgrading 4.2 to 4.3.
+:::
+
 ### associateGuestCart
 
 Defines whether a guest cart should be associated with user after sign in. This requires `/api/v2/storefront/cart/associate` endpoint, available in Spree 4.3+.
@@ -54,3 +82,8 @@ Accepted `wishlist` values:
 - `'enabled'` (Spree 4.4+)
 - `'legacy'` (Spree older than 4.4 with `spree_wishlist` gem installed)
 - `'disabled'` (Spree older than 4.4 without `spree_wishlist` gem)
+
+## Spree configuration
+
+### Password reset functionality
+In order for the password reset feature to work properly, you need to change the URL of password reset emails to point to: `/resetPassword?token=...`

docs/guide/multi-currency.md → docs/guide/feature-support.md

@@ -1,4 +1,22 @@
-# Multi-currency support
+# Feature support
+
+| Feature | Status | Notes |
+| --- | --- | --- |
+| Sign in | Available | |
+| Sign up | Available | |
+| Product catalog | Available | Default implementation uses /v2/storefront/products endpoint for filtering, it's advisable to use ElasticSearch for best performance | Product details page | Available | |
+| Account | Partial | Requires Spree 4.2 |
+| Account - saved addresses | Available | Requires Spree 4.2 |
+| Account - reset password | Available | URL from password reset emails should point to: `/resetPassword?token=...` |
+| Account - order history | Available | |
+| Cart | Available | Associating guest orders upon login requires Spree 4.3 and needs to be enable via configuration |
+| Checkout | Available | |
+| Checkout - Shipping methods | Available | |
+| Checkout - Payment methods | Available | Cash and Stripe Elements gateways supported out of the box. |
+| Wishlists | Available | Available only for logged in users. By default, this feature is disabled and can be enabled in `middleware.config.js` |
+| Multi-currency support | Available | Requires Spree 4.2 or spree_multi_currency extension |
+
+## Multi-currency support
 
 Since 1.3.0, Spree + Vue Storefront integration supports multiple currencies natively.
 
@@ -8,7 +26,7 @@ This means that if your store is available in English and German, and supports U
 
 To use multiple currencies, you'll need to set up available currencies both in Spree and in Vue Storefront.
 
-## Enabling multiple currencies in Spree admin panel
+### Enabling multiple currencies in Spree admin panel
 
 As the first step, you'll need to configure available currencies in Spree's backend.
 
@@ -21,35 +39,20 @@ Then, you'll need to set prices in these currencies for products. When editing a
 
 When the customer chooses a given currency, they'll only see products that have a price set in that currency.
 
-## Configuring available currencies in Vue Storefront
+### Configuring available currencies in Vue Storefront
 
 Next, you'll need to set up the currency in Vue Storefront's configuration.
 
 Open `packages/theme/nuxt.config.js` and find the following definition:
 
 ```js
-vueI18n: {
-  silentTranslationWarn: true,
-  fallbackLocale: 'en',
-  numberFormats: {
-    en: {
-      currency: {
-        style: 'currency',
-        currency: 'USD',
-        currencyDisplay: 'symbol',
-        currencyDefault: 'USD'
-      }
-    },
-    de: {
-      currency: {
-        style: 'currency',
-        currency: 'EUR',
-        currencyDisplay: 'symbol',
-        currencyDefault: 'EUR'
-      }
-    }
-  },
-},
+publicRuntimeConfig: {
+  ...
+  currencies: [
+    { code: 'USD', label: 'Dollar' },
+    { code: 'EUR', label: 'Euro' }
+  ]
+}
 ```
 
 To add a new currency, you'll need to add its definition to the dictionary. After that, it will be visible in the currency switcher and available to the customer to use.