javascript LPのAPIの返却値でボタン出し分け

Posted 2021-05-03

import axios from 'axios'
import forEach from 'lodash/forEach'

import { isLocalEnv, isFrontEnv, isTestEnv } from '../util/env'

// フロントエンド、テスト環境での検証時はhttp://test-present.gnavi.co.jp/present/sample_cors.php の検証ユーザでログイン
const rakutenCpId = isFrontEnv() || isTestEnv() ? 'cam190101_04' : 'cam190301_03'
const rakutenAllianceCode = 'RKT'

const domainPrefix = isFrontEnv() || isTestEnv() ? 'test-' : ''
const endpointUrl = {
  cpHistoryApi: isLocalEnv() ? 'http://localhost:3003/history/1' : `https://${domainPrefix}my.gnavi.co.jp/api/my/cam/v1/subscribe/history?content_id=campaign_lp&event_id=${rakutenCpId}`,
  alliancePointApi: isLocalEnv() ? 'http://localhost:3003/point/1' : `https://${domainPrefix}my.gnavi.co.jp/api/my/point/v1/cooperation/lists?contents_code=VPL`,
}

const entryButtons = document.getElementsByClassName('js-raku-entry-button')
const entryButtonsInactive = document.getElementsByClassName('js-raku-entry-button-inacitve')

const toggleEntryButtons = () => {
  forEach(entryButtons, (entryButton) => {
    entryButton.classList.add('-hide')
  })
  forEach(entryButtonsInactive, (entryButton) => {
    entryButton.classList.add('-active')
  })
}

const fetchAllianceApi = () => (
  new Promise((resolve, reject) => {
    axios.get(endpointUrl.alliancePointApi, { withCredentials: true })
      .then((res) => {
        if (res.data.status === 200) {
          // "cooperation_flg": 1 （連携済み）かつ "default": 1（貯まるポイントに設定）のアライアンスがalliance_infoとして返ってくる
          const isAllianceRakuten = res.data.alliance_info.some(info => info.alliance_code === rakutenAllianceCode)
          if (isAllianceRakuten) resolve()
        }
      })
      .catch((err) => {
        reject(err)
      })
  })
)

const fetchHistoryApi = () => (
  new Promise((resolve, reject) => {
    axios.get(endpointUrl.cpHistoryApi, { withCredentials: true })
      // 既に当キャンペーンに応募済みの場合のみ、ポイント情報のapiを叩きにいく
      .then((res) => {
        if (res.data.status === '200') {
          const subscribeList = res.data.subscribe_list
          if (subscribeList.length) resolve()
        }
      })
      .catch((err) => {
        reject(err)
      })
  })
)

const memberApi = () => {
  // 対象キャンペーンに応募済み、楽天ID連携済み・貯まるポイントを楽天ポイントに設定、をすべて満たした場合のみエントリーボタンを非活性に
  Promise.all([fetchHistoryApi(), fetchAllianceApi()])
    .then(() => toggleEntryButtons())
    .catch((err) => { throw new Error(err) })
}

export default memberApi