npm package: @jarvis.oddle.me/oddle.pass
Description: The wrapper for apis
Author: Oddle Frontend Team
Latest version: 1.0.7

# Oddle Pass

Oddle Pass allows end customers to login to multiple platforms with a single login and password - When visiting a platform, a user just needs to key in his Oddle Pass credentials and does not need to create a new account.

# Table of contents

<!--ts-->
* [Changelog](#changelog)
* [Flows are supported](#flows-are-supported)
* [Integrating Oddle Pass](#integrating-oddle-pass)
* [Initialize Oddle Pass App](#initialize-oddle-pass-app)
* [Handling result for signing in with Oddle Pass](#handling-result-for-signing-in-with-oddle-pass)
* [Signing in](#signing-in)
  * [Iframe flow](#iframe-flow)
  * [Redirect flow](#redirect-flow)
  * [Callback flow](#callback-flow)
* [Signing out](#signing-out)
  * [On Iframe flow](#signout-on-iframe-flow)
  * [On Redirect flow](#signout-on-redirect-flow)
  * [On Callback flow](#signout-on-callback-flow)
* [Get customer details](#get-customer-details)
* [Change password](#change-password)
* [Update customer details](#update-customer-details)
* [Get all addresses of customer](#get-all-addresses-of-customer)
* [Get address of customer by id](#get-addresses-of-customer-by-id)
* [Update address](#update-address)
* [Delete address](#delete-address)
* [Set preferred delivery address for customer](#set-preferred-delivery-address-for-customer)
* [Create new address for customer](#create-new-address-for-customer)
<!--te-->

# Changelog
[Oddle Pass V5 - CHANGELOGS](https://oddle-pm.atlassian.net/wiki/spaces/OPM/pages/1459028098/Oddle+Pass+V5+-+CHANGELOGS)

# Flows are supported

## Iframe flow:

With browser has support 3rd party cookies, all methods about signIn of Oddle Pass will show on iframe tag which has been embedded into your site.

On the contrary, if browser hasn’t support, Oddle Pass will auto apply redirect flow.

Access Token will be automatic handle and store into localStorage of browser.

## Redirect flow:

This flow just could be apply automatic by Oddle Pass

When you call signIn method from Oddle Pass, your site will be redirect to Oddle Pass site. When customer finish their sign in, Oddle Pass site will automatic redirect back to your site.

With this flow, when you have multiple listeners in many places in your code (ex: one at Header - which will be fired after Header mounted, one at Login button - which will be fired when customer click), after signing in success, just one listener which at Header will be fired because your site will be reload after redirecting.

Access Token will be automatic handle and store into localStorage of browser.

## Callback flow:

With configure useIframe: false when initialize Oddle Pass you can apply this flow for Oddle Pass.

When you call signIn method from Oddle Pass, your site will be redirect to Oddle Pass site. When customer finish their sign in, Oddle Pass site will automatic redirect back to your site.

Access Token will be send to the redirectUrl which you have configured when initialize Oddle Pass.

# Integrating Oddle Pass
## Into Browser
You must include the JS library on your web pages by using:

  ```bash
  <script src="https://accounts.oddle.me/cdn/lib/prod/oddle-pass-wrapper@1.0.0.min.js" />
  ```

## Into WebApp
You can also integrate the library into the web application through the npm library:

  ```bash
  npm i @jarvis.oddle.me/oddle.pass
  ```

# Initialize Oddle Pass App
You just need to initialize Oddle Pass only one time

If you want to add more data into state at different places in your code, you can call initializeApp at anywhere you want, and Oddle Pass just affected by latest calling initializeApp

## Parameters

  ```bash
  clientId: string, // This properties will be sent to you after registering our service success
  redirectUrl: string, // This properties will be sent to you after registering our service success
  lang: string, // This property will be used to set localization message for content at Oddle Pass. It will follow the syntax xx_XX
  payload: Payload

  Payload = {
    menuName: string, // this value will be set into message that will response back to your side, and it will be used at some content text inside Oddle Pass
    disableMarketingMenu: boolean, // if the value of it is true, the Oddle Pass will not show the checkbox for customer subscription your marketing information. Default is false
    state: object, // this properties will contain everything you wanna get back from inside of accessToken
    useIframe: boolean // this properties is a flag for Oddle Pass know run on Iframe mode or Callback mode. OddlePass will run on redirect mode if this key have false value. Default is true
    redirectOriginalUrl: boolean // this property is flag for Oddle Pass know what redirectUrl will be used, home page of site or latest url which customer has accessed. Default is true
  }
  ```

## Usage
### At browser
  ```bash
  window.opw.initializeApp(
    clientId: string,
    redirectUrl: string,
    lang: string,
    {
       menuName: string,
       disableMarketingMenu: boolean,
       state: object,
       useIframe: boolean,
       redirectOriginalUrl: boolean
    }
  )

  window.opw.addListener((action) => {
    console.log({ action })
    // { action: 'initialized' }
  })
  ```

### At WebApp
  ```bash
  import { addListener, initializeApp } from '@jarvis.oddle.me/oddle.pass'

  initializeApp(
    clientId: string,
    redirectUrl: string,
    lang: string,
    {
       menuName: string,
       disableMarketingMenu: boolean,
       state: object,
       useIframe: boolean,
       redirectOriginalUrl: boolean
    }
  )

  addListener((action) => {
    console.log({ action })
    // { action: 'initialized' }
  })
  ```

# Handling result for signing in with Oddle Pass
## Response
This method will create the listener at js lib side, and then when signing in from Oddle Pass success, the result of signing in will be passed into listener.
  ```bash
  {
    action: string // signin_success, facebook_signin_success, signup_success, signout_success, verification_success
    message: string // the message of Oddle Pass, you can use it for toaster
  }
  ```

## Usage
### At browser
  ```bash
  window.opw.addListener((action, message) => {
    console.log({ action, message })
  })
  ```

### At WebApp
  ```bash
  import { addListener } from '@jarvis.oddle.me/oddle.pass'

  addListener((action, message) => {
    console.log({ action, message })
  })
  ```

# Signing in

## On Iframe flow
After signing in success, Oddle Pass will auto store Access Token into localStorage of your browser.

When you call any method of Oddle Pass, they will be auto retrieve Access Token from localStorage and set it into request headers by field Authorization

The Access Token is required for almost methods of Oddle Pass about sign out, changing Oddle Pass’s account, retrieving information of Oddle Pass’s account.

### Parameters
    ```bash
    menuId: string //This id is used to uniquely identify each of your sites
    ```
### Response
This method will return a Promise, so you need handle it to getting data from response.
  ```bash
  {
    success: boolean
    type: string
    message: string
    data: {
      action: string('signin', 'signup'),
      id: string,
      phone: string,
      email: string,
      lastName: string,
      firstName: string,
      acceptMarketing: boolean, // this value is true when customer want to recieve promotions from Oddle Pass
      acceptMarketingMenu: boolean // this value is true when customer want to recieve promotions from your site (just response when action is signup)
    }
  }
  ```
### Usage
* At browser
  ```bash
  const signIn = async (menuId) => {
    const { success, data, message } = await window.opw.signIn(menuId)
    if (success) {
      const { action, id: oddlePassId, email, acceptMarketingMenu } = data

      switch(action) {
        case 'signup':
          // this case will have value of acceptMarketingMenu if you haven't enable disableMarketingMenu
          break
        case 'signin':
          // this case just response Oddle Pass account and don't have acceptMarketingMenu
          break
        default: break
      }
    } else {
      // handle for error case
    }
  }
  ```

* At WebApp
  ```bash
  import { signIn } from '@jarvis.oddle.me/oddle.pass'

  const signIn = async (menuId) => {
    const { success, message, data } = await signIn(menuId)
    if (success) {
      const { id: oddlePassId, email, action } = data

      switch(action) {
        case 'signup':
          // this case will have value of acceptMarketingMenu if you haven't enable disableMarketingMenu
          break
        case 'signin':
          // this case just response Oddle Pass account and don't have acceptMarketingMenu
          break
        default: break
      }
    } else {
      // handle for error case
    }
  }
  ```

## On Redirect flow
This flow just can be used direct by Oddle Pass.

When you initialize Oddle Pass from you site, Oddle Pass will check the browser to know has the browser support 3rd party cookies. If not support, Oddle Pass will auto apply Redirect flow for signing in.

The Access Token still will be store into localStorage of browser after signing in success.

When you call any method of Oddle Pass, they will be auto retrieve Access Token from localStorage and set it into request headers by field Authorization

The Access Token is required for almost methods of Oddle Pass about sign out, changing Oddle Pass account, retrieving information of Oddle Pass account.

### Parameters
  ```bash
  menuId: string //This id is used to uniquely identify each of your sites
  ```
### Response
This method will return a Promise, so you need handle it to getting data from response.
  ```bash
  {
    action: string // signin_success, facebook_signin_success, signup_success
  }
  ```
### Usage
* At browser
  ```bash
  const signIn = (menuId) => window.opw.signIn(menuId)

  // should using addListener method at header or the component which will be mounted first
  window.opw.addListener((action) => {
    switch (action) {
      case 'signin_success':
      case 'facebook_signin_success':
      case 'signup_success':
        // fetch customer info
        break
      default: break
    }
  })
  ```

* At WebApp
  ```bash
  import { addListener, signIn } from '@jarvis.oddle.me/oddle.pass'

  const signIn = (menuId) => signIn(menuId)

  // should using addListener method at header or the component which will be mounted first
  addListener((action) => {
    switch (action) {
      case 'signin_success':
      case 'facebook_signin_success':
      case 'signup_success':
        // fetch customer info
        break
      default: break
    }
  })
  ```

## On Callback flow
After signing in success, Oddle Pass will auto redirect to to your site. At the same time, the Access Token will be sent to redirectUrl which has been register Oddle Pass’s client

### Parameters
  ```bash
  menuId: string //This id is used to uniquely identify each of your sites
  ```

### Callback params
  ```bash
  `${redirectUrl}?accessToken=${accessToken}&expiresIn=${expiresIn}&tokenType=Bearer`
  ```

### Usage
* At browser
  ```bash
  const signIn = (menuId) => window.opw.signIn(menuId)
  ```
### At WebApp
  ```bash
  import { signIn } from '@jarvis.oddle.me/oddle.pass'

  const signIn = (menuId) => signIn(menuId)
  ```

# Signing out
This method will clear all data about cookie and Access Token. So customer will be logged out all of your sites and Oddle Pass site

## On Iframe flow
### Parameters
  ```bash
  oddlePassId: string // the id of customer after they sign in success
  ```

### Response
  ```bash
  {
    success: boolean,
    message: string,
  }
  ```
### Usage
* At browser
  ```bash
  const { success, message } = await window.opw.signOut(oddlePassId)
  ```
* At WebApp
  ```bash
    import { signOut } from '@jarvis.oddle.me/oddle.pass'

    const { success, message } = await signOut(oddlePassId)
  ```
## On Redirect flow
This flow just can be used direct by Oddle Pass.

When you initialize Oddle Pass from you site, Oddle Pass will check the browser to know has the browser support 3rd party cookies. If not support, Oddle Pass will auto apply Redirect flow for signing out.

### Parameters
  ```bash
  oddlePassId: string // the id of customer after they sign in success
  ```

### Response
  ```bash
  {
    action: string // signout_success
  }
  ```

### Usage
* At browser
  ```bash
  await window.opw.signOut(oddlePassId)

  // should using addListener method at header or the component which will be mounted first
  addListener((action) => {
    switch (action) {
      case 'signout_success':
        window.location.reload()
        break
      default: break
    }
  })
  ```

* At WebApp
  ```bash
  import { addListener, signOut } from '@jarvis.oddle.me/oddle.pass'

  await signOut(oddlePassId)

  // should using addListener method at header or the component which will be mounted first
  addListener((action) => {
    switch (action) {
      case 'signout_success':
        window.location.reload()
        break
      default: break
    }
  })
  ```
## On Callback flow
After signing out success, customer will be logged out from Oddle Pass site. At the same time, a announce will be sent to redirectUrl which has been register Oddle Pass’s client

### Parameters
  ```bash
  oddlePassId: string // the id of customer after they sign in success
  ```
### Callback params
  ```bash
  `${redirectUrl}?signoutSuccess=true`
  ```
### Usage
* At browser
  ```bash
  const signOut = (oddlePassId) => window.opw.signOut(menuId)
  ```
* At WebApp
  ```bash
  import { signOut } from '@jarvis.oddle.me/oddle.pass'

  const signOut = (oddlePassId) => signOut(oddlePassId)
  ```

# Get customer details
##Response
  ```bash
  {
    success: boolean,
    message: string,
    data: {
      id: string,
      phone: string,
      email: string,
      gender: string,
      lastName: string,
      firstName: string,
      accountId: string,
      resetPasswordKey: string,
      accountActivated: boolean,
      resetPasswordExpiryDate: string,
      preferredDeliveryAddressId: string,
      registeredForLoyalty: boolean,
      additionalPhone: string,
      salutation: string,
      facebookId: string,
      source: string,
      dob: string,
      code: string,
      acceptMarketing: boolean, // this value is true when customer want to recieve promotions from Oddle Pass
      acceptMarketingMenu: boolean // this value is true when customer want to recieve promotions from your site
    }
  }
  ```

## Usage
### At browser
  ```bash
  const { success, message } = await window.opw.getCustomerInfo()
  ```
### At WebApp
  ```bash
  import { getCustomerInfo } from '@jarvis.oddle.me/oddle.pass'

  const { success, message } = await getCustomerInfo()
  ```

# Change password
This method will be used to update password for customer. It just can use after customer sign in success

## Parameters
  ```bash
  email: string // the email has been used to signup Oddle Pass
  oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass
  ```

## Response
  ```bash
  {
    success: boolean,
    message: string,
  }
  ```
## Usage
### At browser
  ```bash
  const { success, message } = await window.opw.changePassword(email, oddlePassId)
  ```

### At WebApp
  ```bash
  import { changePassword } from '@jarvis.oddle.me/oddle.pass'

  const { success, message } = await changePassword(email, oddlePassId)
  ```

#Update customer details
This method will be used to update information of customer on Oddle Pass

## Parameters
  ```bash
  oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass
  details: {
    lastName: string,
    firstName: string,
    phone: string,
    email: string,
    acceptMarketing: boolean
  }
  ```
## Response
  ```bash
  {
    success: boolean,
    message: string,
    data: {
      id: string,
      phone: string,
      email: string,
      gender: string,
      lastName: string,
      firstName: string,
      accountId: string,
      resetPasswordKey: string,
      accountActivated: boolean,
      resetPasswordExpiryDate: string,
      preferredDeliveryAddressId: string,
      registeredForLoyalty: boolean,
      additionalPhone: string,
      salutation: string,
      facebookId: string,
      source: string,
      dob: string,
      code: string,
      acceptMarketing: boolean, // this value is true when customer want to recieve promotions from Oddle Pass
      acceptMarketingMenu: boolean // this value is true when customer want to recieve promotions from your site
    }
  }
  ```
## Usage
### At Browser
  ```bash
  const { success, message, data } = await window.opw.updateCustomerDetails(oddlePassId, details)
  ```

### At WebApp
  ```bash
  import { updateCustomerDetails } from '@jarvis.oddle.me/oddle.pass';

  const { success, message, data } = await updateCustomerDetails(customerId, details);
  ```

# Get all addresses of customer
## Response
  ```bash
  {
    success: boolean
    message: string
    data: {
      id: string,
      customerId: string,
      autoCompleteAddress: boolean,
      address: string,
      addressTwo: string,
      city: string,
      state: string,
      postal: string,
      country: string,
      latitude: number,
      longitude: number,
      newAddress: boolean
    }
  }
  ```
## Usage
### At browser
  ```bash
  const { success, message, data } = await window.opw.getAllAddress()
  ```
### At WebApp
  ```bash
  import { getAllAddress } from '@jarvis.oddle.me/oddle.pass';

  const { success, message, data } = await getAllAddress();
  ```

# Get address of customer by id
## Parameters
  ```bash
  addressId: string
  ```
## Response
  ```bash
  {
    success: boolean
    message: string
    data: {
      id: string,
      customerId: string,
      autoCompleteAddress: boolean,
      address: string,
      addressTwo: string,
      city: string,
      state: string,
      postal: string,
      country: string,
      latitude: number,
      longitude: number,
      newAddress: boolean
    }
  }
  ```
## Usage
### At browser
  ```bash
  const { success, message, data } = await window.opw.getAddressById(addressId)
  ```
### At WebApp
  ```bash
  import { getAddressById } from '@jarvis.oddle.me/oddle.pass';

  const { success, message, data } = await getAddressById(addressId);
  ```

# Update address
## Parameters
  ```bash
  addressId: string
  addressDetails: {
    autoCompleteAddress: boolean,
    address: string,
    addressTwo: string,
    city: string,
    state: string,
    postal: string,
    country: string,
    latitude: number,
    longitude: number
  }
  ```
## Response
  ```bash
  {
    success: boolean
    message: string
    data: {
      id: string,
      customerId: string,
      autoCompleteAddress: boolean,
      address: string,
      addressTwo: string,
      city: string,
      state: string,
      postal: string,
      country: string,
      latitude: number,
      longitude: number,
      newAddress: boolean
    }
  }
  ```

## Usage
### At browser
  ```bash
  const { success, message, data } = await window.opw.updateAddress(addressId, addressDetails)
  ```
### At WebApp
  ```bash
  import { updateAddress } from '@jarvis.oddle.me/oddle.pass';

  const { success, message, data } = await updateAddress(addressId, addressDetails);
  ```
# Delete address
##Parameters
  ```bash
  addressId: string
  ```
## Response
  ```bash
  {
    success: boolean
    message: string
  }
  ```
##Usage
###At browser
  ```bash
  const { success, message, data } = await window.opw.updateAddress(addressId)
  ```
###At WebApp
  ```bash
  import { updateAddress } from '@jarvis.oddle.me/oddle.pass';

  const { success, message, data } = await updateAddress(addressId);
  ```

# Set preferred delivery address for customer
## Parameters
  ```bash
  addressId: string
  oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass
  ```
## Response
  ```bash
  {
    success: boolean
    message: string
    data: {
      id: string,
      customerId: string,
      autoCompleteAddress: boolean,
      address: string,
      addressTwo: string,
      city: string,
      state: string,
      postal: string,
      country: string,
      latitude: number,
      longitude: number,
      newAddress: boolean
    }
  }
  ```
## Usage
### At browser
  ```bash
  const { success, message, data } = await window.opw.setReferredDeliveryAddress(addressId, oddlePassId)
  ```
### At WebApp
  ```bash
  import { setReferredDeliveryAddress } from '@jarvis.oddle.me/oddle.pass';

  const { success, message, data } = await setReferredDeliveryAddress(addressId, oddlePassId);
  ```
# Create new address for customer
## Parameters
  ```bash
  oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass
  addressInfo: {
    customerId: string,
    autoCompleteAddress: boolean,
    address: string,
    addressTwo: string,
    city: string,
    state: string,
    postal: string,
    country: string,
    latitude: number,
    longitude: number
  }
  ```
## Response
  ```bash
  {
    success: boolean
    message: string
    data: {
      id: string,
      customerId: string,
      autoCompleteAddress: boolean,
      address: string,
      addressTwo: string,
      city: string,
      state: string,
      postal: string,
      country: string,
      latitude: number,
      longitude: number,
      newAddress: boolean
    }
  }
  ```
## Usage
### At browser
  ```bash
  const { success, message, data } = await window.opw.createNewAddress(oddlePassId, addressInfo)
  ```
### At WebApp
  ```bash
  import { createNewAddress } from '@jarvis.oddle.me/oddle.pass';

  const { success, message, data } = await createNewAddress(oddlePassId, addressInfo);
  ```