\n \n
\n )\n};\n\nconst container = {\n width: '75%',\n maxWidth: 300,\n height: 30,\n padding: 3,\n fontSize: 12,\n border: 'none',\n margin: 'auto',\n color: 'white',\n}\n\nexport default SubmitButton;","import styled from 'styled-components';\nimport { TextSize, Colors } from \"../config\";\n\nexport const Container = styled.div`\nwidth: 100vw;\nmin-height: 100%;\nheight: auto;\nbackground-color: ${Colors.background};\ndisplay: flex;\nflex-direction: column;\nalign-items: center;\njustify-content: center;\n`\n\nexport const HeaderStyle = styled.nav`\n height: 120px;\n width: 100%;\n display: flex;\n flex-direction: column;\n font-size: 1rem;\n position: fixed;\n top: 0;\n z-index: 1;\n background-color: white;\n align-items: center;\n box-shadow: 1px 1px 5px #BFBFBF;\n @media screen and (max-width: 620px) {\n height: 60px;\n }\n`\nexport const HeaderLogo = styled.div`\n margin-left: 30px;\n width: 55px;\n height: 70%;\n background-color: #D2D5D7;\n text-align: center;\n @media screen and (max-width: 620px) {\n width: calc(60px * 0.7);\n margin-left: calc(10px + 1vw);\n }\n`\n\nexport const HeaderTitle = styled.div`\n margin-left: 20px;\n text-align: center;\n font-weight: 600; \n font-size: ${TextSize.medium};\n`\n\nexport const HeaderIcons = styled.div`\n position: fixed;\n right: 1.3em;\n display: flex;\n flex-direction: row;\n align-items: center;\n @media screen and (max-width: 620px) {\n right: 10px;\n }\n`\n\nexport const SideBarContent = styled.div`\n background-color: white;\n height: 100%;\n width: 15vw;\n font-size: calc(10px + 1vw);\n position: fixed;\n top: 0;\n z-index: 0;\n display: flex;\n margin-top: 82px;\n background-clip: padding-box;\n @media screen and (max-width: 620px) {\n display: none;\n }\n`\nexport const SideBarItemsContiner = styled.div`\n width: 100%;\n font-size: 15px;\n justify-content: center;\n padding: 0px 0px 6px 5px;\n`\n\nexport const SideBarItem = styled.li`\n height: 30px;\n list-style: none;\n padding: 8px 5px 8px 10px;\n z-index: 1;\n`\n\nexport const SideBarIcon = styled.div`\n display: none;\n @media screen and (max-width: 620px) {\n display: flex;\n position: absolute;\n top: 15px;\n left: 10px;\n }\n`\n\nexport const TitleContainer = styled.div`\n display: felx;\n flex-direction: column;\n with: 95%;\n margin-top: 25px;\n margin-bottom: 25px;\n font-size: ${TextSize.large};\n @media screen and (max-width: 620px) {\n margin-top: 5px;\n }\n`\n\nexport const MasterContainer = styled.div`\n width: 100%; \n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: 10px;\n @media screen and (max-width: 620px) {\n flex-direction: column;\n justify-content: none;\n }\n`\n\nexport const MasterItem = styled.div`\n display: flex;\n flex-direction:row;\n @media screen and (max-width: 620px) {\n width: 80%;\n align-self: center;\n justify-content: space-around;\n margin-bottom: 10px;\n }\n`\n\nexport const Body = styled.div`\n width: 95%;\n max-width:1300px;\n margin-top: 120px;\n font-size: calc(10px + 1vw);\n justify-self: center;\n z-index: 0;\n margin: aout;\n @media screen and (max-width: 620px) {\n margin-top: 80px;\n width: 95%;\n padding-right: 0px;\n padding-left: 0px;\n }\n`\n\nexport const BodyElement = styled.div`\n width: 100%;\n height: 70vh;\n background-color: white;\n margin-top: 10px;\n display: flex;\n flex-direction: row;\n @media screen and (max-width: 800px) {\n height: 140vh;\n flex-direction: column;\n justify-content: center;\n }\n`\n\nexport const BodyItem = styled.div`\n height:100%;\n width:50%;\n padding: 30px;\n text-align: center;\n display: flex; \n flex-direction: column; \n @media screen and (max-width: 800px) {\n width: 100%;\n height: 50%;\n }\n`\n\nexport const FooterStyle = styled.div`\n background-color: white;\n height: 100%\n min-height: 132px;\n width: 100%;\n margin-top: 100px; \n display: flex;\n flex-direction: row;\n padding: 20px;\n // box-shadow: 1px -1px 5px #BFBFBF;\n border-top: solid 2px black;\n @media screen and (max-width: 620px) {\n height: auto;\n flex-direction: column;\n justify-content: center;\n }\n`\n\nexport const FooterColumn = styled.div`\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n @media screen and (max-width: 620px) {\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n margin-bottom: 20px;\n }\n`\nexport const FooterItems = styled.div`\n height: 100%;\n display: flex;\n flex-direction: row;\n @media screen and (max-width: 620px) {\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n margin-bottom: 20px;\n }\n`\n\nexport const SearchContainerStyle = styled.div`\n width: 60%;\n min-width: 300px;\n text-align: end;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n @media screen and (max-width: 620px) {\n width: 90%;\n align-self: center;\n justify-content: space-around;\n margin-bottom: 10px;\n }\n`\nexport const SearchBoxStyle = styled.div`\n background-color: white;\n height: 30px;\n width: 320px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n margin-right: 10px;\n border: solid 2px black;\n @media screen and (max-width: 620px) {\n width: 90%;\n height: 25px;\n }\n`\n\nexport const SearchInput = styled.input`\n // width: 40%;\n width: 90%;\n max-width: 300px;\n height: 100%;\n padding-left: 10px;\n align-self: center;\n border-width:0px;\n border:0px;\n outline:0px;\n font-size: ${TextSize.small};\n`\n\nconst getColor = (props) => {\n if (props.isDragAccept) {\n return '#00e676';\n }\n if (props.isDragReject) {\n return '#ff1744';\n }\n if (props.isDragActive) {\n return '#2196f3';\n }\n return '#eeeeee';\n}\n\nexport const DropZone = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: px;\n border-width: 2px;\n border-radius: 2px;\n border-color: ${props => getColor(props)};\n border-style: dashed;\n background-color: #fafafa;\n color: #bdbdbd;\n outline: none;\n transition: border .24s ease-in-out;\n`;\n\nexport const DropDownStyle = styled.div`\n position: absolute;\n top: 40px;\n right: -100px;\n width: 200px;\n transform: translateX(-45%);\n background-color: white;\n align-items: center;\n box-shadow: 1px 1px 5px #BFBFBF;\n padding: 1rem;\n overflow: hidden;\n\n`\n\nexport const DropDownItemStyle = styled.div`\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0.5rem;\n transition: background-color 300ms;\n &:hover {\n background-color: rgba(250,250,250,1);\n } \n`\n\nexport const CustomerContainer = styled.div`\n width: 100%;\n z-index: 0;\n overflow-y: scroll;\n background-color: white;\n`\n\nexport const LoginStyle = styled.div`\n width: 300px;\n height: 60%;\n background-color: white;\n margin: auto;\n text-align: center;\n justify-content: center;\n`\n\nexport const ItemDisplayStyle = styled.div`\n width: 100%;\n background-color: white;\n display: flex;\n flex-direction: row;\n padding: 10px;\n @media screen and (max-width: 620px) {\n flex-direction: column;\n padding-top: 10px;\n }\n`\n\nexport const ImageDisplayStyle = styled.div`\n width: 45%;\n height: 100%;\n padding:64px 0 0 24px;\n @media screen and (max-width: 620px) {\n padding-left: 0px;\n padding-top: 20px;\n width: 100%;\n margin: auto;\n }\n`\n\nexport const InfoDisplayStyle = styled.div`\n width: 55%;\n height: 100%;\n @media screen and (max-width: 620px) {\n width: 90%;\n margin: auto;\n text-align: center;\n }\n`\n\nexport const InfoButtonDisplayStyle = styled.div`\n height: 10%;\n text-align: end;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 24px 5px 5px 5px;\n @media screen and (max-width: 620px) {\n text-align: center;\n }\n`\n\nexport const CardListStyle = styled.div`\n width: 100%;\n height: 120px;\n background-color: white;\n display: flex;\n flex-direction: row;\n border-bottom: solid 1px lightgray;\n padding: 5px 0 5px 0;\n @media screen and (max-width: 620px) {\n flex-direction: column;\n height: auto;\n }\n`\n\nexport const ListItemInfoStyle = styled.div`\n display: flex;\n flex-direction: row;\n height: 100%;\n width: calc(100% - 120px);\n align-self: center;\n border-right: solid 1px lightgray;\n @media screen and (max-width: 620px) {\n width: 100%;\n margin-bottom: 10px;\n border-right: none;\n }\n`\n\nexport const ListImageStyle = styled.img`\n height: 100%;\n width: 100%;\n object-fit: cover;\n @media screen and (max-width: 620px) {\n height: 70%;\n object-fit: cover;\n }\n`\n\nexport const ListItemButtonStyle = styled.div`\n display: flex;\n width: 120px;\n justify-content: center;\n align-items: center;\n @media screen and (max-width: 620px) {\n width: 100%;\n }\n`\n\nexport const TableStyle = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n height: 45px;\n @media screen and (max-width: 620px) {\n flex-direction: column;\n height: auto;\n text-align: center;\n }\n`\n\nexport const TableTitle = styled.div`\n width: 30%;\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n text-align: center;\n @media screen and (max-width: 620px) {\n width: 100%;\n margin-bottom: 5px;\n }\n`\nexport const EditTableContentInput = styled.input`\n width: 60%;\n @media screen and (max-width: 620px) {\n width: 95%;\n }\n`","import React from 'react';\nimport { useHistory, useParams } from 'react-router-dom';\n//components\nimport SubmitButton from '../../Components/SubmitButton';\nimport { CustomerContainer } from '../../Components/StyledComponents';\n//config\nimport { TextSize, Colors } from '../../config';\n\nconst Top = () => {\n const history = useHistory();\n const { account_name } = useParams();\n\n const onClick = () => {\n history.push({\n pathname: `/user/${account_name}/phone`,\n });\n };\n\n return (\n \n
\n \n スマホで査定\n
\n \n サテコン\n
\n \n })
\n
\n \n \n
\n \n お手持ちのスマートフォンから\n
\n \n あなたの愛車を簡単査定！\n
\n \n {error} \n
\n )}\n \n setPhone(e.target.value)} style={inputContainer} placeholder={'03-1234-5678'} />\n
\n \n
\n \n 送信後、確認コードを含む\n
\n \n テキストメッセージが届きます。\n
\n \n {error} \n
\n )}\n \n checkPIN(e)} />\n
\n \n {\n process.env.NODE_ENV !== 'production'\n ? \n \n コードが届いていない場合\n \n
\n \n
\n )\n } else { // color gray for next progress\n style = { ...style, backgroundColor: Colors.customerInputUnprogressed };\n return (\n \n {text}\n
\n {\n index === currentIndex ?\n \n :\n null\n }\n \n
\n )\n }\n }\n\n return (\n \n {text}\n
\n {\n index === currentIndex ?\n \n :\n null\n }\n \n {\n textList.map((item, index) => {\n return getProgress(item, index);\n })\n }\n
\n );\n};\n\n\nconst barStyle = {\n height: 30,\n width: '85%',\n maxWidth: 300,\n display: 'flex',\n flexDirection: 'row',\n margin: '10% auto 10% auto',\n fontSize: 10,\n color: 'white',\n justifyContent: 'center',\n alignSelf: 'center'\n}\nconst progressContainer = {\n height: '100%',\n width: '30%',\n display: 'flex',\n flexDirection: 'column',\n marginRight: 1\n}\n\nconst progressStyle = {\n height: 28,\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n}\n\nconst underLineStyle = {\n\n}\n\nexport default InputProgressBar","import React, { useCallback, useEffect, useState } from 'react';\nimport { useHistory, useLocation, useParams } from 'react-router-dom';\nimport { Alert } from 'react-bootstrap';\nimport CreatableSelect from 'react-select/creatable'\nimport Ajv from 'ajv';\nimport styled from 'styled-components';\nimport { errorMessages, Colors, TextSize } from '../../config';\n//components\nimport Title from '../../Components/Title';\nimport SubmitButton from '../../Components/SubmitButton';\nimport { CustomerContainer } from '../../Components/StyledComponents';\nimport InputProgressBar from '../../Components/InputProgressBar';\n//functions\nimport { getMakerOptions, getCarTypeOptions, getAgeOptions, getWarekiOptions, getMileageOptions } from '../../Functions';\n\nconst Input = () => {\n const history = useHistory();\n const { state } = useLocation();\n const [maker, setMaker] = useState('');\n const [carType, setCarType] = useState('');\n const [age, setAge] = useState('');\n const [mileage, setMileage] = useState('');\n const [name, setName] = useState('');\n const [phone, setPhone] = useState('');\n const [address, setAddress] = useState('');\n const [mail, setMail] = useState('');\n const [isUpdate, setIsUpdate] = useState(false);\n const [carId, setCarId] = useState();\n const [checked, setChecked] = useState('西暦');\n const [makerOptions, setMakerOptions] = useState([]);\n const [carTypeOptions, setCarTypeOptions] = useState([]);\n const [ageOptions, setAgeOptions] = useState([]);\n const [mileageOptions, setMileageOptions] = useState([]);\n const [carImageData, setCarImageData] = useState([]);\n const [error, setError] = useState('');\n const { account_name } = useParams();\n\n // if user went back to this page from next page\n useEffect(() => {\n if (state) {\n const { generalInfo, carImages } = state; // fetch previous input info\n setMaker(generalInfo.maker);\n setCarType(generalInfo.carType);\n setAge(generalInfo.age);\n setMileage(generalInfo.mileage);\n setName(generalInfo.name);\n setPhone(generalInfo.phone);\n setAddress(generalInfo.address);\n setMail(generalInfo.mail);\n setIsUpdate(generalInfo.isUpdate);\n setCarId(generalInfo.carId);\n //for photos\n setCarImageData(carImages);\n } else {\n history.push({\n pathname: `/user/${account_name}`,\n });\n }\n }, [state])\n\n\n useEffect(() => {\n const ageOptions = getAgeOptions();\n setAgeOptions(ageOptions);\n\n const miliageOptions = getMileageOptions();\n setMileageOptions(miliageOptions);\n\n const getMakers = async () => {\n const makerOptions = await getMakerOptions();\n setMakerOptions(makerOptions);\n }\n\n getMakers();\n }, []);\n\n useEffect(() => {\n const getCarTypes = async () => {\n setCarTypeOptions([]);\n const carTypeOptions = await getCarTypeOptions(maker);\n setCarTypeOptions(carTypeOptions);\n };\n\n getCarTypes();\n }, [maker]);\n\n const onChangeMaker = (e) => {\n if (!e) {\n setMaker('');\n } else {\n setMaker(e.value);\n }\n\n setCarType('');\n };\n\n const onChangeCarType = (e) => {\n if (!e) {\n setCarType('');\n } else {\n setCarType(e.value);\n }\n };\n\n const onChangeAge = (e) => {\n if (!e) {\n setAge('');\n } else {\n setAge(e.value);\n }\n };\n\n const onChangeMileage = (e) => {\n if (!e) {\n setMileage('');\n } else {\n setMileage(e.value);\n }\n };\n\n const onChecked = (e) => {\n\n if (e === '西暦') {\n const ageOptions = getAgeOptions();\n setAgeOptions(ageOptions);\n } else {\n const warekiOptions = getWarekiOptions();\n setAgeOptions(warekiOptions);\n }\n\n setChecked(e);\n };\n\n const checkForm = useCallback(() => {\n const ajv = Ajv({ allErrors: true });\n const errorMessagesMap = new Map(errorMessages);\n const errorMessage = [];\n\n const data = {\n maker: maker ? maker : undefined,\n carType: carType ? carType : undefined,\n age: age ? age : undefined,\n mileage: mileage ? mileage : undefined,\n name: name ? name : undefined,\n phone: phone ? phone : undefined,\n address: address ? address : undefined,\n mail: mail,\n }\n\n const schema = {\n required: ['maker', 'carType', 'age', 'mileage', 'name', 'phone', 'address', 'mail'],\n type: 'object',\n properties: {\n mail: {\n type: 'string',\n format: 'email',\n },\n },\n };\n\n const validate = ajv.compile(schema);\n const valid = validate(data);\n\n if (!valid) {\n console.log(validate.errors);\n validate.errors.forEach(error => {\n if (error.keyword === 'required') {\n errorMessage.push(errorMessagesMap.get(error.params.missingProperty) + '\\n');\n } else if (error.keyword === 'format') {\n errorMessage.push(`メールアドレスのフォーマットが正しくありません。\\n`)\n }\n })\n\n setError(errorMessage);\n return;\n }\n history.replace({\n pathname: history.location.pathname,\n state: {\n generalInfo: {\n maker: maker,\n carType: carType,\n age: age,\n mileage: mileage,\n name: name,\n phone: phone,\n address: address,\n mail: mail,\n isUpdate: isUpdate,\n carId: carId,\n },\n carImages: carImageData\n }\n });\n\n history.push({\n pathname: `/user/${account_name}/photos`,\n state: {\n generalInfo: {\n maker: maker,\n carType: carType,\n age: age,\n mileage: mileage,\n name: name,\n phone: phone,\n address: address,\n mail: mail,\n isUpdate: isUpdate,\n carId: carId,\n },\n carImages: carImageData,\n }\n });\n }, [history, maker, carType, age, mileage, name, phone, address, mail, isUpdate, carId]);\n\n return (\n \n {error} \n
\n )}\n \n
\n \n \n \n onChangeMaker(value)} className={'top-selection'} />\n
\n \n \n onChangeCarType(value)} className={'top-selection'} />\n
\n \n onChangeAge(value)} className={'top-selection'} />\n
\n \n \n \n onChecked(e.target.value)} />\n \n onChecked(e.target.value)} />\n
\n \n \n onChangeMileage(value)} className={'top-selection'} />\n
\n \n \n \n setName(e.target.value)} />\n
\n \n \n setPhone(e.target.value)} readOnly={true} />\n
\n \n \n setAddress(e.target.value)} />\n
\n \n \n setMail(e.target.value)} />\n
\n \n
\n );\n};\n\nconst Grid = ({ swapImage, item, index, setSelectedIndex, changeText, allowEditing }) => {\n\n const textLimit = 100;\n const isRequired = requiredImageIndex.includes(index);\n\n return (\n - \n {\n carImageDataAndDescription && carImageDataAndDescription.slice(0, 4).map((item, ind) =>\n
\n
\n :\n null\n }\n \n 他にも写真を送信いただけると\n
\n \n より正確な査定金額を出すことができます！\n
\n - \n {\n carImageDataAndDescription && carImageDataAndDescription.slice(4, carImageDataAndDescription.length).map((item, ind) => {\n const index = ind + 4;\n return (\n
\n
\n {\n allowEditing ?\n \n {item.partName}\n
\n {\n isRequired ?\n \n ※\n
\n :\n null\n }\n {item.description}
\n }\n\n checkPhotos()} isEnabled={true} />\n \n
\n );\n};\n\nexport const wrapper = {\n width: '100%',\n height: '100%',\n overflow: 'scroll',\n backgroundColor: '#F9F9F9'\n};\n\nexport default Photos;","import axios from 'axios';\nimport { DOMAIN_NAME, SERVICE_NAME, SENDER_ADDRESS, EMAIL_URL } from \"../config.js\";\n\nclass EmailService {\n SendTextCustomer = async (to, name, contactNumber) => {\n const from = SENDER_ADDRESS;\n const subject = `【${SERVICE_NAME}】査定依頼を受け付けました`;\n let bodyText = `${name}様\\r\\n`;\n bodyText = bodyText + '\\r\\n';\n bodyText = bodyText + `【${SERVICE_NAME}】で査定をお申し込みいただきありがとうございます。\\r\\n`;\n bodyText = bodyText + `お客様のお問い合わせ番号は[${contactNumber}]です。\\r\\n`;\n bodyText = bodyText + '詳細につきましては弊社担当より直接ご連絡致します。\\r\\n';\n bodyText = bodyText + '\\r\\n';\n bodyText = bodyText + '---------------------------\\r\\n';\n bodyText = bodyText + '\\r\\n';\n bodyText = bodyText + '本メールは自動返信されております。\\r\\n';\n bodyText = bodyText + 'このアドレスにご返信いただいても、内容確認及びご返答ができません。\\r\\n';\n\n const json = {\n \"from\": from,\n \"to\": to,\n \"subject\": subject,\n \"bodyText\": bodyText\n }\n\n return await axios.post(EMAIL_URL + '/sendtext', json);\n };\n\n SendTextStore = async (to) => {\n const from = SENDER_ADDRESS;\n const subject = `【${SERVICE_NAME}】査定依頼がありました`;\n let bodyText = '';\n bodyText = bodyText + `【${SERVICE_NAME}】で査定依頼がありました。\\r\\n`;\n bodyText = bodyText + '詳細につきましては管理画面にログインして確認してください。\\r\\n';\n bodyText = bodyText + '\\r\\n';\n bodyText = bodyText + `https://${DOMAIN_NAME}/admin/login\\r\\n`;\n bodyText = bodyText + '\\r\\n';\n bodyText = bodyText + '---------------------------\\r\\n';\n bodyText = bodyText + '\\r\\n';\n bodyText = bodyText + '本メールは自動送信されております。\\r\\n';\n\n const json = {\n \"from\": from,\n \"to\": to,\n \"subject\": subject,\n \"bodyText\": bodyText\n }\n\n return await axios.post(EMAIL_URL + '/sendtext', json);\n };\n\n SendHtml = async (to, name, account_name) => {\n const from = SENDER_ADDRESS;\n const subject = `【${SERVICE_NAME}】簡単査定のご案内`;\n const serviceName = SERVICE_NAME;\n const phone = '0287-47-5544';\n const mail = 'w.yagisawa.complete@gmail.com';\n const url = 'https://g-complete.co.jp/';\n const link = `https://${DOMAIN_NAME}/user/${account_name}`;\n const bodyText = '';\n const bodyHtml = `\n\n\n\n \n \n \n \n {error} \n \n
\n )}\n | \n \n \n \n \n \n \n \n \n \n \n \n \n \n ![\"Your](\"https://systemdesignworks.co.jp/assets/imgs/develop/sample.jpg\"\n "\\"Your") \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n | \n
\n {formList[label]}\n
\n \n {generalInfo[label]}\n
\n \n \n
\n )\n } else {\n return (\n \n Loading .....\n
\n \n { }}\n allowEditing={false}\n />\n \n onSubmit()} isEnabled={!isSending} />\n \n
\n );\n }\n};\n\nconst listContainer = {\n width: '94vw',\n listStyle: 'none',\n padding: 0,\n marginLeft: '3vw',\n};\nconst labelContainer = { fontSize: 10, width: '100%', };\nconst filledFormContainer = { fontSize: 14, width: '100%', borderBottom: '1px solid #EDEDED', padding: 2 };\n\nexport default Confirm;","import React, { useCallback } from 'react';\nimport { useHistory, useLocation, useParams } from 'react-router-dom';\nimport Title from '../../Components/Title';\n//components\nimport SubmitButton from '../../Components/SubmitButton';\nimport InputProgressBar from '../../Components/InputProgressBar';\n\nconst Submit = (props) => {\n const history = useHistory();\n const { state } = useLocation();\n const { contactNumber } = state;\n const { account_name } = useParams();\n\n const onClick = useCallback(() => {\n history.push({\n pathname: `/user/${account_name}`,\n });\n }, []);\n\n return (\n - {filledFormList(carFormList)}
- {filledFormList(profileFormList)}
\n
\n );\n};\n\nconst CompletionMessage = ({ contactNumber }) => {\n return (\n \n })
\n
\n \n \n
\n );\n};\n\nconst imageContainer = {\n width: '75%',\n maxWidth: 350,\n marginLeft: 'auto',\n marginRight: 'auto'\n}\n\nexport default Submit;","import React, { useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport { IoMdSettings } from 'react-icons/io';\nimport { HeaderStyle, HeaderTitle, HeaderIcons, SideBarContent, FooterStyle, FooterColumn, FooterItems, DropDownStyle, DropDownItemStyle } from './StyledComponents';\nimport AuthService from '../Services/AuthService';\nimport { DOMAIN_NAME, TextSize } from '../config';\nimport { Helmet } from 'react-helmet';\n\nexport const Header = () => {\n const user = AuthService.getCurrentUser();\n const account_name = user ? user.account_name : null;\n if (!account_name) {\n return (\n \n 送信が完了しました。\n
\n \n {`お問い合わせ番号は[${contactNumber}]です。`}\n
\n \n \n お客様には自動返信メールが送信されております。\n
\n \n 詳細につきましては弊社担当より直接ご連絡致します。\n
\n \n
\n \n スマホで査定\n
\n \n サテコン\n
\n \n \n \n {`${user.name} 様`}\n \n \n\n \n \n
\n setIsOpened(!isOpened)}>\n
\n {isOpened && \n {props.children}\n
\n \n {props.rightIcon}\n \n \n
\n )\n};\n\nexport const Footer = () => {\n const user = AuthService.getCurrentUser();\n const account_name = user ? user.account_name : null;\n if (!account_name) {\n return (\n \n {`Copyright © ${DOMAIN_NAME} All rights reserved.`}\n
\n \n LOGO\n
\n \n
\n \n \n \n
\n \n \n \n \n \n
\n \n
\n \n {/* \n */}\n
\n \n {`Copyright © ${DOMAIN_NAME} All rights reserved.`}\n
\n\n \n \n {error} \n )}\n \n \n
\n )\n};\n\nexport const container = {\n width: '100vw',\n height: '100vh',\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: Colors.background,\n};\n\nconst inputContainer = {\n fontSize: 14,\n padding: 10,\n width: 260,\n height: 30,\n backgroundColor: Colors.background,\n border: 'solid 1px #707070'\n};\n\nconst btnContainer = {\n width: 200,\n height: 40,\n padding: 3,\n fontSize: 14,\n backgroundColor: '#3EA5F7',\n border: '1px solid',\n margin: 'auto',\n color: 'white',\n};\n\nexport default LogIn;","import React from 'react';\nimport { Link } from 'react-router-dom';\n//components\nimport { Header } from '../../Components/AdminComponents';\nimport { LoginStyle } from '../../Components/StyledComponents';\n//services\nimport AuthService from '../../Services/AuthService';\n//config & styles\nimport { container } from './LogIn';\nimport { TextSize } from '../../config';\n\nconst LogOut = () => {\n AuthService.logout();\n\n return (\n \n
\n {error && (\n \n スマホで査定\n
\n \n サテコン\n
\n \n Admin Console\n
\n \n setAccountName(e.target.value)} style={{ ...inputContainer, marginBottom: 15 }} />\n
\n \n setPassword(e.target.value)} style={inputContainer} />\n
\n \n \n
\n \n \n \n
\n )\n};\n\nconst carListContainer = {\n width: '35vw',\n height: '60vh',\n backgroundColor: 'white',\n margin: 'auto',\n marginTop: '10vh',\n};\n\nexport default LogOut;","import React, { useCallback, useEffect, useState } from 'react';\nimport { FormLabel, FormGroup, FormControlLabel, Checkbox, Popover } from '@material-ui/core';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport SearchIcon from '@material-ui/icons/Search';\nimport { statuses } from '../config';\nimport { SearchInput, SearchContainerStyle, SearchBoxStyle } from \"./StyledComponents\";\nimport { ButtonStyle } from './Button';\n\nconst SearchBar = (props) => {\n const { setSearchingData, carData } = props;\n const [searchInput, setSerchInput] = useState('');\n const [checkedValues, setCheckedValues] = useState([]);\n const [statusOptions, setStatusOptions] = useState([]);\n const [anchorEl, setAnchorEl] = useState(null);\n const { height, width } = useWindowDimensions();\n\n\n useEffect(() => {\n statuses.forEach((item) => {\n checkedValues.push(item[0]);\n })\n createStatusOptions();\n }, []);\n\n\n useEffect(() => {\n const filteredData = queryData(searchInput, carData);\n setSearchingData(filteredData);\n }, [carData, searchInput]);\n\n const createStatusOptions = () => {\n const statusOptions = statuses.map(\n (item) => (\n \n Admin Console\n
\n \n
\n ログアウトしました
\n \n\n ログイン画面へ\n
\n \n \n \n \n \n \n \n \n \n \n )\n })\n }\n
\n );\n};\n\nconst StatusInfo = props => {\n const statusmap = new Map(statuses);\n const statusColor = new Map(StatusColor);\n\n\n const { data, label, item } = props;\n let value = data;\n if (item === 'create_date') {\n const time = value.split('T');\n const date = time[0];\n const hour = time[1].split(':', 2).join(':');\n value = date + ' ' + hour;\n }\n\n return (\n \n {\n data.img_name ?\n \n })
\n }\n
\n \n }\n \n
\n \n
\n \n {\n Object.keys(data).map((item, ind) =>\n dataLabel[item] && |
\n )\n }\n
\n \n
\n )\n}\n\nconst Row = props => {\n const { label, data, item, index } = props;\n return (\n {label}
\n {\n item === 'status' ?\n \n {statusmap.get(value)}\n
\n :\n {value}
\n }\n \n
\n )\n};\n\nconst TableColumn = () => {\n return (\n {label}
\n {item === 'mileage' ? data[item] + ' km' : data[item]}
\n \n \n \n 査定情報の詳細 \n
\n )\n}\nconst ColumnInfoStyle = styled.div`\n width: calc(100% - 120px);\n display: flex;\n flex-direction: row;\n @media screen and (max-width: 620px) {\n width: 100%\n }\n`\nconst ColumnDetailStyle = styled.div`\n width: 120px;\n display: flex;\n flex-direction: row;\n background-color: #B9B9B9;\n margin-right: 1px;\n padding-left: 10px;\n align-items: center;\n @media screen and (max-width: 620px) {\n display: none;\n }\n`\nexport default CarList;\n","import React, { useCallback } from 'react';\nimport { useParams } from 'react-router-dom';\nimport axios from 'axios';\nimport { useDropzone } from 'react-dropzone';\nimport Encoding from 'encoding-japanese';\nimport iconv from 'iconv-lite';\nimport csv from 'csvtojson';\nimport Ajv from 'ajv';\nimport FolderIcon from '@material-ui/icons/Folder';\nimport { DropZone, } from './StyledComponents';\nimport { ButtonStyle } from './Button';\nimport { INSERT_URL } from '../config';\nimport { phoneNumberNoneProblem, formatTel, Now } from '../Functions';\n\nconst FileImport = (props) => {\n const { isButton } = props;\n const { account_name } = useParams();\n\n const checkError = (item) => {\n const ajv = Ajv({ allErrors: true });\n\n const data = {\n maker: item.maker ? item.maker : undefined,\n carType: item.carType ? item.carType : undefined,\n age: item.age ? item.age : undefined,\n mileage: item.mileage ? item.mileage : undefined,\n name: item.name ? item.name : undefined,\n phone: item.phone ? item.phone : undefined,\n address: item.address ? item.address : undefined,\n mail: item.mail,\n }\n\n const schema = {\n required: ['maker', 'carType', 'age', 'mileage', 'name', 'phone', 'address', 'mail'],\n type: 'object',\n properties: {\n mail: {\n type: 'string',\n format: 'email',\n },\n },\n };\n\n const validate = ajv.compile(schema);\n const valid = validate(data);\n if (!valid) {\n return false;\n }\n\n if (!phoneNumberNoneProblem(item.phone)) {\n return false;\n }\n\n const formatedPhoneNumber = formatTel(item.phone);\n const isHaihun = RegExp('-');\n\n if (!isHaihun.test(formatedPhoneNumber)) {\n return false;\n }\n\n return true;\n }\n\n const onDrop = useCallback(async (acceptedFiles) => {\n acceptedFiles.forEach(file => {\n const reader = new FileReader();\n\n reader.onabort = () => console.log('file reading was aborted');\n reader.onerror = () => console.log('file reading has failed');\n reader.onload = async () => {\n let importCount = 0;\n const importData = [];\n const buf = reader.result;\n const encoding = Encoding.detect(buf);\n const csvStr = Encoding.convert(buf, {\n to: 'unicode',\n from: encoding,\n type: 'string',\n })\n await csv({ noheader: false, output: \"csv\" }).fromString(csvStr)\n .then((csvRow) => {\n return csvRow;\n })\n .then((result) => {\n result.forEach(item =>\n importData.push({\n name: item['0'], phone: item['1'], mail: item['2'], address: item['3'], maker: item['4'], carType: item['5'], age: item['6'], mileage: item['7']\n })\n );\n })\n .catch((error) => {\n console.log(error);\n });\n\n for (const item of importData) {\n if (!checkError(item)) continue;\n\n await axios.post(INSERT_URL + \"/user_info\",\n {\n name: item.name,\n phone: formatTel(item.phone),\n address: item.address,\n mail: item.mail\n })\n .then(result => {\n console.log(result);\n const date = Now();\n return axios.post(INSERT_URL + \"/car_info\",\n {\n maker: item.maker,\n car_type: item.carType,\n age: item.age,\n mileage: item.mileage,\n user_id: result.data.insertId,\n account_name: account_name,\n status: 0,\n create_date: date,\n update_date: date,\n register_date: null\n });\n })\n .then(result => {\n console.log(result);\n importCount++;\n })\n .catch(error => {\n console.log('error', error);\n });\n }\n\n alert(`${importCount}件のデータを取り込みました`);\n\n if (importCount > 0)\n window.location.reload();\n };\n\n reader.readAsBinaryString(file);\n });\n }, []);\n\n const {\n getRootProps,\n getInputProps,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({ accept: 'text/csv', onDrop, maxFiles: 1 });\n\n if (isButton) {\n return (\n 写真
\n 依頼情報
\n \n \n \n \n
\n )\n } else {\n return (\n \n
\n }\n ここにファイルをドラッグ&ドロップ、または、クリックしてファイルを選択
\n\n 査定依頼一覧\n
\n \n \n \n \n \n
\n )\n }\n}\n\nconst ButtonContainer = styled.div`\n width: 100%;\n text-align: end;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n @media screen and (max-width: 620px) {\n justify-content: center;\n }\n\n`\nconst cntentStyle = { display: 'flex', flexDirection: 'row', width: '90%', justifyContent: 'flex-start', alignItems: 'baseline', marginBottom: 5 };\nconst labelStyle = { fontSize: 10, color: '#9A9A9A', width: 88, };\nconst inputContainer = { fontSize: 12, width: 180, height: 25 };","import React from 'react';\nimport Modal from 'react-modal';\nimport Button from '../../../Components/Button';\n\nModal.setAppElement(\"#root\");\n\nconst modalStyle = {\n overlay: {\n backgroundColor: 'rgba(0, 0, 0, .7)',\n zIndex: 1000,\n },\n content: {\n maxWidth: '500px',\n height: '150px',\n top: '50%',\n marginTop: '-100px',\n marginLeft: 'auto',\n marginRight: 'auto',\n textAlign: 'center'\n },\n};\n\nexport const EmailModal = (props) => {\n const { emailModalState, sendEmail, setEmailModalState } = props;\n\n return (\n \n {\n isEditing ?\n
\n {error !== '' ?\n \n \n
\n :\n \n }\n \n\n \n \n onChangeMaker(value)} className={'edit-info-selection'} />\n
\n \n \n onChangeCarType(value)} className={'edit-info-selection'} />\n
\n \n \n onChangeAge(value)} className={'edit-info-selection'} />\n
\n \n \n onChangeMileage(value)} className={'edit-info-selection'} />\n
\n \n\n \n \n setName(e.target.value)} style={inputContainer} />\n
\n \n \n setPhone(e.target.value)} style={inputContainer} />\n
\n \n \n setMail(e.target.value)} style={inputContainer} />\n
\n \n \n setAddress(e.target.value)} style={inputContainer} />\n
\n \n {error}\n
\n :\n \n }\n メールを送信してもよろしいですか？
\n \n
\n \n \n \n
\n 本当に削除してもよろしいですか？
\n \n
\n \n \n \n
\n \n \n 
\n \n
\n \n {\n Object.keys(imageDesc).map((item, index) => {\n return (\n
\n setSelectedIndex(index)}>\n 
\n {selectedIndex === index && }\n
\n )\n })\n }\n \n {descriptions.map((desc) => {\n return (\n
\n \n {desc}\n
\n )\n })}\n \n \n \n \n
\n {HTMLMailButton()} {/* if status !== 1, then appears */}\n \n \n \n \n \n \n {\n Object.keys(data).map((item, index) => {\n if (detailDataLabel[item]) {\n let label = data[item];\n if (item === 'status') {\n return;\n } else if (item === 'name') {\n return (\n \n \n )\n }\n return (\n \n \n )\n }\n })\n }\n
\n \n )\n}\n\nconst LabelInfoStyle = styled.div`\n height: auto;\n width: 100%;\n margin-bottom: 3px;\n padding: 5px;\n display: flex;\n flex-direction: row;\n`\n\n\nexport default CarDetail;","import React, { useEffect, useState, useCallback } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { Header, Footer } from '../../Components/AdminComponents';\nimport { Body, TitleContainer, Container, BodyElement } from '../../Components/StyledComponents';\nimport Button from '../../Components/Button';\nimport { Colors, TextSize } from '../../config';\n//service\nimport ImageService from \"../../Services/ImageService\";\nimport AuthService from '../../Services/AuthService';\n\nconst StoreInfo = () => {\n const [storeData, setStoreData] = useState({});\n const [logoURL, setLogoURL] = useState('');\n const [isLoading, setIsLoading] = useState(true);\n const history = useHistory();\n\n useEffect(() => {\n const user = AuthService.getCurrentUser();\n const storeLogo = user['logo_img'];\n if (storeLogo !== null) {\n const img = [{ img_name: storeLogo }];\n ImageService.getImageURL(img)\n .then((url) => {\n setLogoURL(url[0].img_name);\n })\n .catch((err) => {\n console.log(err);\n })\n }\n setStoreData({ ...user }, setIsLoading(false));\n }, []);\n\n const editStore = useCallback(() => {\n if (storeData.account_name !== undefined) {\n history.push({ pathname: `/admin/${storeData.account_name}/store_info/edit` });\n } else {\n history.push({ pathname: '/admin/login' });\n }\n }, [storeData]);\n\n if (isLoading) {\n return (\n \n {'依頼日時'}\n
\n \n {getDate(data['create_date'])}\n
\n \n {'ステータス'}\n
\n \n {statusmap.get(data['status'])}\n
\n \n {detailDataLabel[item]}\n
\n \n {label}\n
\n \n {detailDataLabel[item]}\n
\n \n {label}\n
\n \n
\n \n \n
\n \n
\n \n 店舗名\n
\n \n {storeData.name}\n
\n \n
\n \n 電話番号\n
\n \n {storeData.phone}\n
\n \n
\n \n 住所\n
\n \n {storeData.address}\n
\n \n
\n \n メールアドレス\n
\n \n {storeData.mail}\n
\n \n
\n \n 店舗ロゴ\n
\n \n 
\n
\n \n
\n \n \n setName(e.target)} style={inputContainer} value={storeData.name} />\n
\n \n \n setAddress(e.target)} style={inputContainer} value={storeData.address} />\n
\n \n \n setPhoneNumber(e.target)} style={inputContainer} value={storeData.phone} type='tel' />\n
\n \n \n setEmail(e.target)} style={inputContainer} value={storeData.mail} />\n
\n\n \n swapImage(e)}\n />\n \n
\n \n 店舗ロゴ\n
\n \n {error && error}\n
\n \n \n \n
\n \n
\n \n \n
\n \n setAccountName(e)} textType={'username'} />\n setPassword(e)} textType={'password'} />\n
\n \n \n \n \n
\n \n
\n \n \n
\n \n setCurrentPassword(e)} textType={'password'} />\n setNewPassword(e)} textType={'password'} />\n setConfirmedNewPassword(e)} textType={'password'} />\n
\n \n \n \n \n
\n \n
\n \n {\n isPassword ?\n
\n \n
\n \n \n
\n \n setModalState(false)} />\n setModalState(true)} />\n
\n \n {content}\n
\n \n \n
\n \n 査定依頼車追加フォーム\n
\n \n {\n Object.keys(data).map((item, index) => {\n if (detailDataLabel[item]) {\n let label = data[item];\n if (item === 'status') {\n label = statusmap.get(data[item]);\n }\n return (\n
\n \n
\n )\n }\n })\n }\n \n {detailDataLabel[item]}\n
\n \n {label}\n
\n \n \n \n \n
\n\n \n )\n}\n\nconst CarInfoContainer = styled.div`\n width: 60%;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 0 50px 50px 30px;\n margin-left: auto;\n margin-right: auto;\n margin-top: 10px;\n background-color: ${Colors.bodyBackgroundColor};\n @media screen and (max-width: 620px) {\n width: 90%;\n padding: 0px 10px 50px 10px;\n }\n`\n\nexport default CarRegistration;","import React, { Component } from 'react';\nimport { Route, Switch, Redirect } from 'react-router-dom';\nimport PrivateRoute from './PrivateRoute';\n//customer\nimport Top from './Screens/Customer/Top';\nimport Phone from './Screens/Customer/Phone';\nimport PINcode from './Screens/Customer/PINcode';\nimport Input from './Screens/Customer/Input';\nimport Photos from './Screens/Customer/Photos';\nimport Confirm from './Screens/Customer/Confirm';\nimport Submit from './Screens/Customer/Submit';\n//store\nimport LogIn from './Screens/Store/LogIn';\nimport LogOut from './Screens/Store/LogOut';\nimport Admin from './Screens/Store/Admin';\nimport CarDetail from './Screens/Store/CarDetail';\nimport StoreInfo from './Screens/Store/StoreInfo';\nimport EditStoreInfo from './Screens/Store/EditStoreInfo';\nimport Account from './Screens/Store/Account';\nimport CarRegistration from './Screens/Store/CarRegistration'\n\nimport NotFound from './Screens/NotFound';\n\n\nclass App extends Component {\n render() {\n return (\n \n \n \n \n \n
\n );\n }\n}\n\nconst container = {\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 0,\n height: '100%',\n overflow: 'scroll',\n}\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {BrowserRouter} from 'react-router-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n