[3.x] GraphQL checkout

.github/workflows/dusk.yml

@@ -16,14 +16,6 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - magento-version: 2.4.5-p9
-            magento-php-version: php81-fpm
-            rapidez-php-version: 8.2
-
-          - magento-version: 2.4.6-p7
-            magento-php-version: php82-fpm
-            rapidez-php-version: 8.2
-
           - magento-version: 2.4.7-p2
             magento-php-version: php82-fpm
             rapidez-php-version: 8.2
@@ -37,7 +29,7 @@ jobs:
         env:
           URL: http://localhost:1234/
           FLAT_TABLES: true
-          CUSTOM_ENTRYPOINT_COMMAND: "php bin/magento encryption:key:change -k 5AM3SD5SkwT8iwIxL6L1q8XQhzK3wk51; magerun2 config:store:set system/smtp/disable 1; magerun2 config:store:set checkout/options/enable_guest_checkout_login 1f"
+          CUSTOM_ENTRYPOINT_COMMAND: "php bin/magento encryption:key:change -k 5AM3SD5SkwT8iwIxL6L1q8XQhzK3wk51; magerun2 config:store:set system/smtp/disable 1; magerun2 config:store:set checkout/options/enable_guest_checkout_login 1"
         ports:
           - 3307:3306
           - 9200:9200

.github/workflows/phpunit.yml

@@ -15,17 +15,12 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        php: [8.1, 8.2, 8.3]
-        laravel: [10.*, 11.*]
+        php: [8.2, 8.3]
+        laravel: [11.*]
         stability: [prefer-lowest, prefer-stable]
         include:
-          - laravel: 10.*
-            testbench: 8.*
           - laravel: 11.*
             testbench: 9.*
-        exclude:
-          - laravel: 11.*
-            php: 8.1
 
     services:
       mysql:

.prettierignore

@@ -5,6 +5,21 @@
 **/*.php
 !**/*.blade.php
 /resources/views/cart/queries/cart.graphql
+/resources/views/cart/queries/fragments/cart.graphql
+/resources/views/cart/queries/fragments/product.graphql
 /resources/views/cart/queries/partials/customizable_options.graphql
+/resources/views/checkout/queries/fragments/item.graphql
+/resources/views/checkout/queries/fragments/order.graphql
+/resources/views/checkout/queries/fragments/orderV2.graphql
+/resources/views/checkout/queries/placeOrder.graphql
+/resources/views/checkout/queries/setBillingAddressOnCart.graphql
+/resources/views/checkout/queries/setExistingBillingAddressOnCart.graphql
+/resources/views/checkout/queries/setExistingShippingAddressesOnCart.graphql
+/resources/views/checkout/queries/setGuestEmailOnCart.graphql
+/resources/views/checkout/queries/setNewBillingAddressOnCart.graphql
+/resources/views/checkout/queries/setNewShippingAddressesOnCart.graphql
+/resources/views/checkout/queries/setPaymentMethodOnCart.graphql
+/resources/views/checkout/queries/setShippingMethodsOnCart.graphql
+/resources/views/customer/queries/customer.graphql
 composer.lock
 CHANGELOG.md

composer.json

@@ -19,10 +19,10 @@
         "php": "^8.1|^8.2|^8.3",
         "blade-ui-kit/blade-heroicons": "^2.4",
         "mailerlite/laravel-elasticsearch": "^11.1",
-        "illuminate/database": "^10.0|^11.0",
-        "illuminate/events": "^10.0|^11.0",
-        "illuminate/queue": "^10.0|^11.0",
-        "illuminate/support": "^10.0|^11.0",
+        "illuminate/database": "^11.0",
+        "illuminate/events": "^11.0",
+        "illuminate/queue": "^11.0",
+        "illuminate/support": "^11.0",
         "lcobucci/clock": "^2.0|^3.2",
         "lcobucci/jwt": "^4.0|^5.3",
         "rapidez/blade-directives": "^0.6",

config/rapidez/frontend.php

@@ -26,7 +26,8 @@
     // add different steps for different stores. Keep
     // them lowercase and do not include any spaces.
     'checkout_steps' => [
-        'default' => ['cart', 'login', 'credentials', 'payment', 'success'],
+        // 'default' => ['onestep'],
+        'default' => ['login', 'credentials', 'payment'],
     ],
 
     'autocomplete' => [

config/rapidez/routing.php

@@ -7,9 +7,14 @@
 
     // The fully qualified class names of the controllers.
     'controllers' => [
-        'page'     => Rapidez\Core\Http\Controllers\PageController::class,
-        'product'  => Rapidez\Core\Http\Controllers\ProductController::class,
-        'category' => Rapidez\Core\Http\Controllers\CategoryController::class,
+        'category'         => Rapidez\Core\Http\Controllers\CategoryController::class,
+        'checkout'         => Rapidez\Core\Http\Controllers\CheckoutController::class,
+        'checkout-success' => Rapidez\Core\Http\Controllers\CheckoutSuccessController::class,
+        'fallback'         => Rapidez\Core\Http\Controllers\FallbackController::class,
+        'healthcheck'      => Rapidez\Core\Http\Controllers\HealthcheckController::class,
+        'page'             => Rapidez\Core\Http\Controllers\PageController::class,
+        'product'          => Rapidez\Core\Http\Controllers\ProductController::class,
+        'search'           => Rapidez\Core\Http\Controllers\SearchController::class,
     ],
 
     'fallback' => [

package.json

@@ -13,8 +13,12 @@
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue2": "^2.2.0",
         "@vueuse/core": "^9.12.0",
+        "@vueuse/integrations": "^10.11.0",
         "autoprefixer": "^10.4.15",
         "cross-env": "^7.0.3",
+        "graphql": "^16.8.1",
+        "graphql-combine-query": "indykoning/graphql-combine-query#feature/add-allowed-duplicates",
+        "graphql-tag": "^2.12.6",
         "laravel-vite-plugin": "^0.7.3",
         "postcss": "^8.4.29",
         "postcss-import": "^15.1.0",
@@ -23,6 +27,7 @@
         "rollup-plugin-visualizer": "^5.9.0",
         "tailwind-scrollbar-hide": "^1.1.7",
         "tailwindcss": "^3.3.3",
+        "universal-cookie": "^7.1.4",
         "vite": "^4.0.4",
         "vue": "^2.7",
         "vue-clickaway": "^2.2.2",

phpunit.dusk.xml.dist

@@ -27,11 +27,15 @@
         <env name="CRYPT_KEY" value="5AM3SD5SkwT8iwIxL6L1q8XQhzK3wk51"/>
         <env name="APP_DEBUG" value="true"/>
         <env name="VITE_DEBUG" value="true"/>
+        <env name="APP_MAINTENANCE_STORE" value="file"/>
         <env name="DB_CONNECTION" value="mysql"/>
         <env name="DB_HOST" value="127.0.0.1"/>
         <env name="DB_PORT" value="3307"/>
         <env name="DB_DATABASE" value="magento"/>
         <env name="DB_USERNAME" value="magento"/>
         <env name="DB_PASSWORD" value="password"/>
+        <env name="CACHE_STORE" value="file"/>
+        <env name="QUEUE_CONNECTION" value="sync"/>
+        <env name="SESSION_DRIVER" value="file"/>
     </php>
 </phpunit>

phpunit.xml.dist

@@ -25,11 +25,15 @@
     </coverage>
     <php>
         <env name="APP_ENV" value="testing"/>
+        <env name="APP_MAINTENANCE_STORE" value="file"/>
         <env name="DB_CONNECTION" value="mysql"/>
         <env name="DB_HOST" value="127.0.0.1"/>
         <env name="DB_PORT" value="3307"/>
         <env name="DB_DATABASE" value="magento-test"/>
         <env name="DB_USERNAME" value="magento"/>
         <env name="DB_PASSWORD" value="password"/>
+        <env name="CACHE_STORE" value="file"/>
+        <env name="QUEUE_CONNECTION" value="sync"/>
+        <env name="SESSION_DRIVER" value="file"/>
     </php>
 </phpunit>

resources/js/callbacks.js

@@ -1,4 +1,6 @@
 import { cart, clear as clearCart, getAttributeValues } from './stores/useCart'
+import { fillFromGraphqlResponse as updateOrder, order } from './stores/useOrder'
+import { runAfterPlaceOrderHandlers, runBeforePaymentMethodHandlers, runBeforePlaceOrderHandlers } from './stores/usePaymentHandlers'
 import { refresh as refreshUser, token } from './stores/useUser'
 
 Vue.prototype.scrollToElement = (selector) => {
@@ -13,7 +15,91 @@ Vue.prototype.getCheckoutStep = (stepName) => {
     return (config.checkout_steps[config.store_code] ?? config.checkout_steps['default'])?.indexOf(stepName)
 }
 
+Vue.prototype.submitFieldsets = async function (form) {
+    let promises = []
+    form.querySelectorAll('[data-function]').forEach((fieldset) => {
+        if (!fieldset?.dataset?.function || !fieldset?.__vue__) {
+            return
+        }
+
+        promises.push(
+            fieldset.__vue__[fieldset?.dataset?.function]().then((result) => {
+                if (result === false) {
+                    throw new Error()
+                }
+            }),
+        )
+    })
+
+    return await Promise.all(promises)
+}
+
 Vue.prototype.updateCart = async function (variables, response) {
+    cart.value = 'cart' in Object.values(response.data)[0] ? Object.values(response.data)[0].cart : Object.values(response.data)[0]
+
+    getAttributeValues().then((response) => {
+        if (!response?.data?.customAttributeMetadata?.items) {
+            return
+        }
+
+        const mapping = Object.fromEntries(
+            response.data.customAttributeMetadata.items.map((attribute) => [
+                attribute.attribute_code,
+                Object.fromEntries(attribute.attribute_options.map((value) => [value.value, value.label])),
+            ]),
+        )
+
+        cart.value.items = cart.value.items.map((cartItem) => {
+            cartItem.product.attribute_values = {}
+
+            for (const key in mapping) {
+                cartItem.product.attribute_values[key] = cartItem.product[key]
+                if (cartItem.product.attribute_values[key] === null) {
+                    continue
+                }
+
+                if (typeof cartItem.product.attribute_values[key] === 'string') {
+                    cartItem.product.attribute_values[key] = cartItem.product.attribute_values[key].split(',')
+                }
+
+                if (typeof cartItem.product.attribute_values[key] !== 'object') {
+                    cartItem.product.attribute_values[key] = [cartItem.product.attribute_values[key]]
+                }
+
+                cartItem.product.attribute_values[key] = cartItem.product.attribute_values[key].map((value) => mapping[key][value] || value)
+            }
+
+            return cartItem
+        })
+    })
+
+    return response.data
+}
+
+Vue.prototype.checkResponseForExpiredCart = async function (variables, response) {
+    if (
+        response?.errors?.some(
+            (error) =>
+                error.extensions.category === 'graphql-no-such-entity' &&
+                // Untested, but something like this is maybe a better idea as
+                // we're using a lot of different mutations in the checkout.
+                error.path.some((path) => path.toLowerCase().includes('cart')),
+        )
+    ) {
+        Notify(window.config.translations.errors.cart_expired, 'error')
+        clearCart()
+        if (token.value !== undefined) {
+            // If the cart has expired, check if the session is not expired
+            refreshUser()
+        }
+
+        return true
+    }
+
+    return false
+}
+
+Vue.prototype.updateCart = async function (data, response) {
     if (!response?.data) {
         return response?.data
     }
@@ -52,3 +138,23 @@ Vue.prototype.checkResponseForExpiredCart = async function (variables, response)
 
     return false
 }
+
+Vue.prototype.handleBeforePaymentMethodHandlers = runBeforePaymentMethodHandlers
+Vue.prototype.handleBeforePlaceOrderHandlers = runBeforePlaceOrderHandlers
+
+Vue.prototype.handlePlaceOrder = async function (data, response) {
+    if (!response?.data) {
+        return response?.data
+    }
+
+    if (!response?.data?.placeOrder?.orderV2 && response?.data?.placeOrder?.errors) {
+        const message = response.data.placeOrder.errors.find(() => true).message
+        Notify(message, 'error')
+        throw new Error(message)
+    }
+
+    await updateOrder(data, response)
+    await runAfterPlaceOrderHandlers(response, this)
+
+    return response.data
+}