St-login-handler NPM

st-login-handler

This document contains detailed instructions on "How to Use" the package st-login-handler, there is also an index.html file included under the src directory available under the app root directory which can be run locally to understand the same.

1. Steps to install the package in your app:

Go to your project directory in terminal.
Run the following command:

npm i st-login-handler

If you have built your application using HTML and JavaScript, import the st-login-handler.min.js file from the dist directory present within the st-login-handler application root directory as below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Shoptype Login (Example App)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script>
      const renderForm = () => {
        stLoginHandler.renderSTLoginForm(
          "form-wrapper",
          {
            name: "Shoptype.com",
            url: "https://www.shoptype.com/",
            env: "dev",
            formType: "signup",
          },
          (appRes) => {
            console.log(appRes);
          }
        );
      };

      const renderCosellForm = () => {
        stLoginHandler.renderSTLoginForm(
          "form-wrapper",
          {
            name: "Shoptype.com",
            url: "https://www.shoptype.com/",
            env: "dev",
            isCosell: true,
            cosell: {
              origin: "https://dev.shoptype.com",
              productId: "00d37998-2677-52a6-caaa-320c1a503815",
              productVendorId: "7561bd24-e190-a16c-7296-cab2bf3fe947",
              imageUrl:
                "https://shop-type-images-store.s3.amazonaws.com/dev/products/00d37998-2677-52a6-caaa-320c1a503815/L969-Green-3.jpg",
            },
          },
          (appRes) => {
            console.log(appRes);
          }
        );
      };

      const removeForm = () => {
        stLoginHandler.removeSTLoginForm();
      };

      const openModal = () => {
        stLoginHandler.openSTLoginModal(
          {
            name: "Shoptype.com",
            url: "https://www.shoptype.com/",
            env: "dev",
          },
          (appRes) => {
            console.log(appRes);
          }
        );
      };

      const openCosellModal = () => {
        stLoginHandler.openSTLoginModal(
          {
            name: "Shoptype.com",
            url: "https://www.shoptype.com/",
            env: "dev",
            isCosell: true,
            cosell: {
              origin: "https://dev.shoptype.com",
              productId: "00d37998-2677-52a6-caaa-320c1a503815",
              productVendorId: "7561bd24-e190-a16c-7296-cab2bf3fe947",
              imageUrl:
                "https://shop-type-images-store.s3.amazonaws.com/dev/products/00d37998-2677-52a6-caaa-320c1a503815/L969-Green-3.jpg",
            },
          },
          (appRes) => {
            console.log(appRes);
          }
        );
      };

      const closeModal = () => {
        stLoginHandler.closeSTLoginModal();
      };
    </script>
  </head>

  <body>
    <div style="margin: 8px 0;">
      <button onclick="renderForm()">Render Form</button>
      <button onclick="renderCosellForm()">Render Cosell Form</button>
      <button onclick="removeForm()">Remove Form</button>
    </div>
    <div style="margin: 8px 0;">
      <button onclick="openModal()">Open Modal</button>
      <button onclick="openCosellModal()">Open Cosell Modal</button>
      <button onclick="closeModal()">Close Modal</button>
    </div>

    <div id="form-wrapper"></div>
    <script
      src="/<replace_with_your_path>/st-login-handler/dist/st-login-handler.min.js"
      async
      onload="renderForm();"
    ></script>
  </body>
</html>

2. Steps to use the package:

This application can be used in two ways, as a form or as a modal but only one instance of the app can run at a time i.e., only one form can be rendered at a time or a single modal can be opened and it must be closed before opening a new modal.
After installing the package, you can render the form by invoking renderSTLoginForm function. This function must be invoked with three mandatory arguments, first argument must be a string whose value must be the id of the div inside which the form will be rendered, second argument must be an object containing the client details and the third argument must be a callback function which must accept an argument that will contain information about the app event.
This application can also be used as a modal by invoking openSTLoginModal function and close the modal using closeSTLoginModal function respectively.
openSTLoginModal function must be invoked with two mandatory arguments, first argument must be an object containing the client details and the second argument must be a callback function which must accept an argument that will contain information about the app event.
closeSTLoginModal function needs to be called if you want to close the modal.
For detailed instructions on implementing the functions, follow the steps below.

a. Steps to use the app as a form:

Import renderSTLoginForm function using the following piece of code:

import { renderSTLoginForm } from "st-login-handler";

Create a div with an id attribute:

<div id="form-wrapper"></div>

Invoke renderSTLoginForm function by passing the div's id where the form will be rendered along with other arguments as:

renderSTLoginForm(
  "form-wrapper",
  { name: "Shoptype.com", url: "https://www.shoptype.com/", env: "dev" }, // env is optional
  (appRes) => {
    console.log(appRes);
  }
);

To open the cosell form, Invoke renderSTLoginForm function by passing the div's id where the form will be rendered along with other arguments as:

renderSTLoginForm(
  "form-wrapper",
  {
    name: "Shoptype.com",
    url: "https://www.shoptype.com/",
    env: "dev", // optional
    formType: "signup", //optional -- if value is signup then by default signup form will be shown
    isCosell: true, // if true, cosell details are required
    cosell: {
      token: "user-authorization-token", // optional
      origin: "https://dev.shoptype.com", // required
      productId: "product-id", // required
      productVendorId: "product-vendor-id", // required
      imageUrl: "product-image-url", // optional
    },
  },
  (appRes) => {
    console.log(appRes);
  }
);

b. Steps to use the app as a modal:

Import openSTLoginModal function using the following piece of code:

import { openSTLoginModal } from "st-login-handler";

Invoke openSTLoginModal function with all the arguments as:

openSTLoginModal(
  { name: "Shoptype.com", url: "https://www.shoptype.com/", env: "dev" }, // env is optional
  (appRes) => {
    console.log(appRes);
  }
);

To open the cosell modal, Invoke openSTLoginModal function with all the arguments as:

openSTLoginModal(
  {
    name: "Shoptype.com",
    url: "https://www.shoptype.com/",
    env: "dev", // optional
    formType: "signup", //optional -- if value is signup then by default signup form will be shown
    isCosell: true, // if true, cosell details are required
    cosell: {
      token: "user-authorization-token", // optional
      origin: "https://dev.shoptype.com", // required
      productId: "product-id", // required
      productVendorId: "product-vendor-id", // required
      imageUrl: "product-image-url", // optional
    },
  },
  (appRes) => {
    console.log(appRes);
  }
);

To close the modal, closeSTLoginModal needs to be invoked. Do not provide any argument to this function.
Import the closeSTLoginModal function using the following piece of code:

import { closeSTLoginModal } from "st-login-handler";

Invoke closeSTLoginModal function as:

closeSTLoginModal();

Details of the different properties that can be passed with the object as the second argument to renderSTLoginForm or as the first argument to openSTLoginModal:

const clientDetails = {
  name: "string", // required, the client name that will be shown on the modal header e.g., Shoptype.com
  url: "string", // required, the URL that will be opened on clicking the client name on the modal header
  rid: "string", // optional, if the referral id is available
  tid: "string", // optional, if the tracker id is available
  env: "string", // optional, this is needed only for the purpose of testing. supported values are: dev, beta, prod. if this property is not passed, env will default to prod
  isCosell: "boolean", // optional, if true is set for this property, the app will open in cosell journey mode
  cosell: {
    token: "string", // optional, add only when user is already logged in (if token is added then cosell form will open at publish screen)
    origin: "string", // required, the origin of the product page URL, e.g. https://dev.shoptype.com
    productId: "string", // required, the id of the product for which the cosell link will be generated
    productVendorId: "string", // required, the vendor id of the product for which the cosell link will be generated
    imageUrl: "string", // optional, if this is added, social media share links will show the image if it is supported
  },
};

renderSTLoginForm("form-wrapper", clientDetails, callbackFunction);
// or
openSTLoginModal(clientDetails, callbackFunction);

const callbackFunction = (appResponse) => {
  // handle app response here
};

3. Handling the app events response:

For different events throughout the app creation till the app is removed from the DOM, the callback function that you provided to renderSTLoginForm or openSTLoginModal function will be called along with the event details object as the first argument.
Follow the code below to handle the different app events in your code:

// all app events:
// form rendered
// modal opened
// modal closed
// modal closed by user
// login success
// login failed
// sign-up success
// sign-up failed

// the app event response object looks like this:
const appResObj = {
  app: {
    event: "string",
    message: "string",
  },
  user: {
    token: "string",
  },
};

// note: for all other events except successful login or successful sign-up event, the user token will be null

const handleAppResponse = (appRes) => {
  switch (appRes.app.event) {
    case "form rendered":
      // do something after the form is rendered
      break;
    case "modal opened":
      // do something after the modal is opened
      break;
    case "modal closed":
      // do something after the modal is closed
      break;
    case "modal closed by user":
      // do something after the modal is closed by clicking
      // on the modal close button
      break;
    case "login success":
      // do something after the login attempt was successful
      // access the logged in user token as below
      console.log(appRes.user.token);
      break;
    case "login failed":
      // do something after the login attempt was failed
      break;
    case "sign-up success":
      // do something after the sign-up attempt was successful
      // access the newly created user's token as below
      console.log(appRes.user.token);
      break;
    case "sign-up failed":
    // do something after the sign-up attempt was failed
  }
};

@babel/runtime

@everything-registry/sub-chunk-2816 @infinitebrahmanuniverse/nolb-st-

6 days ago

6 days ago

11 months ago

1 year ago

2 years ago