{"version":3,"file":"component---src-pages-support-tsx-efdf662b9fc3870ff10b.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/commonCheckbox.tsx","webpack://beaver-help/./src/components/atoms/policyUnderText.tsx","webpack://beaver-help/./src/components/molecules/officialCommonH3Set.tsx","webpack://beaver-help/./src/hooks/useApi.ts","webpack://beaver-help/./src/hooks/useKindName.ts","webpack://beaver-help/./src/types/DeviceKind.ts","webpack://beaver-help/./src/types/SupportKind.ts","webpack://beaver-help/./src/components/organisms/officialSupport01.tsx","webpack://beaver-help/./src/components/organisms/officialSupport02.tsx","webpack://beaver-help/./src/components/organisms/officialSupport03.tsx","webpack://beaver-help/./src/pages/support.tsx","webpack://beaver-help/./src/utils/StringUtil.ts"],"sourcesContent":["import styled from '@emotion/styled'\nimport React, { ChangeEvent, ReactNode } from 'react'\n\nconst Wrapper = styled.div`\n padding: 8px 0;\n .atm-checkbox {\n display: flex;\n width: 100%;\n position: relative;\n cursor: pointer;\n user-select: none;\n padding: 0 0 10px 34px;\n input {\n display: none;\n }\n p {\n padding: 2px 0 0;\n }\n }\n .mark {\n position: absolute;\n top: 0;\n left: 0;\n height: 26px;\n width: 26px;\n border: solid 2px #3abd9e;\n border-radius: 5px;\n box-sizing: border-box;\n &:after {\n content: '';\n position: absolute;\n border: solid #3abd9e;\n border-width: 0 2px 2px 0;\n left: 7px;\n top: 1px;\n width: 8px;\n height: 14px;\n transform: rotate(45deg);\n opacity: 0;\n }\n }\n .atm-checkbox {\n input:checked + .mark {\n background: transparent;\n border-color: #3abd9e;\n }\n input:checked + .mark:after {\n opacity: 1;\n }\n }\n`\ntype IProps = {\n children: ReactNode\n checked?: boolean\n onChange?: (e: ChangeEvent) => void\n}\n\n/**\n * 共通チェックボックスとラベルテキストのセット\n * @param props\n */\nconst CommonCheckbox = (props: IProps): JSX.Element => (\n \n \n \n)\n\nexport default CommonCheckbox\n","import styled from '@emotion/styled'\nimport React from 'react'\n\nconst Wrapper = styled.p`\n margin: -10px 0 30px 34px;\n opacity: 0.5;\n text-align: left;\n font-size: 15px;\n`\n\ntype Props = {\n /** クラス名 */\n className?: string\n}\n\n/**\n * プラポリ同意チェックボックス直下テキスト\n * @constructor\n */\nconst PolicyUnderText = (props: Props): JSX.Element => {\n const { className = '' } = props\n\n return (\n \n 当社製品、サービスに関するご案内を入力メールアドレス宛に\n
\n お送りする可能性があります。\n \n )\n}\n\nexport default PolicyUnderText\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\n\nconst Wrapper = styled.div`\n width: 100%;\n text-align: center;\n margin: 0 0 60px;\n\n .h3 {\n font-size: 2.5em;\n margin: 0 0 20px;\n white-space: pre-wrap;\n font-weight: bold;\n }\n\n p {\n white-space: pre-wrap;\n font-weight: 600;\n opacity: 0.6;\n }\n\n .p-h3-line {\n width: 48px;\n height: 4px;\n margin: 20px auto;\n position: relative;\n\n &:before,\n &:after {\n display: block;\n content: '';\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 2px;\n background: #3ec7b3;\n top: 0;\n }\n\n &:after {\n left: 8px;\n }\n\n span {\n display: block;\n background: #3ec7b3;\n width: 32px;\n margin-left: auto;\n height: 4px;\n border-radius: 2px;\n }\n }\n\n ${BreakPoints.medium} {\n .h3 {\n font-size: 2em;\n }\n\n margin: 0 auto 30px;\n width: calc(100vw - 80px);\n word-break: break-word;\n\n p {\n width: 70%;\n margin: 0 auto;\n }\n }\n\n ${BreakPoints.smallest} {\n p {\n width: 260px;\n }\n }\n`\n\ntype Props = {\n /** クラス名 */\n className?: string\n /** タイトル */\n label?: string\n /** 補足テキスト */\n description?: string\n}\n\n/**\n * 共通H3タグ:h3→divタグへ変更\n * @param props\n * @constructor\n */\nconst OfficialCommonH3Set = (props: Props): JSX.Element => {\n const { className = '' } = props\n\n return (\n \n
{props.label}
\n

{props.description}

\n
\n \n
\n \n )\n}\n\nexport default OfficialCommonH3Set\n","import { useEffect } from 'react'\nimport { API } from 'aws-amplify'\n\nconst awsmobile = require('../aws-exports')\n\ntype IExecApi = (\n path: string,\n body: Body,\n success: (response: Response) => void,\n error?: () => void\n) => void\n\ntype IReturn = { execApi: IExecApi }\nconst useApi = (method = 'post'): IReturn => {\n useEffect(() => {\n API.configure(awsmobile.default)\n }, [])\n\n /** APIを実行 */\n const execApi: IExecApi = async (\n path,\n body,\n success,\n error\n ) => {\n const APIName = 'beaverOfficial'\n const params = {\n body,\n }\n try {\n switch (method) {\n case'get':\n success(await API.get(APIName, path, params))\n break\n default:\n success(await API.post(APIName, path, params))\n break\n }\n } catch (e) {\n error && error()\n }\n }\n return { execApi }\n}\n\nexport default useApi\n","export type ICommonKind = { name: string; kind: T }\n/** Kind名の取得 */\nconst useKindName =\n (\n kindList: ICommonKind[]\n ): ((status: T) => string) =>\n (status: T): string => {\n const result = kindList.find((data) => data.kind === status)\n return result !== undefined ? result.name : ''\n }\n\nexport default useKindName\n","/**\n * 利用環境種別\n */\nexport const DeviceKind = {\n NONE: '',\n /** WEB版 */\n WEB: 'web',\n /** アプリ版 */\n APP: 'app',\n} as const\nexport type DeviceKindType = typeof DeviceKind[keyof typeof DeviceKind]\n\nexport const DeviceKindList: {\n name: string\n kind: DeviceKindType\n}[] = [\n { name: 'WEB版', kind: DeviceKind.WEB },\n { name: 'アプリ版', kind: DeviceKind.APP },\n]\n","/**\n * 問い合わせ種別＠サポート\n */\nexport const SupportKind = {\n NONE: '',\n /** 導入方法のご相談 */\n OPINION: 'introduction-method',\n /** 勤怠データの引継ぎ登録に関するご相談 */\n INHERIT: 'inherit',\n /** 月の開始日変更に関するご相談 */\n START_DATE: 'start-date',\n /** ご意見・ご要望・不具合の報告 */\n HOW_TO_USE: 'detail',\n /** その他のお問い合わせ */\n OTHER: 'other',\n} as const\nexport type SupportKindType = typeof SupportKind[keyof typeof SupportKind]\n\nexport const SupportKindList: {\n name: string\n kind: SupportKindType\n}[] = [\n { name: '利用方法に関するお問い合わせ', kind: SupportKind.OPINION },\n { name: '勤怠データの引継ぎ登録に関するご相談', kind: SupportKind.INHERIT },\n { name: '月の開始日変更に関するご相談', kind: SupportKind.START_DATE },\n { name: 'ご意見・ご要望・不具合の報告', kind: SupportKind.HOW_TO_USE },\n { name: 'その他のお問い合わせ', kind: SupportKind.OTHER },\n]\n","import styled from '@emotion/styled'\nimport { navigate } from 'gatsby-link'\nimport React, { ChangeEvent, useState } from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport { IContactSupport } from '../../types/Contact'\nimport { DeviceKindList } from '../../types/DeviceKind'\nimport { SupportKindList } from '../../types/SupportKind'\nimport StringUtil from '../../utils/StringUtil'\nimport CommonCheckbox from '../atoms/commonCheckbox'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ContactFlow from '../molecules/contactFlow'\nimport OfficialLowHeader from './officialLowHeader'\nimport useRouteParam from '../../hooks/useRouteParam'\nimport PolicyUnderText from '../atoms/policyUnderText'\n\nconst Wrapper = styled.section`\n width: 100%;\n\n .p-section-inner {\n max-width: 620px;\n padding: 60px 0;\n margin: 0 auto;\n\n .p-section-contact {\n width: 100%;\n margin: 0 auto;\n text-align: center;\n\n .item-wrap {\n margin: 0 0 20px;\n\n &.name-wrap {\n display: flex;\n\n div {\n width: 50%;\n margin: 0;\n }\n }\n\n .label-area {\n display: flex;\n flex-wrap: wrap;\n padding: 0 0 2px;\n\n .txt-color-alert {\n margin: 0 5px;\n\n &.require {\n opacity: 0.6;\n }\n\n &.err {\n margin-left: auto;\n word-break: keep-all;\n }\n }\n\n .sub-description {\n margin: 0 5px;\n text-align: left;\n }\n }\n\n textarea {\n min-height: 120px;\n }\n }\n }\n\n .p-top-data-wrap {\n background: #f9f3c4;\n width: 100%;\n border-radius: 8px;\n margin: -30px auto 60px;\n padding: 20px;\n text-align: center;\n\n p {\n margin: 0 0 20px;\n }\n\n button {\n margin: 0;\n }\n\n hr {\n margin: 20px 0;\n border: solid 1px #17ba9a;\n }\n }\n\n .p-select {\n overflow: hidden;\n text-align: center;\n position: relative;\n border: solid 2px #ebebeb;\n background: #ffffff;\n min-height: 40px;\n border-radius: 8px;\n transition: 0.3s;\n\n &:hover {\n border-color: #3ec7b3;\n }\n\n &:before {\n position: absolute;\n top: 45%;\n right: 0.8em;\n width: 0;\n height: 0;\n padding: 0;\n content: '';\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid #272d2c;\n pointer-events: none;\n }\n\n select {\n width: 100%;\n cursor: pointer;\n text-indent: 0.01px;\n text-overflow: ellipsis;\n border: none;\n outline: none;\n background: transparent none;\n box-shadow: none;\n -webkit-appearance: none;\n appearance: none;\n\n &::-ms-expand {\n display: none;\n }\n }\n }\n }\n\n ${BreakPoints.large} {\n .p-section-inner {\n .p-section-contact {\n }\n }\n }\n`\n\ntype IProps = {\n /** お問い合わせ情報 */\n contact: IContactSupport\n /** データ変更時コールバック */\n onChange: (\n key: keyof IContactSupport\n ) => (\n e: ChangeEvent\n ) => void\n /** 確認ボタンクリック時処理 */\n onConfirm: () => void\n}\n\n/**\n * 利用ユーザ用：お問い合わせ-入力画面\n * @constructor\n */\nconst OfficialSupport01 = ({ contact, onConfirm, onChange }: IProps) => {\n const [isError, setError] = useState(false)\n const routeParam = useRouteParam('/help')\n const routeParam2 = useRouteParam('/help/faq')\n\n /** 確認ボタンクリック時処理 */\n const onClick = () => {\n if (\n !contact.company ||\n !contact.companyId ||\n !contact.name ||\n !contact.email ||\n !StringUtil.checkFormatMail(contact.email) ||\n !contact.agree ||\n !contact.supportKind ||\n !contact.body\n ) {\n setError(true)\n return\n }\n onConfirm()\n }\n\n return (\n <>\n \n \n
\n \n
\n

\n キンクラをご利用中に困った時は、こちらのヘルプページをご確認ください。\n

\n {\n window.open(routeParam)\n }}\n >\n ヘルプ\n \n
\n

\n お客様からよくお問い合わせいただくご質問を、Q&A形式でご案内しています。\n

\n {\n navigate(routeParam2)\n }}\n >\n よくあるご質問\n \n
\n
\n {/** 会社名 */}\n
\n

\n 会社名\n \n *必須\n \n {isError && !contact.company && (\n \n 会社名を入力してください。\n \n )}\n

\n \n
\n {/** 企業ID */}\n
\n

\n 企業ID\n \n *必須\n \n \n 「設定管理＞企業設定」から確認可能です。\n \n {isError && !contact.companyId && (\n \n 企業IDを入力してください。\n \n )}\n

\n \n
\n {/** 氏名 */}\n
\n

\n ご担当者名\n \n *必須\n \n {isError && !contact.name && (\n \n 氏名を入力してください。\n \n )}\n

\n \n
\n {/** メールアドレス */}\n
\n

\n 登録メールアドレス\n \n *必須\n \n {isError && !contact.email && (\n \n メールアドレスの形式が間違っています。\n \n )}\n

\n \n
\n {/** お問い合わせ種別 */}\n
\n

\n お問い合わせ種別\n \n *必須\n \n {isError && !contact.supportKind && (\n \n お問い合わせ種別を選択してください。\n \n )}\n

\n
\n \n \n {SupportKindList.map((val) => (\n \n ))}\n \n
\n
\n {/** お問い合わせの詳細 */}\n
\n

\n お問い合わせの詳細\n \n *必須\n \n {isError && !contact.body && (\n \n お問い合わせ内容をご記入ください。\n \n )}\n

\n \n
\n {/** 利用環境 */}\n
\n

\n 利用環境\n

\n
\n \n \n {DeviceKindList.map((val) => (\n \n ))}\n \n
\n
\n {/** エラーメッセージ */}\n
\n

\n エラーメッセージ\n

\n \n
\n {/** プラポリ同意 */}\n
\n \n \n プライバシーポリシー\n \n に同意する\n \n \n {isError && !contact.agree && (\n \n プライバシーポリシーに同意してください。\n \n )}\n
\n {/** 内容確認 */}\n \n 送信内容を確認する\n \n
\n
\n \n \n )\n}\nexport default OfficialSupport01\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport OfficialCommonBtn from '../atoms/officialCommonBtn'\nimport ContactFlow from '../molecules/contactFlow'\nimport OfficialLowHeader from './officialLowHeader'\nimport { IContactSupport } from '../../types/Contact'\nimport useKindName from '../../hooks/useKindName'\nimport { SupportKindList } from '../../types/SupportKind'\nimport { DeviceKindList } from '../../types/DeviceKind'\n\nconst Wrapper = styled.section`\n width: 100%;\n\n .p-section-inner {\n max-width: 620px;\n padding: 60px 0;\n margin: 0 auto;\n\n .p-section-contact {\n width: 100%;\n margin: 0 auto;\n text-align: center;\n\n .item-wrap {\n margin: 0 0 20px;\n\n &.name-wrap {\n display: flex;\n\n div {\n width: 50%;\n margin: 0;\n }\n }\n\n .label-area {\n display: flex;\n flex-wrap: wrap;\n padding: 0 0 2px;\n\n .txt-color-alert {\n margin: 0 5px;\n\n &.require {\n opacity: 0.6;\n }\n\n &.err {\n margin-left: auto;\n word-break: keep-all;\n }\n }\n }\n\n .data-area {\n width: 100%;\n text-align: left;\n margin: 10px 0;\n padding: 0 0 10px;\n border-bottom: solid 2px #dcdee1;\n white-space: pre;\n }\n }\n\n .p-btn-wrap {\n display: flex;\n align-items: center;\n\n .p-btn-edit {\n margin-right: 15%;\n }\n\n .p-btn-contact {\n margin-right: auto;\n }\n }\n }\n }\n\n ${BreakPoints.large} {\n .p-section-inner {\n .p-section-contact {\n }\n }\n }\n`\n\ntype IProps = {\n /** 送信中フラグ */\n isSending: boolean\n /** 問い合わせ情報 */\n contact: IContactSupport\n /** 戻るボタンクリック時コールバック */\n onClickBack: () => void\n /** 確認ボタンクリック時コールバック */\n onClickSend: () => void\n}\n/**\n * 利用ユーザ用:お問い合わせ-入力確認画面\n * @constructor\n */\nconst OfficialSupport02 = ({\n isSending,\n contact,\n onClickBack,\n onClickSend,\n}: IProps) => {\n const getSupportName = useKindName(SupportKindList)\n const getDeviceName = useKindName(DeviceKindList)\n\n return (\n <>\n \n \n
\n \n
\n {/** 会社名 */}\n
\n

\n 会社名\n

\n

{contact.company}

\n
\n {/** 会社名 */}\n
\n

\n 企業ID\n

\n

{contact.companyId}

\n
\n {/** 氏名 */}\n
\n

\n ご担当者名\n

\n

{contact.name}

\n
\n {/** メールアドレス */}\n
\n

\n 登録メールアドレス\n

\n

{contact.email}

\n
\n {/** お問い合わせ種別 */}\n
\n

\n お問い合わせ種別\n

\n

{getSupportName(contact.supportKind)}

\n
\n {/** お問い合わせの詳細 */}\n
\n

\n お問い合わせの詳細\n

\n
{contact.body}
\n
\n {/** 利用環境 */}\n
\n

\n 利用環境\n

\n

\n {getDeviceName(contact.deviceKind) ?? 'ー'}\n

\n
\n {/** エラーメッセージ */}\n
\n

\n エラーメッセージ\n

\n
{contact.error}
\n
\n
\n {/** 修正 */}\n \n 修正する\n \n {/** 送信 */}\n \n この内容で送信する\n \n
\n
\n
\n \n \n )\n}\nexport default OfficialSupport02\n","import styled from '@emotion/styled'\nimport React from 'react'\nimport BreakPoints from '../../styles/breakPoints'\nimport ContactFlow from '../molecules/contactFlow'\nimport OfficialCommonH3Set from '../molecules/officialCommonH3Set'\nimport OfficialLowHeader from './officialLowHeader'\n\nconst Wrapper = styled.section`\n width: 100%;\n\n .p-section-inner {\n display: flex;\n max-width: 1080px;\n padding: 60px 0;\n margin: 0 auto;\n flex-wrap: wrap;\n justify-content: space-between;\n }\n\n ${BreakPoints.large} {\n .p-section-inner {\n .p-section-download {\n }\n }\n }\n`\n/**\n * 利用ユーザ:用お問い合わせ-完了\n * @constructor\n */\nconst OfficialSupport03 = () => (\n <>\n \n \n
\n \n \n
\n \n \n)\n\nexport default OfficialSupport03\n","import styled from '@emotion/styled'\nimport { graphql } from 'gatsby'\nimport React, { ChangeEvent, useState } from 'react'\nimport SEO from '../components/atoms/seo'\nimport OfficialContactLayout from '../components/organisms/officialContactLayout'\nimport OfficialSupport01 from '../components/organisms/officialSupport01'\nimport OfficialSupport02 from '../components/organisms/officialSupport02'\nimport OfficialSupport03 from '../components/organisms/officialSupport03'\nimport useApi from '../hooks/useApi'\nimport useKindName from '../hooks/useKindName'\nimport BreakPoints from '../styles/breakPoints'\nimport { IContactSupport } from '../types/Contact'\nimport { DeviceKindList } from '../types/DeviceKind'\nimport { SupportKindList } from '../types/SupportKind'\nimport StringUtil from '../utils/StringUtil'\n\nconst Wrapper = styled.main`\n font-size: 16px;\n\n .p-head-inner {\n .p-nav-area {\n display: none;\n }\n }\n\n ${BreakPoints.xLarge} {\n .p-head-inner {\n .p-nav-area {\n display: flex;\n }\n }\n }\n`\ntype IPageType = 'input' | 'confirm' | 'complete'\nconst InitContact: IContactSupport = {\n agree: false,\n body: '',\n company: '',\n companyId: '',\n deviceKind: '',\n email: '',\n error: '',\n name: '',\n supportKind: '',\n tel: '',\n}\n\n/**\n * サポート用:お問い合わせページTOP\n * @constructor\n */\nconst SupportPage = () => {\n const [pageType, setPageType] = useState('input')\n const [contact, setContact] = useState(InitContact)\n const [isSending, setSending] = useState(false)\n const getSupportName = useKindName(SupportKindList)\n const getDeviceName = useKindName(DeviceKindList)\n const { execApi } = useApi()\n\n /** データ変更時処理 */\n const onChange =\n (key: keyof IContactSupport) =>\n (\n e: ChangeEvent\n ) => {\n let val: string | boolean = e.target.value\n if (key === 'tel') val = StringUtil.pickNumberHyphen(val)\n else if (key === 'agree' && e.target instanceof HTMLInputElement)\n val = e.target.checked\n setContact({ ...contact, [key]: val })\n }\n\n /**\n * 送信ボタンクリック時処理\n */\n const onClickSend = () => {\n setSending(true)\n const request = {\n ...contact,\n supportKind: getSupportName(contact.supportKind),\n deviceKind: getDeviceName(contact.deviceKind),\n }\n execApi(\n '/support',\n request,\n () => {\n setPageType('complete')\n },\n () => {\n setSending(false)\n }\n )\n }\n\n /** ページタイプを更新 */\n const onChangePageType = (type: IPageType) => () => {\n window.scroll({ top: 0, behavior: 'auto' })\n setPageType(type)\n }\n\n return (\n \n \n \n {/** 入力用 */}\n {pageType === 'input' && (\n \n )}\n {/** 確認用 */}\n {pageType === 'confirm' && (\n \n )}\n {/** 完了用 */}\n {pageType === 'complete' && }\n \n \n )\n}\n\nexport default SupportPage\n\nexport const pageQuery = graphql`\n query SupportPage {\n site {\n siteMetadata {\n title\n }\n }\n }\n`\n","/**\n * 文字列操作系の共通クラス\n */\nexport default {\n /**\n * 全角を全角に変換\n * @param input\n */\n toHalfWidth(input: string): string {\n return input.replace(/[！-～]/g, (_input) =>\n String.fromCharCode(_input.charCodeAt(0) - 0xfee0),\n )\n },\n\n /**\n * ハイフン込の数字を抽出\n * @param value\n */\n pickNumberHyphen(value: T): string {\n let num = ''\n // 数字のみ抽出\n if (typeof value === 'string') {\n const rep = value.replace(/[^0-9０-９-]/g, '')\n if (rep) {\n num = this.toHalfWidth(rep)\n }\n } else if (typeof value === 'number') {\n num = value.toString()\n }\n return num\n },\n /**\n * メールフォーマットかどうかチェックする\n * @param mail\n */\n checkFormatMail(mail: string): boolean {\n if (!mail) return false\n const reg =\n /^[A-Za-z0-9]{1}[A-Za-z0-9_.+-]*@{1}[A-Za-z0-9_.-]{1,}\\.[A-Za-z0-9]{1,}$/\n return reg.test(mail)\n },\n}\n"],"names":["Wrapper","props","className","type","checked","onChange","children","BreakPoints","label","description","awsmobile","require","method","useEffect","API","default","execApi","path","body","success","error","APIName","params","kindList","status","result","find","data","kind","undefined","name","DeviceKindList","SupportKindList","contact","onConfirm","useState","isError","setError","routeParam","useRouteParam","routeParam2","size","level","onClick","window","open","navigate","company","value","placeholder","companyId","email","supportKind","required","hidden","map","val","key","deviceKind","agree","href","target","rel","StringUtil","isSending","onClickBack","onClickSend","getSupportName","useKindName","getDeviceName","disabled","InitContact","tel","pageType","setPageType","setContact","setSending","useApi","onChangePageType","scroll","top","behavior","title","e","HTMLInputElement","request","toHalfWidth","input","replace","_input","String","fromCharCode","charCodeAt","pickNumberHyphen","num","rep","this","toString","checkFormatMail","mail","test"],"sourceRoot":""}