Init

README.md

-[![pipeline status](https://gitlab.com/wpdesk/wp-settings-field-boxes/badges/master/pipeline.svg)](https://gitlab.com/wpdesk/wp-settings-field-boxes/pipelines) 
-[![coverage report](https://gitlab.com/wpdesk/wp-settings-field-boxes/badges/master/coverage.svg?job=unit+test+lastest+coverage)](https://gitlab.com/wpdesk/wp-settings-field-boxes/commits/master) 
-[![Latest Stable Version](https://poser.pugx.org/wpdesk/wp-settings-field-boxes/v/stable)](https://packagist.org/packages/wpdesk/wp-settings-field-boxes) 
-[![Total Downloads](https://poser.pugx.org/wpdesk/wp-settings-field-boxes/downloads)](https://packagist.org/packages/wpdesk/wp-settings-field-boxes) 
-[![Latest Unstable Version](https://poser.pugx.org/wpdesk/wp-settings-field-boxes/v/unstable)](https://packagist.org/packages/wpdesk/wp-settings-field-boxes) 
-[![License](https://poser.pugx.org/wpdesk/wp-settings-field-boxes/license)](https://packagist.org/packages/wpdesk/wp-settings-field-boxes) 
+[![pipeline status](https://gitlab.com/wpdesk/wp-settings-sender-address/badges/master/pipeline.svg)](https://gitlab.com/wpdesk/wp-settings-sender-address/pipelines) 
+[![coverage report](https://gitlab.com/wpdesk/wp-settings-sender-address/badges/master/coverage.svg?job=unit+test+lastest+coverage)](https://gitlab.com/wpdesk/wp-settings-sender-address/commits/master) 
+[![Latest Stable Version](https://poser.pugx.org/wpdesk/wp-settings-sender-address/v/stable)](https://packagist.org/packages/wpdesk/wp-settings-sender-address) 
+[![Total Downloads](https://poser.pugx.org/wpdesk/wp-settings-sender-address/downloads)](https://packagist.org/packages/wpdesk/wp-settings-sender-address) 
+[![Latest Unstable Version](https://poser.pugx.org/wpdesk/wp-settings-sender-address/v/unstable)](https://packagist.org/packages/wpdesk/wp-settings-sender-address) 
+[![License](https://poser.pugx.org/wpdesk/wp-settings-sender-address/license)](https://packagist.org/packages/wpdesk/wp-settings-sender-address) 
 
-# wp-settings-field-boxes
+# wp-settings-sender-address
 
-Before commit execute: `npm run build`!
+Before commit execute:
+`npm install` 
+`npm run build`

assets/css/style.css

+fieldset.settings-field-sender-address {
+    margin: 0;
+    padding: 0;
+    boder: 0;
+}
+
+table.sender-address {
+    position: relative;
+    table-layout: fixed;
+    background: #fff;
+    border: 1px solid #e5e5e5;
+    box-shadow: 0 1px 1px rgba(0,0,0,.04);
+    border-spacing: 0;
+    width: 100%;
+    clear: both;
+    margin: 0;
+}
+
+table.sender-address thead td {
+    display: table-cell;
+    padding: 1em;
+    vertical-align: top;
+    line-height: 1.75em;
+    text-align: left;
+    font-weight: 600;
+    text-shadow: none;
+    font-size: 14px;
+}
+
+table.sender-address tbody td {
+    margin-bottom: 9px;
+    padding: 15px 10px;
+    line-height: 1.3;
+    vertical-align: middle;
+    border-top: 1px solid #e5e5e5;
+}
+
+table.sender-address tfoot td {
+    border-top: 1px solid #e1e1e1;
+}
+
+table.sender-address tbody tr:nth-child(even) td {
+    background: #f9f9f9;
+}
+
+table.sender-address input[type="text"] {
+    max-width: 100%;
+    width: 100%;
+}
+
+table.sender-address input[type="email"] {
+    max-width: 100%;
+    width: 100%;
+}
+
+table.sender-address tbody tr td:first-child select {
+    width: 100%;
+}
+
+@media only screen and (max-width: 600px) {
+
+    table.sender-address tbody tr td:first-child select {
+        width: auto;
+        max-width: 100%;
+    }
+
+    table.sender-address, table.sender-address tbody {
+        display: block;
+    }
+    table.sender-address thead {
+        display: none;
+    }
+
+    table.sender-address tbody tr td:first-child,
+    table.sender-address thead tr td:first-child {
+        width: 100%;
+        display: block;
+    }
+    table.sender-address tbody tr, table.sender-address tbody td {
+        display: block;
+        width: 100%;
+    }
+}

assets/css/style.min.css

+fieldset.settings-field-sender-address{margin:0;padding:0;boder:0}table.sender-address{position:relative;table-layout:fixed;background:#fff;border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);border-spacing:0;width:100%;clear:both;margin:0}table.sender-address thead td{display:table-cell;padding:1em;vertical-align:top;line-height:1.75em;text-align:left;font-weight:600;text-shadow:none;font-size:14px}table.sender-address tbody td{margin-bottom:9px;padding:15px 10px;line-height:1.3;vertical-align:middle;border-top:1px solid #e5e5e5}table.sender-address tfoot td{border-top:1px solid #e1e1e1}table.sender-address tbody tr:nth-child(even) td{background:#f9f9f9}table.sender-address input[type="text"]{max-width:100%;width:100%}table.sender-address input[type="email"]{max-width:100%;width:100%}table.sender-address tbody tr td:first-child select{width:100%}@media only screen and (max-width:600px){table.sender-address tbody tr td:first-child select{width:auto;max-width:100%}table.sender-address,table.sender-address tbody{display:block}table.sender-address thead{display:none}table.sender-address tbody tr td:first-child,table.sender-address thead tr td:first-child{width:100%;display:block}table.sender-address tbody tr,table.sender-address tbody td{display:block;width:100%}}
\ No newline at end of file

components/address-input.jsx

+import React, { Component } from 'react';
+
+/**
+ * Can display address field.
+ */
+export default class AddressInput extends React.Component {
+
+    /**
+     * @param props
+     */
+    constructor (props) {
+        super(props);
+
+        /**
+         * @type {string}
+         */
+        let type = 'text';
+        if ( props.type ) {
+            type = props.type;
+        }
+
+        /**
+         * @type {
+         *  {
+         *      address: { id: number, address_id: string, company: string, name: string, address: string, postal_code: string, city: string, phone: string, email: string },
+         *      field: string,
+         *      name: string,
+         *      type: string,
+         *      value: string
+         *  }
+         * }
+         */
+        this.state = {
+            address: props.address,
+            field: props.field,
+            name: props.name,
+            type: type,
+            value: props.value,
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    /**
+     * @param props
+     */
+    componentWillReceiveProps(props){
+        this.setState({
+            address: props.address,
+            field: props.field,
+            name: props.name,
+            value: props.value
+        });
+    }
+
+    /**
+     * @param {React.ChangeEvent<HTMLInputElement>} event
+     */
+    handleChange(event) {
+        let state = this.state;
+        state.value = event.target.value;
+        state.address[state.field] = event.target.value;
+        this.setState(state);
+    }
+
+    /**
+     * @returns {*}
+     */
+    render () {
+        let className = 'input-text regular-input';
+
+        return (
+            <input
+                className={className}
+                type={this.state.type}
+                name={this.state.name}
+                value={this.state.value}
+                required="required"
+                onChange={this.handleChange}
+            />
+        )
+    }
+}

components/address-row.jsx

+import React, { Component } from 'react';
+import AddressInput from "./address-input.jsx";
+
+/**
+ * Can display address fields in table rows.
+ */
+export default class AddressRow extends React.Component {
+
+    /**
+     * @param props
+     */
+    constructor (props) {
+        super(props);
+
+        /**
+         * @type {
+         *  {
+         *      address: { id: number, address_id: string, company: string, name: string, address: string, postal_code: string, city: string, phone: string, email: string },
+         *      index: number,
+         *      inputNamePrefix: string,
+         *      labels: {}
+         *  }
+         * }
+         */
+        this.state = {
+            address: props.address,
+            index: props.index,
+            inputNamePrefix: props.name,
+            labels: props.labels,
+        }
+    }
+
+    /**
+     * @returns {*}
+     */
+    render () {
+        let field_name = this.state.inputNamePrefix + '[' + this.state.index + ']';
+        let address = this.state.address;
+        let labels = this.state.labels;
+
+        return (
+            <tr id={this.state.inputNamePrefix + '_' + this.state.index} className="sender-address">
+                <td>
+                    <AddressInput address={address} field='address_id' name={field_name + '[address_id]'} value={this.state.address.address_id} />
+                </td>
+                <td>
+                    <AddressInput address={address} field='company' name={field_name + '[company]'} value={this.state.address.company} />
+                </td>
+                <td>
+                    <AddressInput address={address} field='name' name={field_name + '[name]'} value={this.state.address.name} />
+                </td>
+                <td>
+                    <AddressInput address={address} field='address' name={field_name + '[address]'} value={this.state.address.address} />
+                </td>
+                <td>
+                    <AddressInput address={address} field='postal_code' name={field_name + '[postal_code]'} value={this.state.address.postal_code} />
+                </td>
+                <td>
+                    <AddressInput address={address} field='city' name={field_name + '[city]'} value={this.state.address.city} />
+                </td>
+                <td>
+                    <AddressInput address={address} field='phone' name={field_name + '[phone]'} value={this.state.address.phone} />
+                </td>
+                <td>
+                    <AddressInput address={address} field='email' type='email' name={field_name + '[email]'} value={this.state.address.email} />
+                </td>
+                <td>
+                    <button data-index={this.state.index} className="button sender-address-delete" onClick={this.props.handleClickDelete}>{labels.button_delete}</button>
+                </td>
+            </tr>
+        )
+    }
+}

components/sender-address-table.jsx

+import React, { Component } from 'react';
+import AddressRow from "./address-row.jsx";
+
+/**
+ * Can display sender addresses in HTML table.
+ * User can add (button Add) and delete (button Delete) sender address.
+ */
+export default class SenderAddressTable extends React.Component {
+
+    /**
+     * @param props
+     */
+    constructor (props) {
+        super(props);
+        let elements = 0;
+        let addresses = props.addresses;
+        addresses.forEach(function(element){
+            element.id = elements;
+            elements++;
+        })
+        /**
+         * @type {{addresses: array, elements: number, name: *, labels: ([]|NodeListOf<HTMLLabelElement>|any|*[]|NodeListOf<HTMLLabelElement>)}}
+         */
+        this.state = {
+            addresses: addresses,
+            name: props.name,
+            elements: elements,
+            labels: props.labels,
+        };
+    }
+
+    /**
+     * @param {MouseEvent} event
+     */
+    handleClickAdd(event) {
+        event.preventDefault();
+        let state = this.state;
+        state.elements++;
+        state.addresses.push({
+            id: state.elements,
+            address_id: '',
+            company:  '',
+            name:  '',
+            address:  '',
+            postal_code:  '',
+            city:  '',
+            phone:  '',
+            email:  '',
+        });
+        this.setState( state );
+    }
+
+    /**
+     * @param {MouseEvent} event
+     */
+    handleClickDelete(event) {
+        event.preventDefault();
+        this.state.addresses = this.state.addresses.filter(address => address.id != event.target.dataset.index);
+        this.setState(this.state);
+    }
+
+    /**
+     * @returns {*}
+     */
+    render () {
+        let labels = this.state.labels;
+
+        return (
+                <table className="sender-address">
+                    <thead>
+                    <tr>
+                        <td className="cell-string">{labels.address_id}</td>
+                        <td className="cell-string">{labels.company}</td>
+                        <td className="cell-string">{labels.name}</td>
+                        <td className="cell-string">{labels.address}</td>
+                        <td className="cell-string">{labels.postal_code}</td>
+                        <td className="cell-string">{labels.city}</td>
+                        <td className="cell-string">{labels.phone}</td>
+                        <td className="cell-string">{labels.email}</td>
+                        <td className="cell-action"> </td>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {
+                        this.state.addresses.map((address) =>
+                            <AddressRow
+                                key={address.id}
+                                index={address.id}
+                                address={address}
+                                name={this.props.name}
+                                handleClickDelete={this.handleClickDelete.bind(this)}
+                                labels={labels}
+                            />
+                        )
+                    }
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <td colSpan="8">
+                                <button className="button sender-address-add" onClick={this.handleClickAdd.bind(this)}>{labels.button_add}</button>
+                            </td>
+                        </tr>
+                    </tfoot>
+                </table>
+        )
+    }
+}

components/sender-address.jsx

+import React, { Component } from 'react';
+import SenderAddressTable from "./sender-address-table.jsx";
+
+/**
+ * Can display sender address in div.
+ * User can add multiple sender addresses.
+ */
+export default class SenderAddress extends React.Component {
+
+    /**
+     * @param props
+     */
+    constructor (props) {
+        super(props);
+        /**
+         * @type {{addresses: array, name: string, labels: string}}
+         */
+        this.state = {
+            addresses: JSON.parse(props.addresses),
+            name: props.name,
+            labels: JSON.parse(props.labels),
+        };
+    }
+
+    /**
+     * @returns {*}
+     */
+    render () {
+        return (
+            <div>
+                <SenderAddressTable
+                    addresses={this.state.addresses}
+                    name={this.state.name}
+                    labels={this.state.labels}
+                />
+            </div>
+        )
+    }
+}

composer.json

@@ -30,12 +30,12 @@
         "wimg/php-compatibility": "^8"
     },
     "autoload": {
-		"psr-4": {"WpDesk\\WooCommerce\\ShippingMethod\\": "src/"}
+		"psr-4": {"WpDesk\\WooCommerce\\ShippingMethod\\Fields\\SenderAddress\\": "src/"}
     },
     "autoload-dev": {
     },
     "extra": {
-        "text-domain": "wp-settings-sender-address",
+        "text-domain": "wp-settings-field-sender-address",
         "translations-folder": "lang",
         "po-files": {
             "pl_PL": "pl_PL.po"

lang/pl_PL.po

+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2020-02-18 18:07+0100\n"
+"PO-Revision-Date: 2020-02-18 18:08+0100\n"
+"Last-Translator: Krzysztof Dyszczyk <krzysztof.dyszczyk@gmail.com>\n"
+"Language-Team: Maciej Swoboda <maciej.swoboda@gmail.com>\n"
+"Language: pl_PL\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-Basepath: ..\n"
+"Plural-Forms: nplurals=3; plural=(n==1 ? 0 : n%10>=2 && n%10<=4 && (n%100<12 "
+"|| n%100>14) ? 1 : 2);\n"
+"X-Poedit-SourceCharset: UTF-8\n"
+"X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;esc_attr__;"
+"esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c;_n_noop:1,2;"
+"_nx_noop:3c,1,2;__ngettext_noop:1,2\n"
+"X-Generator: Poedit 2.2.4\n"
+"X-Poedit-SearchPath-0: .\n"
+"X-Poedit-SearchPathExcluded-0: *.js\n"
+"X-Poedit-SearchPathExcluded-1: vendor\n"
+
+#: src/Labels.php:28
+msgid "Identifier"
+msgstr "Identyfikator"
+
+#: src/Labels.php:29
+msgid "Company"
+msgstr "Firma"
+
+#: src/Labels.php:30
+msgid "Name"
+msgstr "Imię i nazwisko"
+
+#: src/Labels.php:31
+msgid "Address"
+msgstr "Adres"
+
+#: src/Labels.php:32
+msgid "Postal code"
+msgstr "Kod pocztowy"
+
+#: src/Labels.php:33
+msgid "City"
+msgstr "Miasto"
+
+#: src/Labels.php:34
+msgid "Phone"
+msgstr "Telefon"
+
+#: src/Labels.php:35
+msgid "Email"
+msgstr "E-mail"
+
+#: src/Labels.php:37
+msgid "Add"
+msgstr "Dodaj"
+
+#: src/Labels.php:38
+msgid "Delete"
+msgstr "Usuń"
+
+#~ msgid "Custom"
+#~ msgstr "Własne"

package.json

 {
-  "name": "WooCommerce-Settings-Field-for-Boxes",
+  "name": "WooCommerce-Settings-Field-for-Sender-Address",
   "version": "1.0.0",
   "main": "index.jsx",
   "dependencies": {
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack && uglifyjs ./assets/js/settings-field-boxes.js -c -m -o ./assets/js/settings-field-boxes.min.js",
+    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack && uglifyjs ./assets/js/settings-sender-address.js -c -m -o ./assets/js/settings-sender-address.min.js",
     "dev": "cross-env BABEL_ENV=default webpack --watch"
   }
 }

src/AbstractSenderAddress.php

+<?php
+/**
+ * Abstract sender address.
+ *
+ * @package WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress
+ */
+
+namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
+
+/**
+ * Abstract sender address.
+ */
+abstract class AbstractSenderAddress implements \JsonSerializable {
+
+    const ADDRESS_ID = 'address_id';
+	const COMPANY = 'company';
+	const NAME = 'name';
+	const ADDRESS = 'address';
+	const POSTAL_CODE = 'postal_code';
+	const CITY = 'city';
+	const PHONE = 'phone';
+	const EMAIL = 'email';
+
+    /**
+     * @var string
+     */
+    private $address_id = '';
+
+	/**
+	 * @var string
+	 */
+	private $company = '';
+
+    /**
+     * @var string
+     */
+    private $name = '';
+
+	/**
+	 * @var string
+	 */
+	private $address = '';
+
+	/**
+	 * @var string
+	 */
+	private $postal_code = '';
+
+	/**
+	 * @var string
+	 */
+	private $city = '';
+
+	/**
+	 * @var string
+	 */
+	private $phone = '';
+
+	/**
+	 * @var string
+	 */
+	private $email = '';
+
+	/**
+	 * @return string
+	 */
+	public function get_address_id() {
+		return $this->address_id;
+	}
+
+	/**
+	 * @param string $address_id
+	 */
+	public function set_address_id( $address_id ) {
+		$this->address_id = $address_id;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function get_company() {
+		return $this->company;
+	}
+
+	/**
+	 * @param string $company
+	 */
+	public function set_company( $company ) {
+		$this->company = $company;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function get_name() {
+		return $this->name;
+	}
+
+	/**
+	 * @param string $name
+	 */
+	public function set_name( $name ) {
+		$this->name = $name;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function get_address() {
+		return $this->address;
+	}
+
+	/**
+	 * @param string $address
+	 */
+	public function set_address( $address ) {
+		$this->address = $address;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function get_postal_code() {
+		return $this->postal_code;
+	}
+
+	/**
+	 * @param string $postal_code
+	 */
+	public function set_postal_code( $postal_code ) {
+		$this->postal_code = $postal_code;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function get_city() {
+		return $this->city;
+	}
+
+	/**
+	 * @param string $city
+	 */
+	public function set_city( $city ) {
+		$this->city = $city;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function get_phone() {
+		return $this->phone;
+	}
+
+	/**
+	 * @param string $phone
+	 */
+	public function set_phone( $phone ) {
+		$this->phone = $phone;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function get_email() {
+		return $this->email;
+	}
+
+	/**
+	 * @param string $email
+	 */
+	public function set_email( $email ) {
+		$this->email = $email;
+	}
+
+    /**
+     * JSON serialize.
+     *
+     * @return array
+     */
+    public function jsonSerialize() {
+        return
+            [
+                self::ADDRESS_ID  => $this->get_address_id(),
+                self::COMPANY     => $this->get_company(),
+                self::NAME        => $this->get_name(),
+                self::ADDRESS     => $this->get_address(),
+                self::POSTAL_CODE => $this->get_postal_code(),
+                self::CITY        => $this->get_city(),
+                self::PHONE       => $this->get_phone(),
+                self::EMAIL       => $this->get_email(),
+            ];
+    }
+
+}

src/Assets.php

+<?php
+/**
+ * Assets.
+ *
+ * @package WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress
+ */
+
+namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
+
+class Assets {
+
+    public function enqueue( $base_url, $suffix = '', $scripts_version = '' ) {
+        wp_register_style( 'fs_sender_address_css', trailingslashit( $base_url ) . 'assets/css/style' . $suffix . '.css', array(), $scripts_version );
+        wp_enqueue_style( 'fs_sender_address_css' );
+
+        wp_enqueue_script( 'fs_sender_address', trailingslashit( $base_url ) . 'assets/js/settings-sender-address' . $suffix . '.js', array(), $scripts_version );
+    }
+
+}

src/Labels.php

+<?php
+/**
+ * Labels.
+ *
+ * @package WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress
+ */
+
+namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
+
+/**
+ * Labels for REACT component.
+ */
+class Labels {
+
+    public $address_id;
+	public $company;
+	public $name;
+	public $address;
+	public $postal_code;
+	public $city;
+	public $phone;
+	public $email;
+
+	public $button_delete;
+	public $button_add;
+
+	public function __construct() {
+		$this->address_id  = __( 'Identifier', 'wp-settings-field-sender-address' );
+		$this->company     = __( 'Company', 'wp-settings-field-sender-address' );
+		$this->name        = __( 'Name', 'wp-settings-field-sender-address' );
+		$this->address     = __( 'Address', 'wp-settings-field-sender-address' );
+		$this->postal_code = __( 'Postal code', 'wp-settings-field-sender-address' );
+		$this->city        = __( 'City', 'wp-settings-field-sender-address' );
+		$this->phone       = __( 'Phone', 'wp-settings-field-sender-address' );
+		$this->email       = __( 'Email', 'wp-settings-field-sender-address' );
+
+		$this->button_add    = __( 'Add', 'wp-settings-field-sender-address' );
+		$this->button_delete = __( 'Delete', 'wp-settings-field-sender-address' );
+	}
+
+}

src/SenderAddress.php

+<?php
+/**
+ * Box.
+ */
+
+namespace WpDesk\WooCommerce\ShippingMethod;
+
+use WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress\AbstractSenderAddress;
+
+/**
+ * Settings for box from saved settings.
+ *
+ * @package WpDesk\WooCommerce\ShippingMethod
+ */
+class SenderAddress extends AbstractSenderAddress {
+
+    /**
+     * @param array $sender_address_array .
+     *
+     * @return SenderAddress
+     */
+    static public function create_from_array( array $sender_address_array ) {
+        $address = new SenderAddress();
+        if ( isset( $sender_address_array[ self::ADDRESS_ID ] ) ) {
+            $address->set_address_id( $sender_address_array[ self::ADDRESS_ID ] );
+        }
+	    if ( isset( $sender_address_array[ self::COMPANY ] ) ) {
+		    $address->set_company( $sender_address_array[ self::COMPANY ] );
+	    }
+        if ( isset( $sender_address_array[ self::NAME ] ) ) {
+            $address->set_name( $sender_address_array[ self::NAME ] );
+        }
+	    if ( isset( $sender_address_array[ self::ADDRESS ] ) ) {
+		    $address->set_address( $sender_address_array[ self::ADDRESS ] );
+	    }
+	    if ( isset( $sender_address_array[ self::POSTAL_CODE ] ) ) {
+		    $address->set_postal_code( $sender_address_array[ self::POSTAL_CODE ] );
+	    }
+	    if ( isset( $sender_address_array[ self::CITY ] ) ) {
+		    $address->set_city( $sender_address_array[ self::CITY ] );
+	    }
+	    if ( isset( $sender_address_array[ self::PHONE ] ) ) {
+		    $address->set_phone( $sender_address_array[ self::PHONE ] );
+	    }
+	    if ( isset( $sender_address_array[ self::EMAIL ] ) ) {
+		    $address->set_email( $sender_address_array[ self::EMAIL ] );
+	    }
+        return $address;
+    }
+
+	/**
+	 * Create addresses from settings.
+	 *
+	 * @param string $sender_address_settings JSON string.
+	 *
+	 * @return SenderAddress[]
+	 */
+	public static function create_sender_addresses_from_settings( $sender_address_settings ) {
+		$sender_addresses = [];
+		foreach ( json_decode( $sender_address_settings, true ) as $box_setting ) {
+			$sender_addresses[] = SenderAddress::create_from_array( $box_setting );
+		}
+
+		return $sender_addresses;
+	}
+
+}

src/SettingsField.php

+<?php
+/**
+ * Settings field.
+ */
+
+namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
+
+
+/**
+ * Display field in settings and handle posted data.
+ */
+class SettingsField {
+
+	const FIELD_TYPE = 'sender_addresses';
+
+	/**
+	 * Field name.
+	 *
+	 * @var string
+	 */
+	private $field_name;
+
+	/**
+	 * SettingsField constructor.
+	 *
+	 * @param string $field_name .
+	 */
+	public function __construct( $field_name ) {
+		$this->field_name = $field_name;
+	}
+
+    /**
+     * Get field value from post as JSON.
+     *
+     * @param array|string $posted_value .
+     *
+     * @return string
+     */
+	public function get_field_posted_value_as_json( $posted_value ) {
+	    if ( ! empty( $posted_value ) && is_array( $posted_value ) ) {
+	        $value = json_encode( $posted_value );
+        } else {
+            $value = json_encode( array() );
+        }
+	    return $value;
+    }
+
+    /**
+     * Render field settings.
+     *
+     * @param string $field_title
+     * @param string $tooltip_html
+     * @param string $settings_field_value_as_json .
+     * @param Labels $labels .
+     */
+	public function render(
+	    $field_title,
+        $tooltip_html,
+	    $settings_field_value_as_json,
+        $labels
+    ) {
+		$field_key = $this->field_name;
+
+		$settings_field_value_as_array = json_decode( ! empty( $settings_field_value_as_json ) ? $settings_field_value_as_json: '{}', true );
+
+		if ( empty( $settings_field_value_as_array ) ) {
+            $settings_field_value_as_array = array();
+        }
+
+        if ( empty( $labels ) ) {
+            $labels = new Labels();
+        }
+
+		$json_value = json_encode( array_values( $settings_field_value_as_array ) );
+		include __DIR__ . '/views/settings-field.php';
+
+	}
+
+}

src/ShippingMethodRenderSettingsTrait.php

+<?php
+/**
+ * Render settings HTML.
+ *
+ * @package WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress
+ */
+
+namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
+
+/**
+ * Can render settings html.
+ * For use in shipping method when sender_addresses field is used in shipping method settings.
+ */
+trait ShippingMethodRenderSettingsTrait {
+
+	/**
+	 * Prefix key for settings.
+	 *
+	 * @param  string $key Field key.
+	 * @return string
+	 */
+	public function get_field_key( $key ) {
+		/** @var \WC_Shipping_Method $shipping_method */
+		$shipping_method = $this;
+		return $shipping_method->plugin_id . $shipping_method->id . '_' . $key;
+	}
+
+	/**
+	 * Get field params
+	 *
+	 * @param string $key Field key.
+	 * @param array $data Data.
+	 *
+	 * @return array
+	 */
+	private function get_field_params( $key, $data ) {
+		$field_key = $this->get_field_key( $key );
+		$defaults  = [
+			'field_key'         => $field_key,
+			'title'             => '',
+			'disabled'          => false,
+			'class'             => '',
+			'css'               => '',
+			'placeholder'       => '',
+			'type'              => 'text',
+			'desc_tip'          => false,
+			'description'       => '',
+			'custom_attributes' => [],
+			'value'             => '',
+		];
+		$data      = wp_parse_args( $data, $defaults );
+
+		return $data;
+	}
+
+	/**
+	 * Generates settings HTML.
+	 *
+	 * @param string $key .
+	 * @param array $data .
+	 *
+	 * @return string
+	 */
+	public function generate_sender_addresses_html( $key, $data ) {
+		/** @var \WC_Shipping_Method $shipping_method */
+		$shipping_method = $this;
+		$data['value'] = $shipping_method->get_option( $key );
+		$data = $this->get_field_params( $key, $data );
+		$settings_field = new SettingsField( $data['field_key'] );
+		ob_start();
+		$settings_field->render( $data['title'], '', $data['value'], null );
+		return ob_get_clean();
+	}
+
+	/**
+	 * Validate field.
+	 *
+	 * Convert field to json.
+	 *
+	 * @param  string $key Field key.
+	 * @param  string $value Posted Value.
+	 * @return string
+	 */
+	public function validate_sender_addresses_field( $key, $value ) {
+		$settings_field = new SettingsField( $key );
+		return $settings_field->get_field_posted_value_as_json( $value );
+	}
+
+}
\ No newline at end of file

src/index.jsx

+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import SenderAddress from '../components/sender-address.jsx';
+
+document.addEventListener('DOMContentLoaded', function () {
+    let elements = document.getElementsByClassName("settings-field-sender-address");
+    let i;
+    for (i = 0; i < elements.length; i++) {
+        let element = elements[i];
+        ReactDOM.render(<SenderAddress addresses={element.dataset.value} name={element.dataset.name} labels={element.dataset.labels}/>, document.getElementById(element.id));
+    }
+});

src/views/settings-field.php

+<?php
+/**
+ * Display field.
+ *
+ * @package WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress
+ *
+ * @var string $field_key
+ * @var string $field_title
+ * @var string $tooltip_html
+ * @var array  $labels
+ * @var string $json_value
+ * @var array  $built_in_boxes
+ */
+?><tr valign="top">
+    <th scope="row" class="titledesc">
+        <label for="<?php echo esc_attr( $field_key ); ?>"><?php echo wp_kses_post( $field_title ); ?><?php echo $tooltip_html; ?></label>
+    </th>
+    <td class="forminp">
+        <fieldset
+            class="settings-field-sender-address"
+            id="<?php echo esc_attr( $field_key ); ?>_fieldset"
+            data-value="<?php echo esc_attr( $json_value ); ?>"
+            data-name="<?php echo esc_attr( $field_key ); ?>"
+            data-labels="<?php echo esc_attr( json_encode( $labels, JSON_FORCE_OBJECT ) ); ?>"
+        >
+        </fieldset>
+    </td>
+</tr>