How to open form in modal using React JS and submit data through infusionsoft API ?

  0 comments

Step 1 — Install react-responsive-modal

npm install -g react-responsive-modal

Step 2 — Create SimplenewsForm.js

Here is the screenshot of popup code “SimplenewsForm.js“

simple form js

Step 3 — Add SimplenewsForm.js

I have called this popup to import this component class form in App.js . Since, there was requirement to add pop-up on every page. You can include this class according to needs.

 

Call Simple Form JS Component

 

Step 4 — add CSS to design

Simple Form JS Style

I have saved this contact information on Infusionsoft CRM server. So for storing contact information on this server you need to first get Infusionsoft CRM access token.

For generate the Infusionsoft CRM access token please go here https://developer.infusionsoft.com/getting-started-oauth-keys/ and follow all the steps written here.

But this access token has been expired within 24 hours and it's not possible to update the access token day by day for a user, so i have created a custom module for this task and refresh this access token within 24 hours.

So for generate & Refresh this access token i have created a form in which i have store the authentication information of the Infusionsoft CRM.


<?php

namespace Drupal\ozparty_rest\Form;

use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Configure ozparty crm rest settings for this site.
 */
class CrmSettingsForm extends ConfigFormBase {
  /**
   * @var string Config settings
   */
  const SETTINGS = 'ozparty_rest.settings';

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'ozparty_rest_crm_settings';
  }

  /**
   * {@inheritdoc}
   */
  protected function getEditableConfigNames() {
    return [
      static::SETTINGS,
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $config = $this->config(static::SETTINGS);

    $form['crm_key'] = [
      '#type' => 'textfield',
      '#title' => $this->t('CRM API KEY'),
      '#default_value' => @$config->get('crm_key'),
    ];

    $form['crm_secret'] = [
      '#type' => 'textfield',
      '#title' => $this->t('CRM API Secret'),
      '#default_value' => @$config->get('crm_secret'),
    ];

    $form['crm_access_token'] = [
      '#type' => 'textfield',
      '#title' => $this->t('CRM Access Token'),
      '#default_value' => @$config->get('crm_access_token'),
    ];

    $form['crm_refresh_token'] = [
      '#type' => 'textfield',
      '#title' => $this->t('CRM Refresh Token'),
      '#default_value' => @$config->get('crm_refresh_token'),
    ];

    $form['crm_redirect_uri'] = [
      '#type' => 'textfield',
      '#title' => $this->t('CRM Redirect URI'),
      '#default_value' => @$config->get('crm_redirect_uri'),
    ];

    return parent::buildForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {

    // Retrieve the configuration.
    $this->configFactory->getEditable(static::SETTINGS)
      ->set('crm_key', $form_state->getValue('crm_key'))
      ->set('crm_secret', $form_state->getValue('crm_secret'))
      ->set('crm_access_token', $form_state->getValue('crm_access_token'))
      ->set('crm_refresh_token', $form_state->getValue('crm_refresh_token'))
      ->set('crm_redirect_uri', $form_state->getValue('crm_redirect_uri'))
      ->save();

    parent::submitForm($form, $form_state);
  }

}

and then i create a link for authorization of this information.


<?php

namespace Drupal\ozparty_rest\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Url;

/**
 * Class CrmOAuthAuthorizeController.
 */
class CrmOAuthAuthorizeController extends ControllerBase {

  /**
   * Declare authorize method here.
   */
  public function authorize() {
    $key = \Drupal::config('ozparty_rest.settings')->get('crm_key');
    $secret = \Drupal::config('ozparty_rest.settings')->get('crm_secret');
    $redirect_uri = \Drupal::config('ozparty_rest.settings')->get('crm_redirect_uri');

    $url = Url::fromUri('https://signin.infusionsoft.com/app/oauth/authorize');
    $link_options = [
      'query' => [
        'client_id' => $key,
        'redirect_uri' => $redirect_uri,
        'response_type' => 'code',
        'scope' => 'full',
      ],
    ];
    $url->setOptions($link_options);

    $authorize_link = \Drupal::l(t('Authorize Here'), $url);
    return [
      '#markup' => $authorize_link,
    ];
  }

}

and when your authentication information has been authorize successfully then it sends the data on it's callback URL and i have saved the access and refresh token on the setting form via this callback.


<?php

namespace Drupal\ozparty_rest\Controller;

use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\Response;

/**
 * Class CrmTokenController.
 */
class CrmTokenController extends ControllerBase {

  /**
   * Declare generate_token method here.
   */
  public function generate_token() {
    $key = \Drupal::config('ozparty_rest.settings')->get('crm_key');
    $secret = \Drupal::config('ozparty_rest.settings')->get('crm_secret');
    $redirect_uri = \Drupal::config('ozparty_rest.settings')->get('crm_redirect_uri');

    $message = t('CRM Setting Here');
    $client = \Drupal::httpClient();
    $url = 'https://api.infusionsoft.com/token';
    $method = 'POST';
    $options = [
      'form_params' => [
        'client_id' => $key,
        'client_secret' => $secret,
        'code' => $_GET['code'],
        'grant_type' => 'authorization_code',
        'redirect_uri' => $redirect_uri,
      ],
    ];
    try {
      $response = $client->request($method, $url, $options);
      $code = $response->getStatusCode();
      if ($code == 200) {
        $body = $response->getBody();
        $data = json_decode($body);
        if (isset($data->access_token) && isset($data->refresh_token) && !empty($data->access_token) && !empty($data->refresh_token)) {
          ozparty_rest_generate_crm_token($data->access_token, $data->refresh_token);
          $message = t('Token generated successfully');
        }
      }
    }
    catch (\Exception $e) {
      $message = t('Something wrong on generate access token');
    }

    return ['#markup' => $message];
  }

  /**
   * Declare fetch_token method here.
   */
  public function fetch_token() {
    $access_token = \Drupal::config('ozparty_rest.settings')->get('crm_access_token');
    $response = new Response($access_token, Response::HTTP_OK, ['content-type' => 'application/json']);
    return $response;
  }

}

and on Cron execution i have refreshed this access token within 24 hours, so it will never expire.


<?php

/**
 * @file
 * ozparty_rest.module
 */

/**
 * Implements hook_cron()
 */
function ozparty_rest_cron() {
  ozparty_rest_refresh_crm_token();
}

/**
 * Generate Ozparty Token Data.
 */
function ozparty_rest_generate_crm_token($access_token, $refresh_token) {
  $config = \Drupal::configFactory()->getEditable('ozparty_rest.settings');
  $config->set('crm_access_token', $access_token);
  $config->set('crm_refresh_token', $refresh_token);
  $config->save(TRUE);
}

/**
 * Refresh Ozparty Token Data.
 */
function ozparty_rest_refresh_crm_token($access_token, $refresh_token) {
  $key = \Drupal::config('ozparty_rest.settings')->get('crm_key');
  $secret = \Drupal::config('ozparty_rest.settings')->get('crm_secret');
  $authorization = 'Basic' . ' ' . base64_encode($key . ':' . $secret);
  $refresh_token = \Drupal::config('ozparty_rest.settings')->get('crm_refresh_token');

  $client = \Drupal::httpClient();
  $url = 'https://api.infusionsoft.com/token';
  $method = 'POST';
  $options = [
    'headers' => [
      'Authorization' => $authorization,
    ],
    'form_params' => [
      'grant_type' => 'refresh_token',
      'refresh_token' => $refresh_token,
    ],
  ];

  try {
    $response = $client->request($method, $url, $options);
    $code = $response->getStatusCode();
    if ($code == 200) {
      $body = $response->getBody();
      $data = json_decode($body);
      if (isset($data->access_token) && isset($data->refresh_token) && !empty($data->access_token) && !empty($data->refresh_token)) {
        ozparty_rest_generate_crm_token($data->access_token, $data->refresh_token);
        $message = t('Token refreshed successfully');
      }
    }
  }
  catch (\Exception $e) {
    $message = t('Something wrong on refresh access token');
  }
}

and in React Js i have used this access token for creating the contact when user submit this form.

 

Influsion Soft API

 

Add new comment