OrderForm.jsx

OrderForm.jsx

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import get from 'lodash/get';
import { createOrderRequest } from '../store/ducks/orders';
import { camelCaseKeys } from '../helpers/transform-object-keys';
import { getRoute } from '../helpers/routes';

const FORM_ID = 'payment-form';

export default function OrderForm({ productId, productType, albumId }) {
  const [order, setOrder] = useState();
  const preferenceId = get(order, 'externalId');
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(createOrderRequest({ productId, productType, albumId })).then(
      response => {
        if (!response.error) {
          setOrder(camelCaseKeys(response.payload));
        }
      }
    );
  }, [productId, productType, albumId, dispatch]);

  useEffect(() => {
    if (preferenceId) {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src =
        'https://www.mercadopago.cl/integrations/v1/web-payment-checkout.js';
      script.setAttribute('data-preference-id', preferenceId);
      const form = document.getElementById(FORM_ID);
      form.appendChild(script);
    }
  }, [preferenceId]);

  return (
    <form
      id={FORM_ID}
      method="GET"
      action={getRoute('order', { id: get(order, 'id') })}
    />
  );
}

OrderForm.propTypes = {
  productType: PropTypes.string.isRequired,
  productId: PropTypes.number.isRequired,
  albumId: PropTypes.number.isRequired
};