Initial commit

Author: vinodsowdagar

README.md

@@ -0,0 +1,69 @@
+<p align="center">
+  <img src="https://camo.githubusercontent.com/517483ae0eaba9884f397e9af1c4adc7bbc231575ac66cc54292e00400edcd10/68747470733a2f2f7777772e6d756c7469736166657061792e636f6d2f66696c6561646d696e2f74656d706c6174652f696d672f6d756c7469736166657061792d6c6f676f2d69636f6e2e737667" width="400px" position="center">
+</p>
+
+# MultiSafepay module for the Hyva React Checkout
+
+This is the module of our new Magento 2 Hyva React Checkout integration.
+
+Before you get started with MultiSafepay and the Hyva React Checkout, please read and follow our [installation & configuration manual](https://docs.multisafepay.com/docs/magento-2) first.
+
+## About MultiSafepay ##
+MultiSafepay is a collecting payment service provider which means we take care of the agreements, technical details and payment collection required for each payment method. You can start selling online today and manage all your transactions from one place.
+
+## Supported Payment Methods ##
+The supported Payment Methods for this module can be found over here: [Payment Methods & Giftcards](https://docs.multisafepay.com/docs/magento-2#payment-methods)
+
+## Requirements
+- To use the plugin you need a MultiSafepay account. You can create a test account on https://testmerchant.multisafepay.com/signup
+- Magento Open Source version 2.3.x & 2.4.x
+- PHP 7.1+
+
+## Installation
+This package does not work yet with the MultiSafepay_Graphql module. 
+Please disable the module first, if you have it installed.
+
+Add our package to the PaymentMethodsRepo section in the reactapp package.json:
+
+```
+"config": {
+    "paymentMethodsRepo": {
+        "multisafepay": "https://github.com/multisafepay/magento2-react-checkout-multisafepay"
+    }
+},
+```
+
+Install the MultiSafepay package:
+```
+npm install
+```
+
+This module requires several third-party packages:
+
+[react-datepicker](https://www.npmjs.com/package/react-datepicker) - Adds a datepicker component for Date of Birth fields.
+
+[moment.js](https://momentjs.com/) - Parse the dates into a format that is supported by the MultiSafepay API.
+
+[lodash](https://lodash.com/) - Manipulation of objects through different built in modular methods
+
+To install these packages via npm, please run the following commands:
+```
+npm install --save react-datepicker moment lodash
+```
+
+Make sure to rebuild the project with:
+```shell
+npm run build
+```
+
+## Support
+You can create issues on our repository. If you need any additional help or support, please contact <a href="mailto:[email protected]">[email protected]</a>
+
+We are also available on our Magento Slack channel [#multisafepay-payments](https://magentocommeng.slack.com/messages/multisafepay-payments/).
+Feel free to start a conversation or provide suggestions as to how we can refine our Hyva React Checkout integration.
+
+## License
+[Open Software License (OSL 3.0)](https://github.com/MultiSafepay/Magento2Msp/blob/master/LICENSE.md)
+
+## Want to be part of the team?
+Are you a developer interested in working at MultiSafepay? [View](https://www.multisafepay.com/careers/#jobopenings) our job openings and feel free to get in touch with us.

renderers.js

@@ -0,0 +1,63 @@
+import PaymentBaseComponent from './src/components/PaymentBaseComponent';
+import IdealComponent from './src/components/IdealComponent';
+import AfterPayComponent from './src/components/AfterPayComponent';
+import In3Component from './src/components/In3Component';
+import PayAfterDeliveryComponent from './src/components/PayAfterDeliveryComponent';
+import EinvoicingComponent from './src/components/EinvoicingComponent';
+import DirectDebitComponent from './src/components/DirectDebitComponent';
+import DirectBankTransferComponent from './src/components/DirectBankTransferComponent';
+import CreditCardComponent from './src/components/CreditCardComponent';
+
+export default {
+  multisafepay: PaymentBaseComponent,
+  multisafepay_ideal: IdealComponent,
+  multisafepay_afterpay: AfterPayComponent,
+  multisafepay_alipay: PaymentBaseComponent,
+  multisafepay_amex: PaymentBaseComponent,
+  multisafepay_applepay: PaymentBaseComponent,
+  multisafepay_bancontact: PaymentBaseComponent,
+  multisafepay_banktransfer: PaymentBaseComponent,
+  multisafepay_belfius: PaymentBaseComponent,
+  multisafepay_cbc: PaymentBaseComponent,
+  multisafepay_creditcard: CreditCardComponent,
+  multisafepay_directbanktransfer: DirectBankTransferComponent,
+  multisafepay_directdebit: DirectDebitComponent,
+  multisafepay_dotpay: PaymentBaseComponent,
+  multisafepay_einvoicing: EinvoicingComponent,
+  multisafepay_eps: PaymentBaseComponent,
+  multisafepay_giropay: PaymentBaseComponent,
+  multisafepay_idealqr: PaymentBaseComponent,
+  multisafepay_in3: In3Component,
+  multisafepay_inghomepay: PaymentBaseComponent,
+  multisafepay_kbc: PaymentBaseComponent,
+  multisafepay_klarna: PaymentBaseComponent,
+  multisafepay_maestro: PaymentBaseComponent,
+  multisafepay_mastercard: PaymentBaseComponent,
+  multisafepay_payafter: PayAfterDeliveryComponent,
+  multisafepay_paypal: PaymentBaseComponent,
+  multisafepay_paysafecard: PaymentBaseComponent,
+  multisafepay_santander: PaymentBaseComponent,
+  multisafepay_sofort: PaymentBaseComponent,
+  multisafepay_trustly: PaymentBaseComponent,
+  multisafepay_trustpay: PaymentBaseComponent,
+  multisafepay_visa: PaymentBaseComponent,
+  multisafepay_babygiftcard: PaymentBaseComponent,
+  multisafepay_boekenbon: PaymentBaseComponent,
+  multisafepay_fashioncheque: PaymentBaseComponent,
+  multisafepay_fashiongiftcard: PaymentBaseComponent,
+  multisafepay_fietsenbon: PaymentBaseComponent,
+  multisafepay_gezondheidsbon: PaymentBaseComponent,
+  multisafepay_givacard: PaymentBaseComponent,
+  multisafepay_good4fun: PaymentBaseComponent,
+  multisafepay_goodcard: PaymentBaseComponent,
+  multisafepay_nationaletuinbon: PaymentBaseComponent,
+  multisafepay_parfumcadeaukaart: PaymentBaseComponent,
+  multisafepay_podiumcadeaukaart: PaymentBaseComponent,
+  multisafepay_sportenfit: PaymentBaseComponent,
+  multisafepay_vvvcadeaukaart: PaymentBaseComponent,
+  multisafepay_webshopgiftcard: PaymentBaseComponent,
+  multisafepay_wellnessgiftcard: PaymentBaseComponent,
+  multisafepay_wijncadeau: PaymentBaseComponent,
+  multisafepay_winkelcheque: PaymentBaseComponent,
+  multisafepay_yourgift: PaymentBaseComponent,
+};

src/components/AfterPayComponent/AfterPayComponent.jsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useContext, useState } from 'react';
+import { func, shape } from 'prop-types';
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import { __ } from '@hyva/react-checkout/i18n';
+import RadioInput from '@hyva/react-checkout/components/common/Form/RadioInput';
+import TextInput from '@hyva/react-checkout/components/common/Form/TextInput';
+import SelectInput from '@hyva/react-checkout/components/common/Form/SelectInput';
+import Card from '@hyva/react-checkout/components/common/Card';
+import { PAYMENT_METHOD_FORM } from '@hyva/react-checkout/config';
+import CheckoutFormContext from '@hyva/react-checkout/context/Form/CheckoutFormContext';
+import useMultiSafepayPaymentMethodContext from '../../hooks/useMultiSafepayPaymentMethodContext';
+import useMultiSafepayAfterPay from './hooks/useMultiSafepayAfterPay';
+import afterPayConfig from './afterPayConfig';
+import { paymentMethodShape } from '../../utility';
+import useCSS from '../../hooks/useMultiSafepayStyles';
+
+const dateOfBirthField = `${PAYMENT_METHOD_FORM}.multisafepay.afterpay.dateOfBirthField`;
+const genderField = `${PAYMENT_METHOD_FORM}.multisafepay.afterpay.genderField`;
+const phoneField = `${PAYMENT_METHOD_FORM}.multisafepay.afterpay.phoneField`;
+
+function AfterPayComponent({ method, selected, actions }) {
+  const { formikData, setFieldValue } = useMultiSafepayPaymentMethodContext();
+  const [dateField, setDate] = useState(new Date());
+  const { registerPaymentAction } = useContext(CheckoutFormContext);
+  const { placeOrderWithAfterPay } = useMultiSafepayAfterPay(method.code);
+  const isSelected = method.code === selected.code;
+
+  useEffect(() => {
+    setFieldValue(genderField, '');
+    setFieldValue(phoneField, '');
+  }, [setFieldValue]);
+
+  useEffect(() => {
+    setFieldValue(dateOfBirthField, moment(dateField).format('YYYY-MM-DD'));
+  }, [dateField, setFieldValue]);
+
+  useEffect(() => {
+    registerPaymentAction(method.code, placeOrderWithAfterPay);
+  }, [method, registerPaymentAction, placeOrderWithAfterPay]);
+
+  const AfterPayRadioInput = (
+    <RadioInput
+      value={method.code}
+      label={method.title}
+      name="paymentMethod"
+      checked={isSelected}
+      onChange={actions.change}
+    />
+  );
+
+  useCSS(
+    'https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.8.0/react-datepicker.min.css'
+  );
+
+  if (!isSelected || afterPayConfig.transaction_type === 'redirect') {
+    return AfterPayRadioInput;
+  }
+
+  const genderOptions = [
+    { value: 'mr', label: __('Mr.') },
+    { value: 'mrs', label: __('Mrs.') },
+    { value: 'miss', label: __('Miss') },
+  ];
+
+  return (
+    <div>
+      <div>{AfterPayRadioInput}</div>
+      <div className="mx-4 my-4">
+        <Card bg="darker">
+          <div className="container flex flex-col justify-center w-4/5">
+            <DatePicker
+              label={__('Date of Birth')}
+              showYearDropdown
+              showMonthDropdown
+              dropdownMode="select"
+              selected={dateField}
+              className="w-full max-w-md form-input"
+              onChange={(date) => setDate(date)}
+            />
+            <SelectInput
+              label={__('Gender')}
+              name={genderField}
+              formikData={formikData}
+              options={genderOptions}
+            />
+            <TextInput
+              label={__('Telephone')}
+              name={phoneField}
+              formikData={formikData}
+            />
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+AfterPayComponent.propTypes = {
+  method: paymentMethodShape.isRequired,
+  selected: paymentMethodShape.isRequired,
+  actions: shape({ change: func }).isRequired,
+};
+
+export default AfterPayComponent;

src/components/AfterPayComponent/afterPayConfig.js

@@ -0,0 +1,12 @@
+import { get } from 'lodash';
+import RootElement from '@hyva/react-checkout/utils/rootElement';
+
+const config = RootElement.getPaymentConfig();
+const afterpay = get(config, 'multisafepay_afterpay');
+const transactionType = get(afterpay, 'transaction_type', []);
+
+const afterPayConfig = {
+  transaction_type: transactionType,
+};
+
+export default afterPayConfig;

src/components/AfterPayComponent/hooks/useMultiSafepayAfterPay.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { get } from 'lodash';
+import { PAYMENT_METHOD_FORM } from '@hyva/react-checkout/config';
+import usePerformPlaceOrder from '../../../hooks/usePerformPlaceOrder';
+
+const dateOfBirthField = `${PAYMENT_METHOD_FORM}.multisafepay.afterpay.dateOfBirthField`;
+const genderField = `${PAYMENT_METHOD_FORM}.multisafepay.afterpay.genderField`;
+const phoneField = `${PAYMENT_METHOD_FORM}.multisafepay.afterpay.phoneField`;
+
+export default function useMultiSafepayAfterPay(paymentMethodCode) {
+  const performPlaceOrder = usePerformPlaceOrder(paymentMethodCode);
+  const placeOrderWithAfterPay = useCallback(
+    async (values) => {
+      const dateOfBirth = get(values, dateOfBirthField);
+      const gender = get(values, genderField);
+      const phone = get(values, phoneField);
+      const additionalData = {
+        date_of_birth: dateOfBirth,
+        gender,
+        phone_number: phone,
+      };
+
+      await performPlaceOrder(values, additionalData);
+    },
+    [performPlaceOrder]
+  );
+
+  return { placeOrderWithAfterPay };
+}

src/components/AfterPayComponent/index.js

@@ -0,0 +1,3 @@
+import AfterPayComponent from './AfterPayComponent';
+
+export default AfterPayComponent;

src/components/CreditCardComponent/CreditCardComponent.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useContext } from 'react';
+import { get } from 'lodash';
+import { func, shape } from 'prop-types';
+import Card from '@hyva/react-checkout/components/common/Card';
+import RadioInput from '@hyva/react-checkout/components/common/Form/RadioInput';
+import LocalStorage from '@hyva/react-checkout/utils/localStorage';
+import CartContext from '@hyva/react-checkout/context/Cart/CartContext';
+import useMultiSafepayCheckoutFormContext from '../../hooks/useMultiSafepayCheckoutFormContext';
+import useMultiSafepayCreditCard from './hooks/useMultiSafepayCreditCard';
+import creditCardConfig from './creditCardConfig';
+import { paymentMethodShape } from '../../utility';
+import {
+  addComponent,
+  loadComponent,
+  initializeComponent,
+} from './utility/multisafepayComponent';
+
+function CreditCardComponent({ method, selected, actions }) {
+  const { registerPaymentAction } = useMultiSafepayCheckoutFormContext();
+  const { placeOrderWithCreditCard } = useMultiSafepayCreditCard(method.code);
+  const isSelected = method.code === selected.code;
+  const paymentRequestData = get(
+    LocalStorage.getMagentoLocalStorage(),
+    'multisafepay-payment-request'
+  );
+  const [cartData] = useContext(CartContext);
+  const cart = get(cartData, 'cart');
+
+  addComponent();
+
+  useEffect(() => {
+    registerPaymentAction(method.code, placeOrderWithCreditCard);
+  }, [method, registerPaymentAction, placeOrderWithCreditCard]);
+
+  useEffect(() => {
+    if (isSelected) {
+      initializeComponent();
+    }
+  }, [isSelected]);
+
+  const CreditCardRadioInput = (
+    <RadioInput
+      value={method.code}
+      label={method.title}
+      name="paymentMethod"
+      checked={isSelected}
+      onChange={actions.change}
+    />
+  );
+
+  if (!isSelected || creditCardConfig.payment_type === 'redirect') {
+    return CreditCardRadioInput;
+  }
+
+  const orderData = {
+    currency: paymentRequestData.currency,
+    amount: paymentRequestData.cartTotal,
+    customer: {
+      locale: paymentRequestData.locale,
+      country: cart.billing_address.country,
+    },
+    template: {
+      settings: {
+        embed_mode: true,
+      },
+    },
+  };
+
+  loadComponent(paymentRequestData, orderData);
+
+  return (
+    <div>
+      <div>{CreditCardRadioInput}</div>
+      <div className="mx-4 my-4">
+        <Card bg="darker">
+          <div id="MultiSafepayPayment" />
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+CreditCardComponent.propTypes = {
+  method: paymentMethodShape.isRequired,
+  selected: paymentMethodShape.isRequired,
+  actions: shape({ change: func }).isRequired,
+};
+
+export default CreditCardComponent;

src/components/CreditCardComponent/creditCardConfig.js

@@ -0,0 +1,13 @@
+import { get } from 'lodash';
+import RootElement from '@hyva/react-checkout/utils/rootElement';
+
+const config = RootElement.getPaymentConfig();
+
+const creditcard = get(config, 'multisafepay_creditcard');
+const paymentType = get(creditcard, 'payment_type', []);
+
+const creditCardConfig = {
+  payment_type: paymentType,
+};
+
+export default creditCardConfig;