323 lines
13 KiB
JavaScript
323 lines
13 KiB
JavaScript
'use client'
|
|
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { redirect } from 'next/navigation'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
|
|
export default function Join() {
|
|
const { getMessage } = useMessage()
|
|
const { post } = useAxios()
|
|
|
|
const joinProcess = async (formData) => {
|
|
const param = {
|
|
langCd: 'JA',
|
|
lastEditUser: formData.get('userId'),
|
|
storeQcastNm: formData.get('storeQcastNm'),
|
|
storeQcastNmKana: formData.get('storeQcastNmKana'),
|
|
postCd: formData.get('postCd'),
|
|
addr: formData.get('addr'),
|
|
telNo: formData.get('telNo'),
|
|
fax: formData.get('fax'),
|
|
payTermsCd: 'JB02',
|
|
kamId: 'E1101011',
|
|
qtCompNm: formData.get('qtCompNm'),
|
|
qtPostCd: formData.get('qtPostCd'),
|
|
qtAddr: formData.get('qtAddr'),
|
|
qtTelNo: formData.get('qtTelNo'),
|
|
qtFax: formData.get('qtFax'),
|
|
userInfo: {
|
|
userId: formData.get('userId'),
|
|
userNm: formData.get('userNm'),
|
|
userNmKana: formData.get('userNmKana'),
|
|
telNo: formData.get('userTelNo'),
|
|
fax: formData.get('userFax'),
|
|
email: formData.get('email'),
|
|
category: formData.get('category'),
|
|
},
|
|
}
|
|
|
|
await post({ url: '/api/login/v1.0/user/join', data: param }).then((res) => {
|
|
if (res) {
|
|
if (res.result.resultCode == 'S') {
|
|
redirect('/join/complete')
|
|
} else {
|
|
alert(res.result.resultMsg)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
|
|
<h1 className="text-center text-4xl font-bold">{getMessage('join.title')}</h1>
|
|
<form action={joinProcess}>
|
|
<div className="mt-10">
|
|
<div>
|
|
● {getMessage('join.sub1.title')} (*{getMessage('common.require')}) <span>{getMessage('join.sub1.comment')}</span>
|
|
</div>
|
|
<table className="w-full">
|
|
<colgroup>
|
|
<col style={{ width: '20%' }} />
|
|
<col style={{ width: '80%' }} />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.storeQcastNm')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="storeQcastNm"
|
|
name="storeQcastNm"
|
|
required
|
|
alt={getMessage('join.sub1.storeQcastNm')}
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub1.storeQcastNm_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.storeQcastNmKana')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="storeQcastNmKana"
|
|
name="storeQcastNmKana"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub1.storeQcastNmKana_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>
|
|
{getMessage('join.sub1.postCd')}/{getMessage('join.sub1.addr')} *
|
|
</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="postCd"
|
|
name="postCd"
|
|
required
|
|
className="block border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub1.postCd_placeholder')}
|
|
></input>
|
|
<input
|
|
type="text"
|
|
id="addr"
|
|
name="addr"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub1.addr_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.telNo')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="telNo"
|
|
name="telNo"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub1.telNo_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub1.fax')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="fax"
|
|
name="fax"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub1.fax_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div className="mt-5">
|
|
● {getMessage('join.sub2.title')} (*{getMessage('common.require')})
|
|
</div>
|
|
<table className="w-full">
|
|
<colgroup>
|
|
<col style={{ width: '20%' }} />
|
|
<col style={{ width: '80%' }} />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userNm')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="userNm"
|
|
name="userNm"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userNmKana')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="userNmKana"
|
|
name="userNmKana"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.userId')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="userId"
|
|
name="userId"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.email')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
autoComplete="email"
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.telNo')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="userTelNo"
|
|
name="userTelNo"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub2.telNo_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.fax')} *</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="userFax"
|
|
name="userFax"
|
|
required
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub1.fax_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub2.category')}</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input id="category" name="category" className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"></input>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div className="mt-5">
|
|
● {getMessage('join.sub3.title')} (*{getMessage('common.require')})
|
|
</div>
|
|
<table className="w-full">
|
|
<colgroup>
|
|
<col style={{ width: '20%' }} />
|
|
<col style={{ width: '80%' }} />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtCompNm')}</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input type="text" id="qtCompNm" name="qtCompNm" className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>
|
|
{getMessage('join.sub3.qtPostCd')}/{getMessage('join.sub3.qtAddr')}
|
|
</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="qtPostCd"
|
|
name="qtPostCd"
|
|
className="block border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub3.qtPostCd_placeholder')}
|
|
></input>
|
|
<input
|
|
type="text"
|
|
id="qtAddr"
|
|
name="qtAddr"
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub3.qtAddr_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtEmail')}</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="email"
|
|
id="qtEmail"
|
|
name="qtEmail"
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
autoComplete="email"
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtTelNo')}</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="qtTelNo"
|
|
name="qtTelNo"
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub3.qtTelNo_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th style={{ border: '1px solid gray', padding: '5px' }}>{getMessage('join.sub3.qtFax')}</th>
|
|
<td style={{ border: '1px solid gray', padding: '5px' }}>
|
|
<input
|
|
type="text"
|
|
id="qtFax"
|
|
name="qtFax"
|
|
className="block w-full border-0 py-1.5 ring-1 ring-inset ring-gray-300"
|
|
placeholder={getMessage('join.sub3.qtFax_placeholder')}
|
|
></input>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="mt-10 mb-10">
|
|
<button
|
|
type="submit"
|
|
className="w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
>
|
|
{getMessage('join.btn.approval_request')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|