Migrate to Webpack based UI build

.gitattributes

@@ -10,6 +10,7 @@
 .gitignore export-ignore
 behat.yml.dist export-ignore
 ecs.php export-ignore
+package.json export-ignore
 phpspec.yml.dist export-ignore
 phpstan.neon export-ignore
 phpstan-baseline.neon export-ignore

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@babdev/product-samples-plugin",
+  "description": "Product samples plugin for Sylius.",
+  "repository": "https://github.com/BabDev/SyliusProductSamplesPlugin.git",
+  "license": "MIT",
+  "scripts": {
+    "dist": "yarn encore production --config-name product-samples-plugin-dist"
+  }
+}

src/Resources/assets/shop/entry.js

@@ -0,0 +1 @@
+import './js';

src/Resources/assets/shop/js/add-to-cart.js

@@ -0,0 +1,107 @@
+export default class AddToCart {
+    /**
+     * @param {HTMLElement} button
+     */
+    constructor(button) {
+        /**
+         * @type {HTMLElement}
+         */
+        this.button = button;
+
+        /**
+         * @type {Element|null}
+         */
+        this.buttonMessageContainer = this.button.querySelector('.button-message');
+    }
+
+    static maybeInit() {
+        const button = document.getElementById('sylius_add_to_cart_requestSample');
+
+        if (button === null) {
+            return;
+        }
+
+        (new AddToCart(button)).init();
+    }
+
+    init() {
+        if (document.getElementById('sylius-variants-pricing') !== null) {
+            document.querySelectorAll('[name*="sylius_add_to_cart[cartItem][variant]"]').forEach(element => {
+                element.addEventListener('change', event => this.handleProductOptionsChange(event));
+            });
+        } else if (document.getElementById('sylius-product-variants') !== null) {
+            document.querySelectorAll('[name="sylius_add_to_cart[cartItem][variant]"]').forEach(element => {
+                element.addEventListener('change', event => this.handleProductVariantsChange(event));
+            });
+        } else {
+            console.log('no init');
+        }
+    }
+
+    /**
+     * @param {Event} event
+     */
+    handleProductOptionsChange(event) {
+        const pricingContainer = document.getElementById('sylius-variants-pricing');
+        let optionPricingSelector = '';
+
+        document.querySelectorAll('#sylius-product-adding-to-cart select[data-option]').forEach(element => {
+            const option = element.options[element.options.selectedIndex];
+
+            optionPricingSelector += `[data-${element.dataset.option}="${option.value}"]`;
+        });
+
+        const optionPricing = pricingContainer.querySelector(optionPricingSelector);
+
+        if (optionPricing === null) {
+            this.updateButtonDisplayText(this.button.dataset.sampleMessage ?? 'Request a Sample');
+
+            return;
+        }
+
+        const isFreeSample = (optionPricing.dataset.freeSample ?? false) === 'yes';
+
+        if (isFreeSample) {
+            this.updateButtonDisplayText(this.button.dataset.freeSampleMessage ?? this.button.dataset.sampleMessage ?? 'Request a Sample');
+        } else {
+            const samplePrice = optionPricing.dataset.samplePrice ?? null;
+
+            if (samplePrice !== null) {
+                this.updateButtonDisplayText((this.button.dataset.paidSampleMessage ?? this.button.dataset.sampleMessage ?? 'Request a Sample').replace('%price%', samplePrice));
+            } else {
+                this.updateButtonDisplayText(this.button.dataset.sampleMessage ?? 'Request a Sample');
+            }
+        }
+    }
+
+    /**
+     * @param {Event} event
+     */
+    handleProductVariantsChange(event) {
+        const priceRow = event.currentTarget.closest('tr').querySelector('.sylius-product-variant-price');
+        const isFreeSample = (priceRow.dataset.freeSample ?? false) === 'yes';
+
+        if (isFreeSample) {
+            this.updateButtonDisplayText(this.button.dataset.freeSampleMessage ?? this.button.dataset.sampleMessage ?? 'Request a Sample');
+        } else {
+            const samplePrice = priceRow.dataset.samplePrice ?? null;
+
+            if (samplePrice !== null) {
+                this.updateButtonDisplayText((this.button.dataset.paidSampleMessage ?? this.button.dataset.sampleMessage ?? 'Request a Sample').replace('%price%', samplePrice));
+            } else {
+                this.updateButtonDisplayText(this.button.dataset.sampleMessage ?? 'Request a Sample');
+            }
+        }
+    }
+
+    /**
+     * @param {String} text
+     */
+    updateButtonDisplayText(text) {
+        if (this.buttonMessageContainer !== null) {
+            this.buttonMessageContainer.innerText = text;
+        } else {
+            this.button.innerText = text;
+        }
+    }
+}

src/Resources/assets/shop/js/index.js

@@ -0,0 +1,3 @@
+import AddToCart from './add-to-cart';
+
+AddToCart.maybeInit();

src/Resources/config/app/config.yaml

@@ -11,9 +11,3 @@ sylius_ui:
                 product_samples:
                     template: "@BabDevSyliusProductSamplesPlugin/Admin/Channel/_product_samples_form.html.twig"
                     priority: 0
-
-        sylius.shop.layout.javascripts:
-            blocks:
-                request_a_sample_javascript:
-                    template: "@BabDevSyliusProductSamplesPlugin/Shop/JavaScript/_request_a_sample.html.twig"
-                    priority: 0

src/Resources/public/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "babdev-product-samples-shop": {
+      "js": [
+        "/public/babdev-product-samples-shop.js"
+      ]
+    }
+  }
+}

src/Resources/public/manifest.json

@@ -0,0 +1,3 @@
+{
+  "public/babdev-product-samples-shop.js": "/public/babdev-product-samples-shop.js"
+}

tests/Application/config/packages/_sylius.yaml

@@ -34,3 +34,11 @@ sylius_product:
             classes:
                 model: 'BabDev\SyliusProductSamplesPlugin\Tests\App\Model\ProductVariant'
                 repository: 'BabDev\SyliusProductSamplesPlugin\Doctrine\ORM\ProductVariantRepository'
+
+sylius_ui:
+    events:
+        sylius.shop.layout.javascripts:
+            blocks:
+                request_a_sample_javascript:
+                    template: 'JavaScript/plugin.html.twig'
+                    priority: 0

src/Resources/views/Shop/JavaScript/_request_a_sample.html.twig → tests/Application/templates/JavaScript/plugin.html.twig

@@ -1,3 +1,3 @@
 {% if app.request.attributes.get('_route') == 'sylius_shop_product_show' %}
-    {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'bundles/babdevsyliusproductsamplesplugin/js/request-a-sample.js'} %}
+    {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'bundles/babdevsyliusproductsamplesplugin/babdev-product-samples-shop.js'} %}
 {% endif %}

tests/Application/templates/bundles/SyliusShopBundle/Product/Show/_addToCart.html.twig

@@ -28,7 +28,7 @@
         <div class="ui large buttons">
             <button type="submit" class="ui primary icon labeled button" {{ sylius_test_html_attribute('add-to-cart-button') }}><i class="cart icon"></i> {{ 'sylius.ui.add_to_cart'|trans }}</button>
             <div class="or" data-text="{{ 'sylius.ui.or'|trans|e('html_attr') }}"></div>
-            <button type="button" class="ui icon labeled button" id="{{ form.requestSample.vars.id }}" name="{{ form.requestSample.vars.full_name }}" data-free-sample-message="{{ 'babdev_sylius_product_samples.ui.request_a_free_sample'|trans|e('html_attr') }}" data-paid-sample-message="{{ 'babdev_sylius_product_samples.ui.request_a_paid_sample'|trans|e('html_attr') }}" {{ sylius_test_html_attribute('request-a-sample-button') }}>
+            <button type="button" class="ui icon labeled button" id="{{ form.requestSample.vars.id }}" name="{{ form.requestSample.vars.full_name }}" data-free-sample-message="{{ 'babdev_sylius_product_samples.ui.request_a_free_sample'|trans|e('html_attr') }}" data-paid-sample-message="{{ 'babdev_sylius_product_samples.ui.request_a_paid_sample'|trans|e('html_attr') }}" data-sample-message="{{ 'babdev_sylius_product_samples.ui.request_a_sample'|trans|e('html_attr') }}" {{ sylius_test_html_attribute('request-a-sample-button') }}>
                 <i class="envelope icon"></i>&nbsp;
                 {%- if samplePricing.price == 0 %}
                     <span class="button-message">{{ 'babdev_sylius_product_samples.ui.request_a_free_sample'|trans }}</span>

webpack.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const Encore = require('@symfony/webpack-encore');
+const pluginName = 'product-samples';
+
+const getConfig = (pluginName, type) => {
+    Encore.reset();
+
+    Encore
+        .setOutputPath(`public/build/babdev/${pluginName}/${type}/`)
+        .setPublicPath(`/build/babdev/${pluginName}/${type}/`)
+        .addEntry(`babdev-${pluginName}-${type}`, path.resolve(__dirname, `./src/Resources/assets/${type}/entry.js`))
+        .disableSingleRuntimeChunk()
+        .cleanupOutputBeforeBuild()
+        .enableSourceMaps(!Encore.isProduction())
+        .enableSassLoader();
+
+    const config = Encore.getWebpackConfig();
+    config.name = `babdev-${pluginName}-${type}`;
+
+    return config;
+}
+
+Encore
+    .setOutputPath('src/Resources/public/')
+    .setPublicPath('/public/')
+    .addEntry(`babdev-${pluginName}-shop`, path.resolve(__dirname, './src/Resources/assets/shop/entry.js'))
+    .cleanupOutputBeforeBuild()
+    .disableSingleRuntimeChunk()
+    .enableSassLoader();
+
+const distConfig = Encore.getWebpackConfig();
+distConfig.name = 'product-samples-plugin-dist';
+
+Encore.reset();
+
+const shopConfig = getConfig(pluginName, 'shop')
+
+module.exports = [shopConfig, distConfig];