Skip to main content

How to add integrations to standalone

Idea​

This documentation will help you to add new UI POWR Drilldown buttons to the standalone according to the Integrations.

Prerequisites​

  1. JS basics
  2. React basics
  3. CSS/HTML

Files​

  1. POWR General customer component for integrations:
    1. In powr_general_customer.jsx You will find all integrations (BC, Shopify, etc.,) that already integrated with POWR standalone.
    2. Path: app/javascript/modules/react_components/powr_general_customers/powr_general_customer.jsx
  2. InfoBox component:
    1. This component helps to create info boxes in chosen integartion or POWR drilldown. It is the yellow box with Warnings, Errors.
    2. Path: app/javascript/modules/react_components/powr_general_customers/info_box.jsx
  3. Condition component:
    1. Condition component as the name says, will implement some code inside when the condition gives true.
    2. Path: app/javascript/modules/react_components/common/condition.jsx
  4. PowrShopify or PowrBigCommerce:
    1. These files are example of how to write an integration on standalone.

Where do integrations render and come from?​

List of available integrations for form builder is in settings.jsx file in path: app/javascript/config/apps/form_builder/settings.jsx
Same for other reactified apps, but for popup integrations controls.jsx
All integrations and POWR Drilldowns you put inside these files as objects, with conditions and inner components (inner components: when you fall into button and it shows information about integrations).


In the const formbuilderSettings you will find all components that is used in standalone.
To add a new integration you need only one function called: **renderPlatformCustomersIntegration()** This file renders the Shopify or BigCommerce integrations according to the users' platform. If you go deeper and find app/javascript/config/apps/helpers.js you will find what integration is going to render.
At this moment you should know how to add an image to S3 Amazon to our www.powrcdn.com

Why?​

We use www.powrcdn.com URL or S3 from amazon to store images and other kinds of assets.

  1. Log in to your LastPass.
  2. Go to the Amazon S3
  3. Press login and choose Josh's Gmail.
  4. AWS services => All services => S3
  5. In find bucket by name field: 'www.powrcdn.com' and click on it.
  6. And you should follow this path to find integration logos => https://www.powrcdn.com/contacts/
  7. In the contacts file we save integration logos and related images. Upload the image of the new integration and BE CAREFUL with NAMING. It should be the same with the meta platform name that you could easily access in the helper and powr_general_customer files.
  8. Edit the newly added images and make them public in the settings.

Helper function​

renderPlatformCustomersIntegration
Inside the function, you see the same PowrDrilldown components, they are same as in the formbuilder settings.jsx or popup controls.jsx

PowrDrilldown props​

Passed props​

There are a lot of props inside the drill down, and you can just read them or add a new one if needed inside the components, but the main props are:

  • newFeatureFlag => Add 'NEW' text to the button.
  • showDoneButton => Shows or hides the 'Done' button in the inner components.
  • inlineStar => Shows or hides 'Star' (pro features) on the button.

Dynamic props​

In the dynamic props, you have 2 objects with propNames: 'label' and 'icon' these two needed to show the label of the integration and the icon of it. If you have done the S3 steps correctly you will get desired results in formbuilder settings or popup controls.

Conditionals​

This code checks: 'Should I show this integration to the user or not?', and if you want to add new integrations just add into ['shopify, 'bigcommerce', ...] array.

Creating your corresponding integration component​

To create your own component for your integration, go to the app/javascript/modules/reactcomponents/powr_general_customers file and find powr_shopify.jsx or powr_bigcommerce.jsx and duplicate one of them. Change the name like 'powr[your_integration].jsx' save it and open this file.

  1. First of all you should find end-points, usually, it is the imports from helpers.
    1. Find imports with CAPITAL LETTERS and the ending with ..._INTEGRATION_CONNECT or ..._INTEGRATION_DISCONNECT these are end-points, you should rename them with your integration name like: "MY_INTEGRATION_CONNECT" or "MY_INTEGRATION_DISCONNECT" if they exist in the helper method if not import them. You just need them in the future codings.
  2. Does your integration have radio buttons?
    1. If yes, you should create an options object beforehand. See examples in powr_shopify.jsx or powr_bigcommerce.jsx
    2. Replace duplicate integration name with a new one.
  3. Change the file according to your task and save it.

Adding into powr_general_customer​

  1. Import your newly created integration .jsx file.
  2. Add below 'shopify' or 'bigcommerce' conditions new condition component and provide props to it.
  3. Test in the localhost.

[Depricated] Simple copies​

Probably you will see the weird dot-separated words, which means you should add simple copies in config/simple_copies/app_settings.yml