@tamara-solution/checkout/src/helpers/style.js

Script will be embedded in merchant's site to checkout. The merchant's don't need to redirect to tamara's site.

import { decamelize } from '@/helpers/camel'
import { getWidthScreen, getHeightScreen } from '@/helpers/size'

function isObject(obj) {
  return obj === Object(obj)
}

class Style {
  static BREAK_POINTS = {
    BIG_PHONE: 414,
    PHONE_LANDSCAPE: 640,
    TABLET: 768,
    SMALL_DESKTOP: 800,
    MEDIUM_DESKTOP: 1024,
  }

  constructor(styles) {
    if (!isObject(styles)) {
      throw new TamaraTypeError('Config must be an Object')
    }

    this.styles = { ...styles }
  }

  getFrameStyle() {
    const style = {
      position: 'fixed',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      zIndex: 2019,
      width: '100vw',
      height: '100vh',
    }

    return this._normalizeStyle(style)
  }

  getWrapperStyle() {
    const style = {
      position: 'relative',
      zIndex: 2020,
      overflow: 'hidden',
      borderRadius: '26px',
      width: '80vw',
      height: '80vh',
      marginTop: '10vh',
      marginLeft: '10vw',
      marginRight: '10vw',
      ...this._getWrapperSize(),
    }

    return this._normalizeStyle(style)
  }

  getIframeStyle() {
    const style = {
      width: '80vw',
      height: '80vh',
      zIndex: 2021,
      position: 'relative',
      ...this._getIframeSize(),
    }

    return this._normalizeStyle(style)
  }

  getBackgroundStyle() {
    const style = {
      position: 'fixed',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      opacity: 0.5,
      zIndex: 2019,
      width: '100vw',
      height: '100vh',
      backgroundColor: '#0a1e31',
    }

    return this._normalizeStyle(style)
  }

  _getWrapperSize() {
    const widthScreen = getWidthScreen()
    const heightScreen = getHeightScreen()
    const width = this._getWidth()
    const height = this._getHeight()
    const topSpace = (heightScreen - height) / 2
    const horizontalSpace = (widthScreen - width) / 2

    return {
      width: this._getWidth() + 'px',
      height: this._getHeight() + 'px',
      marginTop: topSpace + 'px',
      marginLeft: horizontalSpace + 'px',
      marginRight: horizontalSpace + 'px',
    }
  }

  _getIframeSize() {
    return {
      width: this._getWidth() + 'px',
      height: this._getHeight() + 'px',
    }
  }

  _getWidth() {
    const {
      BIG_PHONE,
      PHONE_LANDSCAPE,
      TABLET,
      SMALL_DESKTOP,
      MEDIUM_DESKTOP,
    } = Style.BREAK_POINTS
    const widthScreen = getWidthScreen()
    const max = Math.max
    const min = Math.min
    const round = Math.floor
    const widthMapping = {
      [widthScreen > BIG_PHONE]: max(BIG_PHONE, round(0.8 * widthScreen)),
      [widthScreen > PHONE_LANDSCAPE]: max(
        PHONE_LANDSCAPE,
        round(0.8 * widthScreen)
      ),
      [widthScreen > TABLET]: max(TABLET, round(0.8 * widthScreen)),
      [widthScreen > SMALL_DESKTOP]: max(
        SMALL_DESKTOP,
        round(0.8 * widthScreen)
      ),
      [widthScreen > MEDIUM_DESKTOP]: min(
        MEDIUM_DESKTOP,
        round(0.8 * widthScreen)
      ),
    }

    return widthMapping[true] || widthScreen
  }

  _getHeight() {
    const heightScreen = getHeightScreen()

    return Math.min(Math.floor(0.9 * heightScreen), 700)
  }

  _normalizeStyle(style) {
    if (!isObject(style)) {
      throw new TamaraTypeError('Config must be an Object')
    }

    return Object.keys(style)
      .map(function (key) {
        return `${decamelize(key, { separator: '-' })}: ${style[key]};`
      })
      .join('')
  }
}

export default Style