Merge pull request #149 from pooliestudios/amazon-pay

Amazon Pay + Amazon Pay Express

.eslintrc

@@ -0,0 +1,82 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "env": {
+        "es6": true,
+        "browser": true,
+        "jquery": true
+    },
+    "globals": {
+        "wp": false,
+        "wc": false,
+        "jQuery": true,
+        "Payone": false
+    },
+    "extends": [
+        "airbnb/base",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "settings": {
+        // List of modules that are externals in our webpack config.
+        // This helps the `import/no-extraneous-dependencies` and
+        //`import/no-unresolved` rules account for them.
+        "import/core-modules": [
+            "@woocommerce/blocks-registry",
+            "@woocommerce/blocks-checkout",
+            "@woocommerce/settings",
+            "@wordpress/i18n",
+            "@wordpress/is-shallow-equal",
+            "@wordpress/element",
+            "@wordpress/data"
+        ],
+        "import/resolver": {
+            "node": {
+                "extensions": [
+                    ".js",
+                    ".jsx",
+                    ".ts",
+                    ".tsx"
+                ]
+            }
+        }
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4,
+            {
+                "SwitchCase": 1
+            }
+        ],
+        "max-len": [
+            "error",
+            {
+                "code": 120
+            }
+        ],
+        "object-curly-spacing": [
+            "error",
+            "never"
+        ],
+        "arrow-body-style": 0,
+        "@typescript-eslint/no-inferrable-types": 0,
+        "@typescript-eslint/no-var-requires": 0,
+        "import/no-duplicates": 0,
+        "import/no-named-as-default": 0,
+        "import/no-named-as-default-member": 0,
+        "import/extensions": [
+            "error",
+            "ignorePackages",
+            {
+                "js": "never",
+                "jsx": "never",
+                "ts": "never",
+                "tsx": "never"
+            }
+        ]
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "html",
+        "markdown"
+    ]
+}

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+.idea/
+vendor
+
+# Node
+node_modules/
+yarn-error.log
+.yarn
+.cache
+.node_repl_history

README.md

@@ -46,3 +46,5 @@ development state from the `master` branch of this repository.
  3. Rename the extracted folder from `woocommerce-3-master` to `payone-woocommerce-3`
  4. Move the `payone-woocommerce-3` to your WordPress plugin directory (e.g. `wp-content/plugins`)
  5. Activate the plugin on your WordPress admin plugin page
+ 6. Javascript Bundling: `yarn install` & `yarn start`
+ 7. Build files for production: `yarn build` 

assets/build/blocks.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wc-blocks-checkout', 'wc-blocks-registry', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '04f1214563b74c76f714');

assets/css/client.css

@@ -0,0 +1,19 @@
+.wc-block-components-text-input.payone-validated-date-input input {
+    background-color: #fff;
+    border: 1px solid #50575e;
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: #2b2d2f;
+    font-family: inherit;
+    font-size: 1em;
+    line-height: 1em;
+    margin: 0;
+    min-height: 0;
+    padding: 1.5em .5em .5em;
+    width: 100%;
+}
+
+.wc-block-components-text-input.payone-validated-checkbox label {
+    transform: none !important;
+    left: 1.25rem !important;
+}

babel.config.js

@@ -0,0 +1,19 @@
+module.exports = function babelConfig(api) {
+    api.cache(true);
+
+    return {
+        presets: [
+            [
+                '@babel/preset-env',
+                {
+                    useBuiltIns: 'entry',
+                    targets: '>0.25%',
+                    corejs: '3',
+                    modules: 'commonjs',
+                },
+            ],
+            '@babel/preset-react',
+            '@babel/preset-typescript',
+        ],
+    };
+};

client/blocks/alipay/index.jsx

@@ -0,0 +1,9 @@
+import {__} from '@wordpress/i18n';
+import {PAYONE_ASSETS_URL} from '../../constants';
+import getPaymentMethodConfig from '../../services/getPaymentMethodConfig';
+
+export default getPaymentMethodConfig(
+    'payone_alipay',
+    __('PAYONE Alipay', 'payone-woocommerce-3'),
+    `${PAYONE_ASSETS_URL}/icon-alipay.svg`,
+);

client/blocks/bancontact/index.jsx

@@ -0,0 +1,9 @@
+import {__} from '@wordpress/i18n';
+import {PAYONE_ASSETS_URL} from '../../constants';
+import getPaymentMethodConfig from '../../services/getPaymentMethodConfig';
+
+export default getPaymentMethodConfig(
+    'payone_bancontact',
+    __('PAYONE Bancontact', 'payone-woocommerce-3'),
+    `${PAYONE_ASSETS_URL}/icon-bancontact.png`,
+);

client/blocks/credit-card/index.jsx

@@ -0,0 +1,208 @@
+import {__} from '@wordpress/i18n';
+import {useEffect, useRef, useState} from '@wordpress/element';
+import {PAYONE_ASSETS_URL} from '../../constants';
+import getPaymentMethodConfig from '../../services/getPaymentMethodConfig';
+
+window.creditCardCheckCallbackEventProxy = (response) => {
+    window.dispatchEvent(new CustomEvent('creditCardCheckCallbackEvent', {detail: response}));
+};
+
+const PayoneCreditCard = ({
+    eventRegistration,
+    emitResponse,
+    onSubmit,
+}) => {
+    // Data from PayoneBlocksSupport.php - get_payment_method_data()
+    const {
+        creditCardCheckRequestConfig,
+        cardTypes,
+        payoneConfig,
+    } = wc.wcSettings.getSetting('payone_data');
+    const {
+        onPaymentSetup,
+        onCheckoutValidation,
+        onCheckoutAfterProcessingWithError,
+    } = eventRegistration;
+    const {responseTypes, noticeContexts} = emitResponse;
+
+    const [cardHolder, setCardHolder] = useState('');
+    const [cardType, setCardType] = useState(cardTypes[0]?.value ?? '');
+    const [payoneCheckSucceeded, setPayoneCheckSucceeded] = useState(false);
+    const [paymentMethodData, setPaymentMethodData] = useState(null);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const payoneIFrames = useRef(null);
+
+    useEffect(() => {
+        window.addEventListener('creditCardCheckCallbackEvent', ({detail}) => {
+            if (detail.status === 'VALID') {
+                setPayoneCheckSucceeded(true);
+
+                setPaymentMethodData({
+                    card_holder: cardHolder,
+                    card_pseudopan: detail.pseudocardpan,
+                    card_truncatedpan: detail.truncatedcardpan,
+                    card_type: detail.cardtype,
+                    card_expiredate: detail.cardexpiredate,
+                });
+
+                // Re-Trigger payment processing
+                onSubmit();
+            } else if (detail.errormessage) {
+                setErrorMessage(detail.errormessage);
+            }
+        });
+    }, []);
+
+    useEffect(() => {
+        if (payoneIFrames.current) {
+            payoneIFrames.current.setCardType(cardType);
+        }
+    }, [cardType, payoneIFrames.current]);
+
+    useEffect(() => {
+        payoneIFrames.current = new Payone.ClientApi.HostedIFrames(
+            {
+                ...payoneConfig,
+                returnType: 'handler',
+                language: Payone.ClientApi.Language[payoneConfig.language],
+            },
+            {
+                ...creditCardCheckRequestConfig,
+                mid: creditCardCheckRequestConfig.merchant_id,
+                aid: creditCardCheckRequestConfig.account_id,
+                portalid: creditCardCheckRequestConfig.portal_id,
+            },
+        );
+    }, [creditCardCheckRequestConfig, payoneConfig]);
+
+    useEffect(() => onCheckoutValidation(async () => {
+        if (payoneCheckSucceeded) {
+            // Skip the test, as it already succeeded.
+            return true;
+        }
+
+        if (cardHolder.length > 50 || cardHolder.match(/[^a-zA-Z \-äöüÄÖÜß]/g)) {
+            return setErrorMessage(__(
+                // eslint-disable-next-line max-len
+                'Bitte geben Sie maximal 50 Zeichen für den Karteninhaber ein, Sonderzeichen außer Deutsche Umlaute und einem Bindestrich sind nicht erlaubt.',
+                'payone-woocommerce-3',
+            ));
+        }
+
+        if (!payoneIFrames.current.isComplete()) {
+            return setErrorMessage(__(
+                'Bitte Formular vollständig ausfüllen!',
+                'payone-woocommerce-3',
+            ));
+        }
+
+        payoneIFrames.current.creditCardCheck('creditCardCheckCallbackEventProxy');
+
+        // Prevent automatical submit
+        return false;
+    }), [onCheckoutValidation, payoneCheckSucceeded, cardHolder]);
+
+    useEffect(() => onPaymentSetup(() => {
+        if (errorMessage) {
+            return {
+                type: responseTypes.ERROR,
+                message: errorMessage,
+            };
+        }
+
+        if (payoneCheckSucceeded) {
+            return {
+                type: responseTypes.SUCCESS,
+                meta: {
+                    paymentMethodData,
+                },
+            };
+        }
+
+        return {
+            type: responseTypes.ERROR,
+            message: __(
+                'Die Zahlung konnte nicht erfolgreich durchgeführt werden.',
+                'payone-woocommerce-3',
+            ),
+        };
+    }), [onPaymentSetup, paymentMethodData, errorMessage]);
+
+    // hook into and register callbacks for events.
+    useEffect(() => {
+        return () => onCheckoutAfterProcessingWithError(({processingResponse}) => {
+            if (processingResponse?.paymentDetails?.errorMessage) {
+                return {
+                    type: responseTypes.ERROR,
+                    message: processingResponse.paymentDetails.errorMessage,
+                    messageContext: noticeContexts.PAYMENTS,
+                };
+            }
+
+            // so we don't break the observers.
+            return true;
+        });
+    }, [
+        onCheckoutAfterProcessingWithError,
+        noticeContexts.PAYMENTS,
+        responseTypes.ERROR,
+    ]);
+
+    return (
+        <fieldset>
+            <div className="form-row form-row-wide">
+                <label htmlFor="card_holder" title={__('as printed on card', 'payone-woocommerce-3')}>
+                    {__('Card Holder', 'payone-woocommerce-3')}
+                </label>
+
+                <input
+                    className="payoneInput"
+                    id="card_holder"
+                    type="text"
+                    name="card_holder"
+                    value={cardHolder}
+                    onChange={(e) => setCardHolder(e.target.value)}
+                    maxLength="50"
+                />
+            </div>
+
+            <div className="form-row form-row-wide">
+                <label htmlFor="cardtype">{__('Card type', 'payone-woocommerce-3')}</label>
+                <select
+                    id="cardtype"
+                    className="payoneSelect"
+                    onChange={(e) => setCardType(e.target.value)}
+                >
+                    {cardTypes.map(({value, title}) => (
+                        <option key={value} value={value} selected={cardType === value}>{title}</option>
+                    ))}
+                </select>
+            </div>
+
+            <div className="form-row form-row-wide">
+                <label htmlFor="cardpan">{__('Cardpan', 'payone-woocommerce-3')}</label>
+                <div className="inputIframe" id="cardpan"></div>
+            </div>
+
+            <div className="form-row form-row-wide">
+                <label htmlFor="cardcvc2">{__('CVC', 'payone-woocommerce-3')}</label>
+                <div className="inputIframe" id="cardcvc2"></div>
+            </div>
+
+            <div className="form-row form-row-wide">
+                <label htmlFor="expireInput">{__('Expire Date', 'payone-woocommerce-3')}</label>
+                <div className="inputIframe" id="expireInput">
+                    <span id="cardexpiremonth"></span>
+                    <span id="cardexpireyear"></span>
+                </div>
+            </div>
+        </fieldset>
+    );
+};
+
+export default getPaymentMethodConfig(
+    'bs_payone_creditcard',
+    __('PAYONE Kreditkarte', 'payone-woocommerce-3'),
+    `${PAYONE_ASSETS_URL}/icon-creditcard.png`,
+    <PayoneCreditCard />,
+);