@payyo/ptp-js 0.2.0

package/README.doc.md

@@ -0,0 +1,82 @@
+# PTP Form/Field
+
+This repository is part of the PTP project. The goal of this JS library to provide a secure way for non-PCI compliant 
+applications to collect CHD (card holder data), tokenize it and use the tokens to make a payment via regular Payyo API
+
+This library consists of two parts:
+
+1. Form - manages a form of secure fields
+2. and Field - secure field itself
+
+Each field which is may contain CHD is an HTML IFrame and JS code hosted on PCI-compliant environment. Field and Form 
+components are communicates with each other by message passing. The Field component avoids exposing CHD from IFrame to 
+the Form component which is supposed to be running on client (non-PCI -compliant environment).
+
+## Development
+
+### Requirements
+
+Before you start please make sure that you have installed and configured the following tools and utils:
+
+1. [Docker](https://docs.docker.com/engine/install/)
+
+### Install project dependencies
+
+Project requirements are managed by [Yarn](https://yarnpkg.com/) which is running inside Docker container. 
+You can install all the dependencies with the command: 
+
+```shell
+make inastall
+```
+
+To run arbitrary Yarn command you can use Makefile target like this:
+
+```shell
+make yarn <command> [arguments]
+```
+
+### Dev Server
+
+Webpack dev server is used for development. To run it execute the following command
+
+```shell
+make serve
+```
+
+The dev server serves the test page with example form. The page used PTP project as backend to tokenize the card holder 
+data (CHD). To have a fully functional application please make sure:
+
+1. you need to have PTP project up and running locally
+2. or adjust the project settings to use PTP SANDBOX/PROD environment as backend by adjusting `PTP_BASE_URL` variable in `package.json`
+
+## CI/CD
+
+CI server is Bitbucket Pipeline. See CI configuration in `bitbucket-pipelines.yml`.
+
+## Deployment
+
+### Field component
+
+Each push to the repository produces a build which can be deployed to the specific environment via Bitbucket Pipeline.
+Each Git tag triggers automated build and deployment DEV and PROD packages.
+
+### Form component 
+
+Form component is distributed via [NPM](https://www.npmjs.com/) to let the library easily pulled and used by Payyo team
+as well as other integrators.
+
+## NPM package publishing
+
+To make the library available to the public and used in other Payyo projects and other user you need to publish it to NPM. 
+We have the NPM account registered to `developers@payyo.ch` email and organization `payyo` defined there. To publish the 
+package to NPM you need to execute the following commands:
+
+1. 
+2. npm publish --access public
+
+
+## TODO: 
+1. create appropriate account on NPM
+2. save account credentials in LastPass
+3. describe publishing process here
+

package/README.md

@@ -0,0 +1,6 @@
+# PTP Form
+
+The goal of this JS library to provide a secure way for non-PCI compliant applications to collect CHD (card holder data), 
+tokenize it and use the tokens to make a payment via regular [Payyo](httsp://payyo.ch) API
+
+This library manages a form fields which may contain CHD is an HTML IFrame and JS code hosted on PCI-compliant environment.

package/dist/form/v1.js

@@ -0,0 +1,2 @@
+(()=>{var e={415:e=>{e.exports=function(e){const t={},r={},n=[],o={},s=i();let a=null;function i(){return Math.random().toString(36).substr(2,9)}function l(){if(e.debug&&window.console){const e=Array.prototype.slice.call(arguments);e.unshift("[PTP FORM]"),console.log.apply(console,e)}}function d(t){const r=t.container,o=t.iFrameName,a={id:o,name:o,class:o,src:e.iframeUri+"?"+new URLSearchParams({form_id:s,field_name:t.fieldName,field_names:n,placeholder:t.placeholder,input_type:t.inputType,debug:e.debug?"1":"0"}).toString(),frameborder:"0",scrolling:"no",style:"width: 100%; height: 100%"},i=document.createElement("iframe");for(Object.keys(a).forEach((function(e){i.setAttribute(e,a[e])}));r.hasChildNodes();)r.removeChild(r.lastChild);r.appendChild(i),t.iframe=i[0]}function c(e,t={}){const n={params:t,type:e,formId:s,messageId:null};return new Promise((t=>{const s=e+":"+i();o[s]=t,n.messageId=s,l("send message",n),window.frames[r[a].iFrameName].postMessage(n,"*")}))}t.init=function(e){for(let t in e){if(!e.hasOwnProperty(t))return;let o=e[t],a=o.container;"string"==typeof a&&(a=document.getElementById(a)),r[t]={fieldName:t,iFrameName:"ptp-field-iframe-"+s+"-"+t,container:a,placeholder:o.placeholder||"",inputType:o.inputType||"text",isReady:!1},n.push(t)}a=n[0];for(let e=0;e<n.length;e++)d(r[n[e]])};const f={};function m(e){const n=e.data;if(s!==n.formId)return;l(`message received of type "${n.type}"`,n);const a={fieldReady:e=>{if(void 0===r[e.fieldName])return;r[e.fieldName].isReady=!0;Object.keys(r).map((e=>r[e].isReady)).reduce(((e,t)=>e&&t),!0)&&u("ready")},fieldChanged:function(e){u("change",e)}},i=n.messageId,d=o[i];if(void 0!==d)delete o[i],d.apply(t,[n.response]);else{const e=a[n.type];e&&e.apply(t,[n.response])}}function u(){const e=Array.prototype.slice.call(arguments),t=e.shift(),r=f[t];r?(l(`emit event "${t}"`,e),r.apply(null,e)):l(`no handler for event "${t}"`,e)}function p(){for(let[,e]of Object.entries(r)){const t=window.frames[e.iFrameName];t.postMessage({type:"checkFocus"},"*")}}return t.onChange=function(e){f.change=e},t.onReady=function(e){f.ready=e},t.validate=function(){return c("validateRequest")},t.submit=function(e){return c("submitRequest",{params:e||{},browserDetails:{browserUserAgent:navigator.userAgent,browserJavaEnabled:navigator.javaEnabled(),browserLanguage:navigator.language,browserColorDepth:screen.colorDepth,browserScreenHeight:screen.height,browserScreenWidth:screen.width,browserTZ:(new Date).getTimezoneOffset()}}).then((e=>e.success?Promise.resolve(e.result):Promise.reject({error:e.error,error_details:e.error_details})))},t.focus=function(e){const t=r[e]||null;t&&window.frames[t.iFrameName].focus()},t.setStyle=function(e,t,n){r[e]&&window.frames[r[e].iFrameName].postMessage({type:"setStyle",params:{selector:t,rules:n}},"*")},window.addEventListener("message",m,!1),t.destroy=function(){window.removeEventListener("message",m,!1),window.addEventListener("touchend",p,!0);for(let e in r){let t=document.getElementById(r[e].iFrameName);t&&t.parentNode.removeChild(t)}},t}}},t={};(function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,r),s.exports})(415)})();
+//# sourceMappingURL=v1.js.map

package/dist/form/v1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"v1.js","mappings":"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","sources":["webpack://@payyoag/ptp-js/./src/form/index.js","webpack://@payyoag/ptp-js/webpack/bootstrap","webpack://@payyoag/ptp-js/webpack/startup"],"sourcesContent":["module.exports = function (config) {\n    const form = {},\n        fields = {},\n        fieldNames = [],\n        callbacks = {},\n        formId = generateRandomId();\n\n    const EVENT_ON_CHANGE = 'change';\n    const EVENT_ON_READY = 'ready';\n\n    let mainField = null;\n\n    function generateRandomId() {\n        return Math.random().toString(36).substr(2, 9);\n    }\n\n    function log() {\n        if (config.debug && window.console) {\n            const args = Array.prototype.slice.call(arguments);\n            args.unshift('[PTP FORM]');\n            console.log.apply(console, args);\n        }\n    }\n\n    form.init = function (fieldsMap) {\n        for (let fieldName in fieldsMap) {\n            if (!fieldsMap.hasOwnProperty(fieldName)) {\n                return;\n            }\n\n            let field = fieldsMap[fieldName];\n            let fieldContainer = field.container;\n\n            if (typeof fieldContainer === 'string') {\n                fieldContainer = document.getElementById(fieldContainer);\n            }\n\n            fields[fieldName] = {\n                fieldName: fieldName,\n                iFrameName: 'ptp-field-iframe-' + formId + '-' + fieldName,\n                container: fieldContainer,\n                placeholder: field.placeholder || '',\n                inputType: field.inputType || 'text',\n                isReady: false\n            };\n\n            fieldNames.push(fieldName);\n        }\n\n        mainField = fieldNames[0];\n\n        for (let i = 0; i < fieldNames.length; i++) {\n            createIframe(fields[fieldNames[i]]);\n        }\n    };\n\n    function createIframe(field) {\n        const placeholder = field.container,\n            iFrameName = field.iFrameName,\n            attributes = {\n                id: iFrameName,\n                name: iFrameName,\n                class: iFrameName,\n                src: config.iframeUri + '?' + (new URLSearchParams({\n                    form_id: formId,\n                    field_name: field.fieldName,\n                    field_names: fieldNames,\n                    placeholder: field.placeholder,\n                    input_type: field.inputType,\n                    debug: config.debug ? '1' : '0',\n                })).toString(),\n                frameborder: \"0\",\n                scrolling: \"no\",\n                style: 'width: 100%; height: 100%',\n            },\n            iframe = document.createElement('iframe');\n\n        Object.keys(attributes).forEach(function (key) {\n            iframe.setAttribute(key, attributes[key]);\n        });\n\n        while (placeholder.hasChildNodes()) {\n            placeholder.removeChild(placeholder.lastChild);\n        }\n        placeholder.appendChild(iframe);\n\n        field.iframe = iframe[0];\n    }\n\n    function postMessage(type, params = {}) {\n        const message = {params: params, type: type, formId: formId, messageId: null};\n\n        return new Promise((resolve) => {\n            const messageId = type + \":\" + generateRandomId();\n            callbacks[messageId] = resolve;\n            message.messageId = messageId;\n\n            log('send message', message);\n            window.frames[fields[mainField].iFrameName].postMessage(message, '*');\n        });\n    }\n\n    const handlers = {};\n    form.onChange = function (handler) {\n        handlers[EVENT_ON_CHANGE] = handler;\n    }\n\n    form.onReady = function (handler) {\n        handlers[EVENT_ON_READY] = handler;\n    }\n\n    form.validate = function () {\n        return postMessage('validateRequest');\n    }\n\n    form.submit = function (params) {\n        return postMessage('submitRequest', {\n            params: params || {},\n            browserDetails: {\n                browserUserAgent: navigator.userAgent,\n                browserJavaEnabled: navigator.javaEnabled(),\n                browserLanguage: navigator.language,\n                browserColorDepth: screen.colorDepth,\n                browserScreenHeight: screen.height,\n                browserScreenWidth: screen.width,\n                browserTZ: (new Date()).getTimezoneOffset()\n            }\n        }).then((res) => {\n            if (res.success) {\n                return Promise.resolve(res.result);\n            }\n\n            return Promise.reject({\n                error: res.error,\n                error_details: res.error_details,\n            });\n        });\n    }\n\n    form.focus = function (field) {\n        const f = fields[field] || null;\n        if (f) {\n            window.frames[f.iFrameName].focus();\n        }\n    };\n\n    form.setStyle = function (fieldName, selector, cssRules) {\n        if (!fields[fieldName]) {\n            return;\n        }\n\n        window.frames[fields[fieldName].iFrameName].postMessage({\n            type: 'setStyle',\n            params: {\n                selector: selector,\n                rules: cssRules,\n            }\n        }, '*');\n    };\n\n    function receiveMessage(message) {\n        const event = message.data;\n        if (formId !== event.formId) {\n            return;\n        }\n\n        log(`message received of type \"${event.type}\"`, event);\n\n        const handlers = {\n            fieldReady: (r) => {\n                if (fields[r.fieldName] === undefined) {\n                    return;\n                }\n                fields[r.fieldName].isReady = true;\n                const ready = Object.keys(fields)\n                    .map((key) => fields[key].isReady)\n                    .reduce((a, b) => a && b, true);\n\n                if (ready) {\n                    emitEvent('ready');\n                }\n            },\n            fieldChanged: function (response) {\n                emitEvent('change', response);\n            },\n        };\n\n        const messageId = event.messageId,\n            callback = callbacks[messageId];\n\n        if (callback !== undefined) {\n            delete callbacks[messageId];\n            callback.apply(form, [event.response]);\n        } else {\n            const handler = handlers[event.type];\n            if (handler) {\n                handler.apply(form, [event.response]);\n            }\n        }\n    }\n\n    function emitEvent() {\n        const args = Array.prototype.slice.call(arguments);\n        const eventName = args.shift();\n        const handler = handlers[eventName];\n        if (handler) {\n            log(`emit event \"${eventName}\"`, args);\n            handler.apply(null, args);\n        } else {\n            log(`no handler for event \"${eventName}\"`, args);\n        }\n    }\n\n    window.addEventListener('message', receiveMessage, false);\n\n    function addOnTouchedEventListener() {\n        window.addEventListener('touchend', checkFocus, true);\n    }\n\n    function checkFocus() {\n        for (let [, field] of Object.entries(fields)) {\n            const iframe = window.frames[field.iFrameName];\n            if (typeof iframe) {\n                iframe.postMessage({'type': 'checkFocus'}, '*');\n            }\n        }\n    }\n\n    form.destroy = function () {\n        window.removeEventListener('message', receiveMessage, false);\n        window.addEventListener('touchend', checkFocus, true);\n        for (let fieldName in fields) {\n            let iframe = document.getElementById(fields[fieldName].iFrameName);\n            if (iframe) {\n                iframe.parentNode.removeChild(iframe);\n            }\n        }\n    }\n\n    return form;\n};\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(415);\n"],"names":["module","exports","config","form","fields","fieldNames","callbacks","formId","generateRandomId","mainField","Math","random","toString","substr","log","debug","window","console","args","Array","prototype","slice","call","arguments","unshift","apply","createIframe","field","placeholder","container","iFrameName","attributes","id","name","class","src","iframeUri","URLSearchParams","form_id","field_name","fieldName","field_names","input_type","inputType","frameborder","scrolling","style","iframe","document","createElement","Object","keys","forEach","key","setAttribute","hasChildNodes","removeChild","lastChild","appendChild","postMessage","type","params","message","messageId","Promise","resolve","frames","init","fieldsMap","hasOwnProperty","fieldContainer","getElementById","isReady","push","i","length","handlers","receiveMessage","event","data","fieldReady","r","undefined","map","reduce","a","b","emitEvent","fieldChanged","response","callback","handler","eventName","shift","checkFocus","entries","onChange","onReady","validate","submit","browserDetails","browserUserAgent","navigator","userAgent","browserJavaEnabled","javaEnabled","browserLanguage","language","browserColorDepth","screen","colorDepth","browserScreenHeight","height","browserScreenWidth","width","browserTZ","Date","getTimezoneOffset","then","res","success","result","reject","error","error_details","focus","f","setStyle","selector","cssRules","rules","addEventListener","destroy","removeEventListener","parentNode","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__"],"sourceRoot":""}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@payyo/ptp-js",
+  "version": "0.2.0",
+  "description": "JS library for Payyo Tokenization service (PTP)",
+  "private": false,
+  "author": "developers@payyo.ch",
+  "license": "MIT",
+  "main": "webpack.config.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/payyoag/ptp-js.git"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/payyoag/ptp-js/issues"
+  },
+  "homepage": "https://bitbucket.org/payyoag/ptp-js#readme",
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "babel-loader": "^8.2.3",
+    "cleave.js": "^1.6.0",
+    "html-minimizer-webpack-plugin": "^3.3.1",
+    "html-webpack-plugin": "^5.5.0",
+    "react-dev-utils": "^11.0.4",
+    "terser-webpack-plugin": "^5.2.5",
+    "webpack": "^5.63.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
+  },
+  "scripts": {
+    "serve": "PTP_BASE_URL=https://ptp.dev.payyo.ch:4430 webpack-dev-server --mode development --static www --devtool source-map --output-pathinfo --env target=all",
+    "build": "webpack --mode production --env target=all",
+    "build-field": "webpack --mode production --env target=field"
+  },
+  "files": [
+    "src/form",
+    "dist/form",
+    "README.md",
+    "LICENCE",
+    "package.json"
+  ]
+}

package/src/form/index.js

@@ -0,0 +1,241 @@
+module.exports = function (config) {
+    const form = {},
+        fields = {},
+        fieldNames = [],
+        callbacks = {},
+        formId = generateRandomId();
+
+    const EVENT_ON_CHANGE = 'change';
+    const EVENT_ON_READY = 'ready';
+
+    let mainField = null;
+
+    function generateRandomId() {
+        return Math.random().toString(36).substr(2, 9);
+    }
+
+    function log() {
+        if (config.debug && window.console) {
+            const args = Array.prototype.slice.call(arguments);
+            args.unshift('[PTP FORM]');
+            console.log.apply(console, args);
+        }
+    }
+
+    form.init = function (fieldsMap) {
+        for (let fieldName in fieldsMap) {
+            if (!fieldsMap.hasOwnProperty(fieldName)) {
+                return;
+            }
+
+            let field = fieldsMap[fieldName];
+            let fieldContainer = field.container;
+
+            if (typeof fieldContainer === 'string') {
+                fieldContainer = document.getElementById(fieldContainer);
+            }
+
+            fields[fieldName] = {
+                fieldName: fieldName,
+                iFrameName: 'ptp-field-iframe-' + formId + '-' + fieldName,
+                container: fieldContainer,
+                placeholder: field.placeholder || '',
+                inputType: field.inputType || 'text',
+                isReady: false
+            };
+
+            fieldNames.push(fieldName);
+        }
+
+        mainField = fieldNames[0];
+
+        for (let i = 0; i < fieldNames.length; i++) {
+            createIframe(fields[fieldNames[i]]);
+        }
+    };
+
+    function createIframe(field) {
+        const placeholder = field.container,
+            iFrameName = field.iFrameName,
+            attributes = {
+                id: iFrameName,
+                name: iFrameName,
+                class: iFrameName,
+                src: config.iframeUri + '?' + (new URLSearchParams({
+                    form_id: formId,
+                    field_name: field.fieldName,
+                    field_names: fieldNames,
+                    placeholder: field.placeholder,
+                    input_type: field.inputType,
+                    debug: config.debug ? '1' : '0',
+                })).toString(),
+                frameborder: "0",
+                scrolling: "no",
+                style: 'width: 100%; height: 100%',
+            },
+            iframe = document.createElement('iframe');
+
+        Object.keys(attributes).forEach(function (key) {
+            iframe.setAttribute(key, attributes[key]);
+        });
+
+        while (placeholder.hasChildNodes()) {
+            placeholder.removeChild(placeholder.lastChild);
+        }
+        placeholder.appendChild(iframe);
+
+        field.iframe = iframe[0];
+    }
+
+    function postMessage(type, params = {}) {
+        const message = {params: params, type: type, formId: formId, messageId: null};
+
+        return new Promise((resolve) => {
+            const messageId = type + ":" + generateRandomId();
+            callbacks[messageId] = resolve;
+            message.messageId = messageId;
+
+            log('send message', message);
+            window.frames[fields[mainField].iFrameName].postMessage(message, '*');
+        });
+    }
+
+    const handlers = {};
+    form.onChange = function (handler) {
+        handlers[EVENT_ON_CHANGE] = handler;
+    }
+
+    form.onReady = function (handler) {
+        handlers[EVENT_ON_READY] = handler;
+    }
+
+    form.validate = function () {
+        return postMessage('validateRequest');
+    }
+
+    form.submit = function (params) {
+        return postMessage('submitRequest', {
+            params: params || {},
+            browserDetails: {
+                browserUserAgent: navigator.userAgent,
+                browserJavaEnabled: navigator.javaEnabled(),
+                browserLanguage: navigator.language,
+                browserColorDepth: screen.colorDepth,
+                browserScreenHeight: screen.height,
+                browserScreenWidth: screen.width,
+                browserTZ: (new Date()).getTimezoneOffset()
+            }
+        }).then((res) => {
+            if (res.success) {
+                return Promise.resolve(res.result);
+            }
+
+            return Promise.reject({
+                error: res.error,
+                error_details: res.error_details,
+            });
+        });
+    }
+
+    form.focus = function (field) {
+        const f = fields[field] || null;
+        if (f) {
+            window.frames[f.iFrameName].focus();
+        }
+    };
+
+    form.setStyle = function (fieldName, selector, cssRules) {
+        if (!fields[fieldName]) {
+            return;
+        }
+
+        window.frames[fields[fieldName].iFrameName].postMessage({
+            type: 'setStyle',
+            params: {
+                selector: selector,
+                rules: cssRules,
+            }
+        }, '*');
+    };
+
+    function receiveMessage(message) {
+        const event = message.data;
+        if (formId !== event.formId) {
+            return;
+        }
+
+        log(`message received of type "${event.type}"`, event);
+
+        const handlers = {
+            fieldReady: (r) => {
+                if (fields[r.fieldName] === undefined) {
+                    return;
+                }
+                fields[r.fieldName].isReady = true;
+                const ready = Object.keys(fields)
+                    .map((key) => fields[key].isReady)
+                    .reduce((a, b) => a && b, true);
+
+                if (ready) {
+                    emitEvent('ready');
+                }
+            },
+            fieldChanged: function (response) {
+                emitEvent('change', response);
+            },
+        };
+
+        const messageId = event.messageId,
+            callback = callbacks[messageId];
+
+        if (callback !== undefined) {
+            delete callbacks[messageId];
+            callback.apply(form, [event.response]);
+        } else {
+            const handler = handlers[event.type];
+            if (handler) {
+                handler.apply(form, [event.response]);
+            }
+        }
+    }
+
+    function emitEvent() {
+        const args = Array.prototype.slice.call(arguments);
+        const eventName = args.shift();
+        const handler = handlers[eventName];
+        if (handler) {
+            log(`emit event "${eventName}"`, args);
+            handler.apply(null, args);
+        } else {
+            log(`no handler for event "${eventName}"`, args);
+        }
+    }
+
+    window.addEventListener('message', receiveMessage, false);
+
+    function addOnTouchedEventListener() {
+        window.addEventListener('touchend', checkFocus, true);
+    }
+
+    function checkFocus() {
+        for (let [, field] of Object.entries(fields)) {
+            const iframe = window.frames[field.iFrameName];
+            if (typeof iframe) {
+                iframe.postMessage({'type': 'checkFocus'}, '*');
+            }
+        }
+    }
+
+    form.destroy = function () {
+        window.removeEventListener('message', receiveMessage, false);
+        window.addEventListener('touchend', checkFocus, true);
+        for (let fieldName in fields) {
+            let iframe = document.getElementById(fields[fieldName].iFrameName);
+            if (iframe) {
+                iframe.parentNode.removeChild(iframe);
+            }
+        }
+    }
+
+    return form;
+};

package/webpack.config.js

@@ -0,0 +1,111 @@
+const path = require('path');
+const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const TerserPlugin = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+module.exports = (env, argv) => {
+    const modules = [];
+    const distFolder = path.resolve('dist');
+    const isDevelopment = argv.mode === 'development';
+
+    const plugins = [
+        new webpack.DefinePlugin({
+            PTP_BASE_URL: JSON.stringify(process.env.PTP_BASE_URL || 'https://ptp.payyo.ch'),
+        })
+    ];
+
+    const optimization = {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                terserOptions: {
+                    ecma: 6,
+                    format: {
+                        comments: false,
+                    },
+                    compress: {
+                        drop_debugger: !isDevelopment,
+                    },
+                },
+                extractComments: false,
+            }),
+            new HtmlMinimizerPlugin({
+                test: /\.html/i,
+            }),
+        ]
+    };
+
+    if (env.WEBPACK_SERVE) {
+        plugins.push(
+            new BundleAnalyzerPlugin({
+                // analyzerMode: 'static',
+                analyzerHost: '0.0.0.0',
+                analyzerPort: '8888',
+            }),
+        );
+
+        // test module
+        modules.push({
+            entry: './www/index.js',
+            devtool: 'source-map',
+            output: {
+                publicPath: '/',
+                filename: 'index.js',
+                clean: true,
+            },
+            plugins: [
+                ...plugins,
+                new HtmlWebPackPlugin({
+                    template: path.resolve(__dirname, "www/index.html"),
+                    filename: 'index.html',
+                }),
+            ]
+        });
+    }
+
+    // default target
+    modules.push({
+        entry: './src/form/index.js',
+        optimization: optimization,
+        devtool: 'source-map',
+        output: {
+            filename: 'v1.js',
+            path: `${distFolder}/form`,
+            publicPath: '/form',
+            clean: true,
+        },
+        plugins: plugins,
+    });
+
+    if (env.target === 'all' || env.target === 'field') {
+        // Field module
+        modules.push({
+            context: path.resolve(__dirname, 'src'),
+            entry: './field/index.js',
+            optimization: optimization,
+            devtool: 'source-map',
+            output: {
+                filename: 'v1.js',
+                path: `${distFolder}/field`,
+                publicPath: '/',
+                clean: true
+            },
+            plugins: [
+                new HtmlWebpackPlugin({
+                    inject: 'body',
+                    scriptLoading: 'defer',
+                    filename: 'v1.html',
+                    template: path.resolve('src/field/field.html'),
+                }),
+                new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*[.]js/]),
+                ...plugins,
+            ]
+        });
+    }
+
+    return modules;
+};