Add customer address books in order creation view | Add webpack

.gitignore

@@ -4,9 +4,11 @@
 /vendor/
 /node_modules/
 /composer.lock
+/phpspec.yml
 
 /etc/build/*
 !/etc/build/.gitkeep
+!/etc/build/.gitignore
 
 /tests/Application/yarn.lock
 

README.md

@@ -66,15 +66,15 @@ Symfony Flex, it's much quicker! :)
    2. Paste the following content to the `src/Repository/CustomerRepository.php`:
       ```php
       <?php
-    
+
       declare(strict_types=1);
-    
+
       namespace App\Repository;
-      
+
       use Sylius\AdminOrderCreationPlugin\Doctrine\ORM\CustomerRepositoryInterface;
       use Sylius\AdminOrderCreationPlugin\Doctrine\ORM\CustomerRepositoryTrait;
       use Sylius\Bundle\CoreBundle\Doctrine\ORM\CustomerRepository as BaseCustomerRepository;
-      
+
       final class CustomerRepository extends BaseCustomerRepository implements CustomerRepositoryInterface
       {
           use CustomerRepositoryTrait;
@@ -83,15 +83,15 @@ Symfony Flex, it's much quicker! :)
    3. Paste the following content to the `src/Repository/ProductVariantRepository.php`:
       ```php
       <?php
-    
+
       declare(strict_types=1);
-    
+
       namespace App\Repository;
 
       use Sylius\AdminOrderCreationPlugin\Doctrine\ORM\ProductVariantRepositoryInterface;
       use Sylius\AdminOrderCreationPlugin\Doctrine\ORM\ProductVariantRepositoryTrait;
       use Sylius\Bundle\CoreBundle\Doctrine\ORM\ProductVariantRepository as BaseProductVariantRepository;
-      
+
       final class ProductVariantRepository extends BaseProductVariantRepository implements ProductVariantRepositoryInterface
       {
           use ProductVariantRepositoryTrait;
@@ -105,15 +105,64 @@ Symfony Flex, it's much quicker! :)
                 classes:
                     model: App\Entity\Customer\Customer
    +                repository: App\Repository\CustomerRepository
-   
+
     sylius_product:
         resources:
             product_variant:
                 classes:
                     model: App\Entity\Product\ProductVariant
    +                repository: App\Repository\ProductVariantRepository
    ```
+
+   4. Add plugin assets to your project
+      1. Import webpack config
+         1. Import plugin's `webpack.config.js` file
+            ```js
+            // webpack.config.js
+            const [ adminOrderCreationAdmin ] = require('./vendor/sylius/admin-order-creation-plugin/webpack.config.js')
+            ...
+
+            module.exports = [..., adminOrderCreationAdmin];
+            ```
+         2. Add new packages in `./config/packages/assets.yaml`
+            ```yml
+            # config/packages/assets.yaml
+
+            framework:
+                assets:
+                    packages:
+                        # ...
+                        admin_order_creation:
+                            json_manifest_path: '%kernel.project_dir%/public/build/sylius/admin-order-creation/admin/manifest.json'
+            ```
+
+         3. Add new build paths in `./config/packages/webpack_encore.yml`
+            ```yml
+            # config/packages/webpack_encore.yml
+
+            webpack_encore:
+                builds:
+                    # ...
+                    admin_order_creation: '%kernel.project_dir%/public/build/sylius/admin-order-creation/admin'
+            ```
+
+      2. Add entry to existing config
+         1. Add new entries to your `webpack.config.js`
+            ```js
+            // ./webpack.config.js
+
+            // Admin config
+                .addEntry('sylius-order-creation-admin', 'vendor/sylius/admin-order-creation-plugin/src/Resources/assets/admin/entry.js')
+            ```
+
+         2. Run `yarn encore dev` or `yarn encore production`
 
+      3. Import entries in your entry.js files
+         1. Just add these imports into your entry.js files
+            ```js
+            // ./assets/admin/entry.js
+            import '../../vendor/sylius/admin-order-creation-plugin/src/Resources/assets/admin/entry.js';
+            ```
 
 ## Extension points
 

composer.json

@@ -47,7 +47,9 @@
         "sylius-labs/coding-standard": "^3.0",
         "symfony/debug-bundle": "^4.4 || ^5.4",
         "symfony/dotenv": "^4.4 || ^5.4",
-        "symfony/web-profiler-bundle": "^4.4 || ^5.4"
+        "symfony/web-profiler-bundle": "^4.4 || ^5.4",
+        "symfony/webpack-encore-bundle": "^1.12",
+        "symfony/web-server-bundle": "^4.4 || ^5.4"
     },
     "conflict": {
         "doctrine/dbal": "^3.0"

features/creating_order/creating_order_with_address_from_address_book.feature

@@ -0,0 +1,44 @@
+@admin_order_creation_managing_orders
+Feature: Creating order with different billing address
+    In order to place an order in the name of a Customer
+    As an Administrator
+    I want to be able to create an order with different shipping and billing addresses in Admin panel
+
+    Background:
+        Given the store operates on a single channel in "United States"
+        And the store has a product "Stark Coat" priced at "$100"
+        And the store has a product "Lannister Banner" priced at "$40"
+        And the store ships everywhere for free
+        And the store allows paying with "Cash on Delivery"
+        And there is a customer account "[email protected]"
+        And their default address is "Ankh-Morpork", "Frost Alley", "90210", "United States" for "Jon Snow"
+        And this customer has an address "Ned Stark", "Banana Street", "90232", "New York", "United States" in their address book
+        And I am logged in as an administrator
+
+    @ui @javascript
+    Scenario: Creating an order with both addresses from address books
+        When I create a new order for "[email protected]" and channel "United States"
+        And I add "Stark Coat" to this order
+        And I select first address in shipping address book with name "Jon Snow"
+        And I select first address in billing address book with name "Ned Stark"
+        And I select "Free" shipping method
+        And I select "Cash on Delivery" payment method
+        And I place and confirm this order
+        Then I should be notified that order has been successfully created
+        And this order shipping address should be "Jon Snow", "Frost Alley", "90210", "Ankh-Morpork", "United States"
+        And this order billing address should be "Ned Stark", "Banana Street", "90232", "New York", "United States"
+        And there should be one not paid nor shipped order with channel "United States" for "[email protected]" in the registry
+
+    @ui @javascript
+    Scenario: Creating an order with one address from address books
+        When I create a new order for "[email protected]" and channel "United States"
+        And I add "Stark Coat" to this order
+        And I specify this order shipping address as "Ankh-Morpork", "Frost Alley", "90210", "United States" for "Jon Snow"
+        And I select first address in billing address book with name "Ned Stark"
+        And I select "Free" shipping method
+        And I select "Cash on Delivery" payment method
+        And I place and confirm this order
+        Then I should be notified that order has been successfully created
+        And this order billing address should be "Ned Stark", "Banana Street", "90232", "New York", "United States"
+        And this order shipping address should be "Jon Snow", "Frost Alley", "90210", "Ankh-Morpork", "United States"
+        And there should be one not paid nor shipped order with channel "United States" for "[email protected]" in the registry

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@sylius/admin-order-creation-plugin",
+  "description": "Admin order creation plugin for Sylius.",
+  "repository": "https://github.com/Sylius/AdminOrderCreationPlugin.git",
+  "license": "MIT",
+  "scripts": {
+      "dist": "yarn encore production --config-name sylius-plugin-dist"
+  }
+}

src/Resources/assets/admin/entry.js

@@ -0,0 +1,2 @@
+import './scss/main.scss'
+import './js'

src/Resources/assets/admin/js/OrderCreateAddressSelect.js

@@ -0,0 +1,64 @@
+const parseKey = function parseKey(key) {
+    return key.replace(/(_\w)/g, words => words[1].toUpperCase());
+};
+
+$.fn.extend({
+    addressBook() {
+        const element = this;
+        const select = element.parents('.js-address-container').prev().find('> *:first-child');
+
+        const findByName = function findByName(name) {
+            return element.find(`[name*="[${parseKey(name)}]"]`);
+        };
+
+        select.dropdown({
+            forceSelection: false,
+
+            onChange(name, text, choice) {
+                const { provinceCode, provinceName } = choice.data();
+                const provinceContainer = select.parent().find('.province-container').get(0);
+
+                element.find('input:not([type="radio"]):not([type="checkbox"]), select').each((index, input) => {
+                    $(input).val('');
+                });
+
+                Object.entries(choice.data()).forEach(([property, value]) => {
+                    const field = findByName(property);
+
+                    if (property.indexOf('countryCode') !== -1) {
+                        field.val(value).change();
+
+                        const exists = setInterval(() => {
+                            const provinceCodeField = findByName('provinceCode');
+                            const provinceNameField = findByName('provinceName');
+
+                            const provinceIsLoading = $(provinceContainer).attr('data-loading');
+
+                            if (!(typeof provinceIsLoading !== 'undefinded' && provinceIsLoading !== false)) {
+                                if (provinceCodeField.length !== 0 && (provinceCode !== '' || provinceCode != undefined)) {
+                                    provinceCodeField.val(provinceCode);
+
+                                    clearInterval(exists);
+                                } else if (provinceNameField.length !== 0 && (provinceName !== '' || provinceName != undefined)) {
+                                    provinceNameField.val(provinceName);
+
+                                    clearInterval(exists);
+                                }
+                            }
+                        }, 100);
+                    } else if (field.is('[type="radio"]') || field.is('[type="checkbox"]')) {
+                        field.prop('checked', false);
+                        field.filter(`[value="${value}"]`).prop('checked', true);
+                    } else {
+                        field.val(value);
+                    }
+                });
+            },
+        });
+    },
+});
+
+export default () => {
+    $('#sylius_admin_order_creation_new_order_shippingAddress').addressBook();
+    $('#sylius_admin_order_creation_new_order_billingAddress').addressBook();
+};

src/Resources/assets/admin/js/index.js

@@ -0,0 +1,5 @@
+ import OrderCreateAddressSelect from './OrderCreateAddressSelect';
+
+$(function() {
+    OrderCreateAddressSelect();
+});

src/Resources/assets/admin/scss/main.scss

@@ -0,0 +1 @@
+@import './pages/main';

src/Resources/assets/admin/scss/pages/main.scss

@@ -0,0 +1 @@
+@import './order-creation/main';

src/Resources/assets/admin/scss/pages/order-creation/_addressSelect.scss

@@ -0,0 +1,7 @@
+.custom-address-select {
+  margin-bottom: 16px;
+}
+.custom-address-select .dropdown,
+.custom-address-select .ui.search.dropdown > input.search {
+  cursor: pointer;
+}

src/Resources/assets/admin/scss/pages/order-creation/main.scss

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

src/Resources/assets/shop/entry.js

@@ -0,0 +1,2 @@
+import './scss/main.scss'
+import './js'

src/Resources/config/app/config.yml

@@ -30,3 +30,14 @@ sylius_mailer:
         order_created_in_admin_panel:
             subject: 'sylius_admin_order_creation.email.order_created.subject'
             template: '@SyliusAdminOrderCreationPlugin/Emails/orderCreated.html.twig'
+
+sylius_ui:
+    events:
+        sylius.admin.layout.stylesheets:
+            blocks:
+                sylius_admin_order_creation:
+                    template: '@SyliusAdminOrderCreationPlugin/Event/Admin/_styles.html.twig'
+        sylius.admin.layout.javascripts:
+            blocks:
+                sylius_admin_order_creation:
+                    template: '@SyliusAdminOrderCreationPlugin/Event/Admin/_scripts.html.twig'

src/Resources/views/Event/Admin/_scripts.html.twig

@@ -0,0 +1 @@
+{{ encore_entry_script_tags('sylius-order-creation-admin', null, 'admin') }}

src/Resources/views/Event/Admin/_styles.html.twig

@@ -0,0 +1 @@
+{{ encore_entry_link_tags('sylius-order-creation-admin', null, 'admin') }}

src/Resources/views/Order/Create/_addressBookSelect.html.twig

@@ -0,0 +1,23 @@
+<div class="ui fluid floating dropdown labeled search icon button address-book-select" {{ sylius_test_html_attribute('address-book') }}>
+    <i class="book icon"></i>
+    <span class="text">{{ 'sylius.ui.address_book'|trans }}</span>
+    <div class="menu">
+        {% for address in customer.addresses %}
+            <div class="item" {{ sylius_test_html_attribute('address-book-item') }}
+                 data-id="{{ address.id }}"
+                 data-first-name="{{ address.firstName }}"
+                 data-last-name="{{ address.lastName }}"
+                 data-company="{{ address.company }}"
+                 data-street="{{ address.street }}"
+                 data-country-code="{{ address.countryCode }}"
+                 data-province-code="{{ address.provinceCode }}"
+                 data-province-name="{{ address.provinceName }}"
+                 data-city="{{ address.city }}"
+                 data-postcode="{{ address.postcode }}"
+                 data-phone-number="{{ address.phoneNumber }}"
+            >
+                <strong>{{ address.firstName }} {{ address.lastName }}</strong>, {{ address.street }}, {{ address.city }} {{ address.postcode }}, {{ address.countryCode|sylius_country_name }}
+            </div>
+        {% endfor %}
+    </div>
+</div>

src/Resources/views/Order/Create/_form.html.twig

@@ -12,10 +12,34 @@
         <div class="title">
             <i class="dropdown icon"></i> {{ 'sylius.ui.shipping_address'|trans }} &amp; {{ 'sylius.ui.billing_address'|trans }}
         </div>
+        {% set customer = form.vars.value.customer %}
         <div class="content">
-            <div class="ui horizontal segments">
-                <div class="ui segment">{{ form_row(form.shippingAddress) }}</div>
-                <div class="ui segment">{{ form_row(form.billingAddress) }}</div>
+            <div class="ui grid">
+                <div class="eight wide column">
+                    <div class="ui segment">
+                        {% if customer is not empty and customer.user is not empty and customer.addresses|length > 0 %}
+                            <div class="custom-address-select js-address-select shipping-address-book">
+                                {% include '@SyliusAdminOrderCreationPlugin/Order/Create/_addressBookSelect.html.twig' %}
+                            </div>
+                        {% endif %}
+                        <div class="js-address-container">
+                            {{ form_row(form.shippingAddress) }}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="eight wide column">
+                    <div class="ui segment">
+                        {% if customer is not empty and customer.user is not empty and customer.addresses|length > 0 %}
+                            <div class="custom-address-select js-address-select billing-address-book">
+                                {% include '@SyliusAdminOrderCreationPlugin/Order/Create/_addressBookSelect.html.twig' %}
+                            </div>
+                        {% endif %}
+                        <div class="js-address-container">
+                            {{ form_row(form.billingAddress) }}
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 

tests/Application/.gitignore

@@ -1,4 +1,5 @@
 /public/assets
+/public/build
 /public/css
 /public/js
 /public/media/*

tests/Application/assets/admin/entry.js

@@ -0,0 +1 @@
+import 'sylius/bundle/AdminBundle/Resources/private/entry';

tests/Application/assets/shop/entry.js

@@ -0,0 +1 @@
+import 'sylius/bundle/ShopBundle/Resources/private/entry';

tests/Application/config/bundles.php

@@ -1,5 +1,7 @@
 <?php
 
+declare(strict_types=1);
+
 return [
     Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
@@ -56,4 +58,5 @@
     SyliusLabs\DoctrineMigrationsExtraBundle\SyliusLabsDoctrineMigrationsExtraBundle::class => ['all' => true],
     BabDev\PagerfantaBundle\BabDevPagerfantaBundle::class => ['all' => true],
     SyliusLabs\Polyfill\Symfony\Security\Bundle\SyliusLabsPolyfillSymfonySecurityBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

tests/Application/config/packages/assets.yaml

@@ -0,0 +1,11 @@
+framework:
+    assets:
+        packages:
+            shop:
+                json_manifest_path: '%kernel.project_dir%/public/build/shop/manifest.json'
+            admin:
+                json_manifest_path: '%kernel.project_dir%/public/build/admin/manifest.json'
+            orderCreation_shop:
+                json_manifest_path: '%kernel.project_dir%/public/build/sylius/orderCreation/shop/manifest.json'
+            orderCreation_admin:
+                json_manifest_path: '%kernel.project_dir%/public/build/sylius/orderCreation/admin/manifest.json'