ihk24/gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js

import './ihk-switch.scss';
import $ from 'jquery';
import {createElement} from "../../_global/scripts/helpers";
import IHKSwitch from "./ihk-switch";
import {createButton} from "../../atoms/button/ButtonComponent";
import {createInputText} from "../../atoms/input-text/InputTextComponent";
import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
const Cookies = require('js-cookie');

export const createIhkSwitch = ({
  currentIHK = 'Musterstadt',
  myIHK = 'Hamburg',
  zip = false,
  zipPlaceholder = 'z.B. 20146 Hamburg'
}) => {
  const wrap = createElement('div', ['ihk-switch']);
  const step1 = createElement('div', ['step'], null, wrap);

  if (!zip) {
    const step2 = createElement('div', ['step'], null, wrap);
    const step3 = createElement('div', ['step'], null, wrap);
    const p1 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Möchten Sie diese Seite in einem Cookie als Ihre Heimat-IHK setzen?';
    const p2 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Bisher ist die <strong><span class="my-ihk">' + myIHK + '</span></strong> als Ihre Heimat-IHK hinterlegt. Wollen Sie die Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong> in einem Cookie als Ihre neue Heimat-IHK setzen?';
    const p3 = 'Sie werden zum Angebot der <strong class="large my-ihk">' + myIHK + '</strong> weitergeleitet.';

    const closer = createElement('button', ['closer'], null, wrap);
    closer.ariaLabel = 'Schließen';
    wrap.appendChild(closer);

    step1.dataset.step = 'form';
    createElement('p', [], p1, step1);
    step1.appendChild(buildButtons());

    step2.dataset.step = 'switch';
    createElement('p', [], p2, step2);
    step2.appendChild(buildButtons());

    step3.dataset.step = 'success';
    createElement('p', [], p3, step3);

    window.sessionStorage.removeItem('my-ihk-ignore');
    Cookies.remove('my-ihk', {expires: 365});
  } else {
    const p1 = 'Geben Sie Ihre Postleitzahl ein, um zu dem Angebot Ihrer IHK zu gelangen:';

    const closer = createElement('button', ['closer'], null, wrap);
    closer.ariaLabel = 'Schließen';
    wrap.appendChild(closer);

    step1.dataset.step = 'zip';
    createElement('p', [], p1, step1);
    const inputWrapper = createElement('div', ['input-wrapper'], null, step1);
    inputWrapper.appendChild(createInputText({
      placeholder: zipPlaceholder,
      isRequired: true,
      id: 'switch-zip',
      name: 'switch-zip',
    }));
    inputWrapper.appendChild(createButton({
      label: '',
      link: '#',
      iconPosition: 'icon-inline',
      icon: 'lokalisierung',
    }));
    step1.appendChild(buildOKButton());
  }

  $(document).ready(() => {
    new IHKSwitch($(wrap));
  })

  return wrap;
}

const buildButtons = () => {
  const buttons = createElement('div', ['buttons']);
  const yes = createButton({
    elementType: 'button',
    label: 'Ja',
    color: 'primary-extra-light',
  })
  const no = createButton({
    elementType: 'button',
    label: 'Nein',
    color: 'primary-extra-light',
  })

  yes.classList.add('stay-here');
  no.classList.add('set-session-cookie');

  buttons.appendChild(yes);
  buttons.appendChild(no);

  return buttons;
}

const buildOKButton = () => {
  const buttons = createElement('div', ['buttons', 'align-right']);
  const ok = createButton({
    elementType: 'button',
    label: 'OK',
    color: 'secondary',
    icon: 'check',
    iconPosition: 'icon-right'
  })

  ok.classList.add('stay-here');

  buttons.appendChild(ok);

  return buttons;
}