javascript Issue15：20180705 - no79.CVエリア改善

Posted 2021-05-03

// 20180705 - no79.トップページのFV改善フェーズ2(カレンダー追加、予約ボタン周りの回収)
// https://gnavi-work.gnavi.co.jp/jira/browse/MIKAMEI_PDCA-472 // JIRAのチケット
// shop_1-1b, shop_1-1bMovid

import forEach from 'lodash/forEach'
import abtestRun from '../abTestRun'
import { $el, $els } from '../utils/controlElement'

const Issue15 = () => {
  const changeText = () => {
    const targetClass = '.courseBtn .button .button__body a'
    const yoyaku = `${targetClass} .ic-net-yoyaku span`
    if ($el(yoyaku) !== null) $el(yoyaku).innerHTML = 'コース一覧'
    const cal = `${targetClass} .ic-plan-cal span`
    if ($el(cal) !== null) $el(cal).innerHTML = '空席確認'
  }

  const classAdd = (target, clses) => {
    forEach(clses, cls => {
      target.classList.add(cls)
    })
  }

  const toggleElement = (target, param) => {
    target.style.display = param
  }

  const showCalendar = () => {
    const baseDuration = 300

    // カレンダー背景表示・非表示
    const popoverBg = $el('#popover-bg')
    toggleElement(popoverBg, 'block')
    popoverBg.style.opacity = 1
    window.scrollTo(0, 0)
    setTimeout(() => {
      popoverBg.style.opacity = 0
    }, baseDuration + 100)
    setTimeout(() => {
      toggleElement(popoverBg, 'none')
    }, baseDuration * 2 + 101)

    // カレンダー表示
    const popoverCal = $el('#popover_calendar')
    toggleElement(popoverCal, 'block')
    setTimeout(() => {
      popoverCal.style.visibility = 'visible'
    }, baseDuration)
    setTimeout(() => {
      toggleElement($el('#page'), 'none')
    }, baseDuration + 101)
  }

  const cloneAndMoveBtn = () => {
    const chottog = $el('.ic-chottog-wrapper')
    const tel = $el('.ic-tel-wrapper')
    let planCal = $el('.ic-plan-cal-wrapper')

    const btnArr = []
    if (chottog !== null) btnArr.push($el('.ic-chottog-wrapper'))
    if (tel !== null) btnArr.push($el('.ic-tel-wrapper'))
    if (planCal !== null) {
      planCal = planCal.cloneNode(true)
      planCal.querySelector('.ic-plan-cal span').innerHTML = '空席確認・ネット予約'
      planCal.querySelector('a.js-popover-button').removeAttribute('onclick')

      planCal.addEventListener('click', e => {
        /* eslint no-magic-numbers: 0 */
        e.preventDefault()
        window.sc_count('plan_reserve_09')
        showCalendar()
      })
      btnArr.push(planCal)
    }

    forEach(btnArr, el => {
      $el('#js-reserve-btn').appendChild(el)
    })
  }

  const moveCalendar = () => {
    const calName = '#issue15__two-weeks-calendar'
    const calendar = $el(calName)
    if ($el('.ic-plan-cal-wrapper') === null) return
    $el('.headerCV__layout').insertBefore(calendar, $el('.courseBtn'))
    calendar.insertBefore($el('.ic-plan-cal-wrapper'), $el(`${calName} .text--small`))
    $el(`${calName} .ic-plan-cal-wrapper .ic-plan-cal span`).innerHTML = '他の日付を確認する'
    $el('.ic-net-yoyaku span').innerHTML = 'コースから予約する'
    toggleElement($el(calName), 'block')
  }

  const patternMap = {
    // ボタン追従なし
    '1': () => {
      classAdd($el('body'), ['noFollowing'])
      changeText()
    },

    // ボタン追従
    '2': designPattern => {
      classAdd($el('body'), [designPattern])
      changeText()

      // 既存のbottom予約ボタンを削除
      const reserveBtnBottom = $els('#js-reserve-btn > div')
      forEach(reserveBtnBottom, el => {
        /* eslint no-param-reassign: 0 */
        toggleElement(el, 'none')
      })
      cloneAndMoveBtn()
    },
  }

  const caseMap = {
    /**
     * 11 & 21 : 追従なし
     * 12 & 22 : 追従あり、ボタンデザイン
     * 13 & 23 : 追従あり、フラットデザイン
     */
    '11': () => patternMap['1'](),
    '12': () => patternMap['2']('buttonDesign'),
    '13': () => patternMap['2']('flatDesign'),
    '21': () => {
      patternMap['1']()
      moveCalendar()
    },
    '22': () => {
      patternMap['2']('buttonDesign')
      moveCalendar()
    },
    '23': () => {
      patternMap['2']('flatDesign')
      moveCalendar()
    },
  }

  const init = caseNumber => {
    // iphoneX対応
    const viewport = document.querySelector('meta[name=viewport]')
    const content = viewport.content + ',viewport-fit=cover'
    viewport.setAttribute('content', content)

    const pageTop = $el('body').getAttribute('data-pageid') === 'top'
    if (!pageTop) return

    const caseNum = String(caseNumber)
    const pattern = 'pattern' + caseNum[0] + '_' + caseNum[1]
    classAdd($el('body'), ['issue15', pattern])

    const headerCVLayout = $el('.headerCV__layout')
    if (headerCVLayout === null) return

    // headerCVエリアに「ネット予約」を追加
    const header = $el('header', { class: 'theme' })
    const h2 = $el('h2', { text: 'ネット予約' })
    header.appendChild(h2)
    const headerCVLayoutFirstChild = headerCVLayout.firstElementChild
    classAdd(headerCVLayoutFirstChild, ['courseBtn'])
    headerCVLayout.insertBefore(header, headerCVLayoutFirstChild)

    if ($el('.button__balloon') !== null) header.appendChild($el('.button__balloon')).removeAttribute('href')

    // headerCVエリアのボタンに名前追加
    const wrapTargetName = ['.courseBtn > div', '.cv-col .cv-col__item']
    forEach(wrapTargetName, name => {
      forEach($els(name), el => {
        const className = el.querySelector('.button .button__body a > div').className
        classAdd(el, [className + '-wrapper'])
      })
    })

    caseMap[caseNum]()
  }

  window.issue15 = { start: init }
  abtestRun()
}

export default Issue15