@daoyi/nmtl-ui 2.0.1-beta.45 → 2.0.1-beta.47

package/lib/components/ContactModal-a59bc808.js

@@ -0,0 +1,924 @@
+import { _ as _extends, a as _slicedToArray, b as _objectSpread2, e as _defineProperty, f as _asyncToGenerator, g as _regeneratorRuntime } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { G as moment, J as JSZip, s as styleInject, H as GoogleLogin, I as FacebookLogin, K as default_1, L as default_1$1, M as Field, c as classNames, N as ErrorMessage, O as useFormik, P as FormikProvider } from './vendor-851c6356.js';
+import axios from 'axios';
+import { M as Modal } from './Modal-a7591b98.js';
+import { Input, Button, IconButton, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
+import { S as Select } from './Select-98a8e973.js';
+import { getIntl } from './globalConfig';
+
+// const sendMail = {
+// 	from: "orient.cc.noreply@gmail.com",
+// 	to: email,
+// 	subject: `ATC_${card_id}`+" card status has been changed (Orient-CC)",
+// 	text: context,
+// };
+//
+// apiUrl: "https://api.daoyidh.com/mail"
+const sendEmail = function (sendMail, apiUrl, onSuccess) {
+  let timeout = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5000;
+  // timeout
+  axios.defaults.timeout = timeout;
+  try {
+    // axios api
+    return axios.post(apiUrl, {
+      sendMail
+    }).then(res => onSuccess({
+      state: res && res.status === 200
+    })).catch(err => {
+      console.error('api:axios:catch:error: ', err.message);
+      return {
+        state: false,
+        error: err.message
+      };
+    });
+  } catch (err) {
+    console.error('api:axios:try:catch:error: ', err.message);
+    return {
+      state: false,
+      error: err.message
+    };
+  }
+};
+
+const EMAIL_TYPE = {
+  PROVIDER: 'DATA_PROVIDER',
+  PROBLEM: 'PROBLEM'
+};
+const contactTemplate = _ref => {
+  let {
+    formatMessage,
+    formType
+  } = _ref;
+  const headerColumn = [
+  // 主旨
+  {
+    name: 'subject',
+    type: 'radio',
+    label: formatMessage({
+      id: 'common.form.subject'
+    }),
+    options: [{
+      label: formatMessage({
+        id: 'common.has.problem'
+      }),
+      value: EMAIL_TYPE.PROBLEM,
+      desc: formatMessage({
+        id: 'common.has.problem.hint'
+      })
+    }, {
+      label: formatMessage({
+        id: 'common.form.dataProvide'
+      }),
+      value: EMAIL_TYPE.PROVIDER,
+      desc: formatMessage({
+        id: 'common.form.dataProvide.hint'
+      })
+    }],
+    required: true,
+    initialValue: formType
+  },
+  // 姓名
+  {
+    name: 'name',
+    type: 'input',
+    label: formatMessage({
+      id: 'common.form.name'
+    }),
+    required: true
+  },
+  // 電話
+  {
+    name: 'phone',
+    type: 'input',
+    label: formatMessage({
+      id: 'common.form.phone'
+    })
+  },
+  // e-mail
+  {
+    name: 'email',
+    type: 'email',
+    label: 'e-mail',
+    required: true
+  },
+  // 年齡
+  {
+    name: 'age',
+    type: 'select',
+    label: formatMessage({
+      id: 'common.form.age'
+    }),
+    options: ['0-9', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '80-89', '90-99']
+  },
+  // 職業
+  {
+    name: 'job',
+    type: 'input',
+    label: formatMessage({
+      id: 'common.form.job'
+    })
+  }];
+
+  // 資料提供
+  const dataProvider = [
+  // 資料名稱
+  {
+    name: 'dataName',
+    type: 'input',
+    label: formatMessage({
+      id: 'common.form.dataname'
+    }),
+    placeholder: formatMessage({
+      id: 'common.form.dataname.placeholder'
+    })
+  },
+  // 作者
+  {
+    name: 'author',
+    type: 'input',
+    label: formatMessage({
+      id: 'common.form.author'
+    })
+  },
+  // 日期
+  {
+    name: 'date',
+    type: 'datePicker',
+    label: formatMessage({
+      id: 'common.form.datadate'
+    }),
+    initialValue: moment().format('yyyy-MM-DD')
+  },
+  // 提供者名稱
+  {
+    name: 'offer',
+    type: 'input',
+    label: formatMessage({
+      id: 'common.form.providername'
+    }),
+    placeholder: formatMessage({
+      id: 'common.form.provider.notice'
+    })
+  }];
+  const footerColumn = [
+  // 附件上傳
+  {
+    name: 'files',
+    type: 'upload',
+    label: formatMessage({
+      id: 'common.form.attachment'
+    }),
+    hint: formatMessage({
+      id: 'common.form.attachment.hint'
+    })
+  },
+  // 內容
+  {
+    name: 'message',
+    type: 'textarea',
+    label: formatMessage({
+      id: 'common.content'
+    })
+  },
+  // 驗證碼
+  {
+    name: 'vcode',
+    type: 'vcode',
+    label: formatMessage({
+      id: 'common.form.code'
+    }),
+    initialValue: false,
+    required: true
+  }];
+  return headerColumn.concat(formType === EMAIL_TYPE.PROVIDER ? dataProvider : []).concat(footerColumn);
+};
+const zipFiles = files => new Promise((resolve, reject) => {
+  const zip = new JSZip();
+  for (let i = 0; i < files.length; i += 1) {
+    const file = files[i];
+    zip.file(file.name, file);
+  }
+  zip.generateAsync({
+    type: 'base64'
+  }).then(resolve).catch(reject);
+});
+
+// eslint-disable-next-line no-nested-ternary
+const convert = v => String.fromCharCode(v > 57 && v < 84 ? v + 7 : v < 57 ? v : v + 13);
+const getRandom = (max, min, num) => {
+  // eslint-disable-next-line no-bitwise
+  const asciiNum = ~~(Math.random() * (max - min + 1) + min);
+  if (!num) {
+    return asciiNum;
+  }
+  const arr = [];
+  for (let i = 0; i < num; i += 1) {
+    arr.push(getRandom(max, min));
+  }
+  return arr;
+};
+const canvas = () => {
+  const canvasImg = document.getElementById('bgi');
+  const ctx = canvasImg.getContext('2d');
+  ctx.strokeStyle = `rgb(${getRandom(100, 10, 3).toString()})`;
+  for (let i = 0; i < 7; i += 1) {
+    ctx.lineTo(getRandom(200, 0), getRandom(200, 10));
+    ctx.moveTo(getRandom(200, 0), getRandom(200, 0));
+    ctx.stroke();
+  }
+};
+const getConfig = () => ({
+  data: getRandom(109, 48, 4),
+  rotate: getRandom(75, -75, 4),
+  fz: getRandom(24, 30, 4),
+  color: [getRandom(100, 255, 3), getRandom(100, 255, 4), getRandom(100, 255, 3), getRandom(100, 255, 3)]
+});
+
+var css_248z$2 = ".vcode {\n  display: block;\n  align-items: center; }\n  .vcode__image {\n    margin-top: 10px;\n    background: rgba(0, 0, 0, 0.8);\n    width: 160px;\n    overflow: hidden;\n    height: 50px;\n    text-align: center;\n    position: relative; }\n    .vcode__image:hover .vcode__mask {\n      opacity: 0.8; }\n    .vcode__image__mask {\n      position: absolute;\n      width: 100%;\n      top: 0;\n      line-height: 50px;\n      background-color: rgba(0, 0, 0, 0.95);\n      opacity: 0;\n      z-index: 1;\n      transition: opacity 0.3s ease-in-out;\n      cursor: pointer; }\n    .vcode__image__itemStr {\n      float: left;\n      margin-left: 20px; }\n\n#bgi {\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%; }\n";
+styleInject(css_248z$2);
+
+const VCode = _ref => {
+  let {
+    visible,
+    placeholder,
+    onChange,
+    formatMessage
+  } = _ref;
+  const [codeConfig, setCodeConfig] = useState(getConfig());
+  const {
+    data,
+    rotate,
+    fz,
+    color
+  } = codeConfig;
+  const refresh = () => {
+    canvas();
+    setCodeConfig(getConfig());
+  };
+  useEffect(() => {
+    refresh();
+  }, [visible]);
+  const vcodeNumber = `${convert(data[0])}${convert(data[1])}${convert(data[2])}${convert(data[3])}`;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "vcode"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    placeholder: placeholder,
+    onChange: e => onChange(e.target.value === vcodeNumber)
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "vcode__image"
+  }, /*#__PURE__*/React__default.createElement("canvas", {
+    id: "bgi",
+    width: "200",
+    height: "200"
+  }), data.map((v, i) => /*#__PURE__*/React__default.createElement("div", {
+    key: i.toString(),
+    className: "vcode__image__itemStr",
+    style: {
+      transform: `rotate(${rotate[i]}deg)`,
+      fontSize: `${fz[i]}px`,
+      color: `rgb(${color[i].toString()})`
+    }
+  }, convert(v))), /*#__PURE__*/React__default.createElement("div", {
+    className: "vcode__image__mask",
+    onClick: refresh
+  }, formatMessage({
+    id: 'common.click.refresh'
+  }))));
+};
+VCode.defaultProps = {
+  visible: false,
+  placeholder: undefined,
+  onChange: () => {},
+  formatMessage: () => {}
+};
+VCode.propTypes = {
+  visible: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  formatMessage: PropTypes.func
+};
+
+var css_248z$1 = ".emailInput__loginSDK {\n  display: flex;\n  align-items: center; }\n  .emailInput__loginSDK__google {\n    padding: 6px 10px 4px !important;\n    border: 1px solid black !important; }\n    .emailInput__loginSDK__google div {\n      padding: 0 !important; }\n    .emailInput__loginSDK__google span {\n      padding: 0 !important; }\n  .emailInput__loginSDK__fb {\n    padding: 9px 10px !important;\n    border-radius: 3px;\n    margin-left: 10px;\n    background-color: #4c69ba;\n    border: 1px solid black;\n    color: white; }\n    .emailInput__loginSDK__fb i {\n      margin-right: 10px; }\n\n.emailInput__operator {\n  margin-top: 10px; }\n";
+styleInject(css_248z$1);
+
+const EmailInput = _ref => {
+  let {
+    value,
+    placeholder,
+    onChange,
+    onNotify
+  } = _ref;
+  const [init, setInit] = useState(false); // google login 在init時會先failed
+  useMemo(() => () => setTimeout(() => setInit(true), 1000), []); // 故延遲一秒後再給google call(最非最佳解 可優化)
+
+  const handleGoogleLogin = response => {
+    if (response && response.profileObj && response.profileObj.email) {
+      // setEmail(response.profileObj.email);
+      onChange(response.profileObj.email);
+    } else if (init) {
+      onNotify({
+        type: 'error',
+        message: 'common.action.failed'
+      });
+    }
+  };
+  const handleFBLogin = response => {
+    if (response && response.email) {
+      // setEmail(response.email);
+      onChange(response.email);
+    } else {
+      onNotify({
+        type: 'error',
+        message: 'common.action.failed'
+      });
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "emailInput"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "emailInput__loginSDK"
+  }, /*#__PURE__*/React__default.createElement(GoogleLogin, {
+    clientId: "593080210200-cfmvk6ikbfv0thudsidgi4n63stuqrrg.apps.googleusercontent.com",
+    buttonText: "Google",
+    onSuccess: handleGoogleLogin,
+    onFailure: handleGoogleLogin,
+    className: "emailInput__loginSDK__google",
+    cookiePolicy: "single_host_origin"
+  }), /*#__PURE__*/React__default.createElement(FacebookLogin, {
+    appId: "1391837967649911",
+    autoLoad: false,
+    fields: "name,email,picture",
+    callback: handleFBLogin,
+    icon: "fa-facebook",
+    cssClass: "emailInput__loginSDK__fb",
+    size: "small",
+    textButton: "Facebook"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "emailInput__operator"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    value: value,
+    placeholder: placeholder,
+    onChange: e => onChange(e.target.value)
+  })));
+};
+EmailInput.defaultProps = {
+  value: undefined,
+  placeholder: undefined,
+  onChange: () => {},
+  onNotify: () => {}
+};
+EmailInput.propTypes = {
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  onNotify: PropTypes.func
+};
+
+const Upload = _ref => {
+  let {
+    onChange
+  } = _ref;
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const handleFileInput = e => {
+    setSelectedFiles([...selectedFiles, ...e.target.files]);
+    onChange([...selectedFiles, ...e.target.files]);
+  };
+  const handleRemoveFile = index => {
+    const newFiles = [...selectedFiles];
+    newFiles.splice(index, 1);
+    setSelectedFiles(newFiles);
+    onChange(newFiles);
+  };
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outlined",
+    color: "primary"
+  }, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: "fileInput",
+    style: {
+      display: 'flex',
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React__default.createElement(default_1, null), "Upload Files", /*#__PURE__*/React__default.createElement("input", {
+    id: "fileInput",
+    type: "file",
+    multiple: true,
+    onChange: handleFileInput,
+    style: {
+      display: 'none'
+    }
+  }))), selectedFiles.length > 0 && /*#__PURE__*/React__default.createElement("div", null, selectedFiles.map((file, index) => /*#__PURE__*/React__default.createElement("div", {
+    key: index.toString()
+  }, /*#__PURE__*/React__default.createElement("span", null, file.name), /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "delete",
+    onClick: () => handleRemoveFile(index)
+  }, /*#__PURE__*/React__default.createElement(default_1$1, null))))));
+};
+Upload.propTypes = {
+  onChange: PropTypes.func.isRequired
+};
+
+var css_248z = ".formItem {\n  width: 100%;\n  margin-bottom: 16px; }\n  .formItem:last-child {\n    margin-bottom: initial; }\n  .formItem__title {\n    display: flex;\n    font-size: 16px;\n    font-weight: bold; }\n    .formItem__title__star {\n      margin-left: 3px;\n      color: #d93333; }\n  .formItem__operator {\n    margin: 2px 0;\n    font-size: 14px; }\n    .formItem__operator__radio__desc {\n      margin-left: 35px !important; }\n    .formItem__operator--unsupport {\n      border: 1px solid #d93333;\n      background: pink;\n      color: black;\n      padding: 5px 10px; }\n  .formItem__error {\n    color: #d93333;\n    font-weight: bold; }\n  .formItem textarea {\n    border: 1px solid #d9d9d9;\n    border-radius: 3px;\n    width: 100%;\n    background: transparent;\n    padding: 6px 10px; }\n  .formItem ::-webkit-calendar-picker-indicator {\n    filter: invert(1); }\n";
+styleInject(css_248z);
+
+const FormItem = _ref => {
+  let {
+    name,
+    type,
+    options,
+    label,
+    hint,
+    placeholder,
+    required,
+    setFieldValue,
+    formatMessage,
+    onNotify
+  } = _ref;
+  const currentPlaceholder = placeholder || `${formatMessage({
+    id: 'common.enter'
+  })} ${label}`;
+  const render = field => {
+    let component;
+    switch (type) {
+      case 'input':
+        component = /*#__PURE__*/React__default.createElement(Input, _extends({}, field, {
+          placeholder: currentPlaceholder
+        }));
+        break;
+      case 'textarea':
+        component = /*#__PURE__*/React__default.createElement(TextareaAutosize, _extends({}, field, {
+          minRows: 3,
+          placeholder: currentPlaceholder
+        }));
+        break;
+      case 'select':
+        component = /*#__PURE__*/React__default.createElement(Select, _extends({}, field, {
+          options: options,
+          placeholder: currentPlaceholder
+        }));
+        break;
+      case 'datePicker':
+        component = /*#__PURE__*/React__default.createElement(TextField, _extends({}, field, {
+          type: "date",
+          onChange: event => setFieldValue(field.name, event.target.value)
+        }));
+        break;
+      case 'email':
+        component = /*#__PURE__*/React__default.createElement(EmailInput, _extends({}, field, {
+          placeholder: currentPlaceholder,
+          onChange: email => setFieldValue(field.name, email),
+          onNotify: onNotify
+        }));
+        break;
+      case 'radio':
+        component = /*#__PURE__*/React__default.createElement(FormControl, {
+          component: "fieldset"
+        }, /*#__PURE__*/React__default.createElement(RadioGroup, field, options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FormControlLabel, {
+          key: option.value,
+          value: option.value,
+          control: /*#__PURE__*/React__default.createElement(Radio, null),
+          label: option.label
+        }), option && option.desc && /*#__PURE__*/React__default.createElement(Typography, {
+          variant: "caption",
+          className: "formItem__operator__radio__desc"
+        }, option.desc)))));
+        break;
+      case 'upload':
+        component = /*#__PURE__*/React__default.createElement(Upload, _extends({}, field, {
+          onChange: files => setFieldValue(field.name, files)
+        }));
+        break;
+      case 'vcode':
+        component = /*#__PURE__*/React__default.createElement(VCode, {
+          placeholder: currentPlaceholder,
+          onChange: pass => setFieldValue(field.name, pass),
+          formatMessage: formatMessage
+        });
+        break;
+      default:
+        component = null;
+    }
+    return component;
+  };
+  return /*#__PURE__*/React__default.createElement(Field, {
+    name: name,
+    render: _ref2 => {
+      let {
+        field
+      } = _ref2;
+      const component = render(field);
+      return /*#__PURE__*/React__default.createElement("div", {
+        id: `form-${name}`,
+        className: "formItem"
+      }, label && /*#__PURE__*/React__default.createElement("div", {
+        className: "formItem__title"
+      }, label, required && /*#__PURE__*/React__default.createElement("div", {
+        className: "formItem__title__star"
+      }, "*")), hint && /*#__PURE__*/React__default.createElement(Box, {
+        my: 1
+      }, /*#__PURE__*/React__default.createElement(Typography, {
+        variant: "body2"
+      }, hint)), /*#__PURE__*/React__default.createElement("div", {
+        className: classNames('formItem__operator', {
+          'formItem__operator--unsupport': !component
+        })
+      }, component || 'Check component type is support on FormItem'), /*#__PURE__*/React__default.createElement(ErrorMessage, {
+        className: "formItem__error",
+        name: name,
+        component: "div"
+      }));
+    }
+  });
+};
+FormItem.defaultProps = {
+  label: undefined,
+  placeholder: undefined,
+  hint: undefined,
+  options: [],
+  required: false,
+  setFieldValue: () => {},
+  formatMessage: () => {},
+  onNotify: () => {}
+};
+FormItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  hint: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.any),
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  setFieldValue: PropTypes.func,
+  formatMessage: PropTypes.func,
+  onNotify: PropTypes.func
+};
+
+/* 資料提供 - 郵件內容 */
+const dataProvideMail = _ref => {
+  let {
+    formatMessage,
+    values
+  } = _ref;
+  const body = [];
+  Object.keys(values).forEach(key => {
+    switch (key) {
+      case 'subject':
+        {
+          const title = formatMessage({
+            id: 'common.form.dataProvide'
+          });
+          if (values[key]) body.push(`${title}-${formatMessage({
+            id: 'header.title'
+          })}`);
+          break;
+        }
+      case 'name':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.name'
+        })}:${values[key]}`);
+        break;
+      case 'email':
+        if (values[key]) body.push(`e-mail:${values[key]}`);
+        break;
+      case 'phone':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.phone'
+        })}:${values[key]}`);
+        break;
+      case 'age':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.age'
+        })}:${values[key]}`);
+        break;
+      case 'job':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.job'
+        })}:${values[key]}`);
+        break;
+      case 'dataName':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.dataname'
+        })}:${values[key]}`);
+        break;
+      case 'author':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.author'
+        })}:${values[key]}`);
+        break;
+      case 'date':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.datadate'
+        })}:${values[key]}`);
+        break;
+      case 'offer':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.providername'
+        })}:${values[key]}`);
+        break;
+      case 'message':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.content'
+        })}:${values[key]}`);
+        break;
+    }
+  });
+  return body.join('<br />');
+};
+
+/* 我有問題 - 郵件內容 */
+const problemMail = _ref2 => {
+  let {
+    formatMessage,
+    values
+  } = _ref2;
+  const body = [];
+  Object.keys(values).forEach(key => {
+    switch (key) {
+      case 'subject':
+        {
+          const title = formatMessage({
+            id: 'common.has.problem'
+          });
+          if (values[key]) body.push(`${title}-${formatMessage({
+            id: 'header.title'
+          })}`);
+          break;
+        }
+      case 'name':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.name'
+        })}:${values[key]}`);
+        break;
+      case 'email':
+        if (values[key]) body.push(`e-mail:${values[key]}`);
+        break;
+      case 'phone':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.phone'
+        })}:${values[key]}`);
+        break;
+      case 'age':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.age'
+        })}:${values[key]}`);
+        break;
+      case 'job':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.form.job'
+        })}:${values[key]}`);
+        break;
+      case 'message':
+        if (values[key]) body.push(`${formatMessage({
+          id: 'common.content'
+        })}:${values[key]}`);
+        break;
+    }
+  });
+  return body.join('<br />');
+};
+
+var errorId;
+var ContactModal = function ContactModal(_ref) {
+  var type = _ref.type,
+    mailto = _ref.mailto,
+    open = _ref.open,
+    emailAPI = _ref.emailAPI,
+    setOpen = _ref.setOpen,
+    onNotify = _ref.onNotify;
+  var _getIntl = getIntl(),
+    formatMessage = _getIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    submitting = _useState2[0],
+    setSubmitting = _useState2[1];
+  var _useState3 = useState(type),
+    _useState4 = _slicedToArray(_useState3, 2),
+    formType = _useState4[0],
+    setFormType = _useState4[1];
+
+  /* 建立表單設定檔 */
+  var template = contactTemplate({
+    formatMessage: formatMessage,
+    formType: formType
+  });
+
+  /* 表單控制元件 */
+  var formik = useFormik({
+    initialValues: template.reduce(function (obj, item) {
+      return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, item.name, item.initialValue || ''));
+    }, {}),
+    validate: function validate(values) {
+      var errors = {};
+      /* 取出必填的欄位 並檢查該欄位是否有填寫 若無則顯示錯誤訊息(請輸入xxx) */
+      var necessaryList = template.filter(function (_ref2) {
+        var required = _ref2.required;
+        return required;
+      });
+      necessaryList.forEach(function (_ref3) {
+        var name = _ref3.name,
+          label = _ref3.label;
+        if (!values[name]) errors[name] = "".concat(formatMessage({
+          id: 'common.enter'
+        }), " ").concat(label);
+      });
+
+      /* 檢查是否符合 email格式 - 您輸入無效的email */
+      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+        errors.email = formatMessage({
+          id: 'common.form.valid.error.email'
+        });
+      }
+      /* 檢查是否正確 - 驗證碼錯誤 */
+      if (!values.vcode) errors.vcode = formatMessage({
+        id: 'common.form.code.error'
+      });
+      setFormType(values.subject);
+
+      /* 如果附件Size超過10MB - 檔案大小上限為10MB! */
+      if (Array.isArray(values.files)) {
+        var totalsize = values.files.reduce(function (total, file) {
+          return total + file.size;
+        }, 0);
+        if (totalsize > 10 * 1024 * 1024) errors.files = formatMessage({
+          id: 'common.form.attachment.valid.error'
+        });
+      }
+
+      /* 取得第一個錯誤的id */
+      errorId = Object.keys(errors).length > 0 ? Object.keys(errors).shift() : null;
+      return errors;
+    },
+    onSubmit: function () {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(values) {
+        var title, subject, body, zipFile;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              title = values.subject === EMAIL_TYPE.PROBLEM ? formatMessage({
+                id: 'common.has.problem'
+              }) : formatMessage({
+                id: 'common.form.dataProvide'
+              });
+              subject = "".concat(title, "-").concat(formatMessage({
+                id: 'header.title'
+              }), "-").concat(values.name);
+              body = formType === EMAIL_TYPE.PROBLEM ? problemMail({
+                formatMessage: formatMessage,
+                values: values
+              }) : dataProvideMail({
+                formatMessage: formatMessage,
+                values: values
+              });
+              setSubmitting(true);
+
+              // const fileName = values.files && values.files[0] && values.files[0].name;
+              if (!(values.files && values.files.length > 0)) {
+                _context.next = 11;
+                break;
+              }
+              _context.next = 7;
+              return zipFiles(values.files);
+            case 7:
+              zipFile = _context.sent;
+              sendEmail({
+                from: values.email,
+                to: mailto,
+                subject: subject,
+                html: body,
+                attachments: [{
+                  // stream as an attachment
+                  filename: 'zipFile.zip',
+                  content: zipFile
+                }]
+              }, emailAPI, function (_ref4) {
+                var state = _ref4.state;
+                if (state) {
+                  setSubmitting(false);
+                  formik.resetForm();
+                  setOpen(false);
+                  onNotify({
+                    message: 'common.action.success'
+                  });
+                } else {
+                  onNotify({
+                    type: 'error',
+                    message: 'common.action.error'
+                  });
+                }
+              });
+              _context.next = 12;
+              break;
+            case 11:
+              sendEmail({
+                from: values.email,
+                to: mailto,
+                subject: subject,
+                html: body
+              }, emailAPI, function (_ref5) {
+                var state = _ref5.state;
+                if (state) {
+                  setSubmitting(false);
+                  formik.resetForm();
+                  setOpen(false);
+                  onNotify({
+                    message: 'common.action.success'
+                  });
+                } else {
+                  onNotify({
+                    type: 'error',
+                    message: 'common.action.error'
+                  });
+                }
+              });
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
+      }
+      return onSubmit;
+    }()
+  });
+
+  /* 關閉表單 */
+  var handleClose = function handleClose() {
+    formik.resetForm();
+    setOpen(false);
+  };
+
+  /* 送出郵件 */
+  var handleSubmit = function handleSubmit() {
+    formik.handleSubmit();
+    /* 滾動過去錯誤的地方 */
+    var errorElement = document.getElementById("form-".concat(errorId));
+    if (errorElement) {
+      var offsetY = errorElement.offsetTop - 65;
+      if (errorElement.parentElement.scrollTo) {
+        errorElement.parentElement.scrollTo({
+          top: offsetY,
+          behavior: 'smooth'
+        });
+      } else {
+        errorElement.parentElement.scrollTop = offsetY;
+      }
+    }
+    if (errorId) onNotify({
+      type: 'error',
+      message: 'common.form.error'
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    fullWidth: true,
+    visible: open,
+    loading: submitting,
+    title: formatMessage({
+      id: 'common.form.contactUs'
+    }),
+    onCancel: handleClose,
+    onOk: handleSubmit,
+    cancelText: formatMessage({
+      id: 'common.cancel'
+    }),
+    okText: formatMessage({
+      id: 'common.submit'
+    })
+  }, /*#__PURE__*/React__default.createElement(FormikProvider, {
+    value: formik
+  }, template.map(function (schema) {
+    return /*#__PURE__*/React__default.createElement(FormItem, _extends({
+      key: schema.name
+    }, schema, {
+      setFieldValue: formik.setFieldValue,
+      formatMessage: formatMessage,
+      onNotify: onNotify
+    }));
+  })));
+};
+ContactModal.defaultProps = {
+  type: EMAIL_TYPE.PROBLEM,
+  mailto: 'twp@nmtl.gov.tw',
+  open: false,
+  emailAPI: 'https://api2.daoyidh.com/nmtl/mail',
+  setOpen: function setOpen() {},
+  onNotify: function onNotify() {}
+};
+ContactModal.propTypes = {
+  /** 我有問題的種類為(DATA_PROVIDER or PROBLEM) */
+  type: PropTypes.oneOf(['DATA_PROVIDER', 'PROBLEM']),
+  /** 傳送的email位置 */
+  mailto: PropTypes.string,
+  /** Modal是否開啟 */
+  open: PropTypes.bool,
+  /** 寄信用的api url */
+  emailAPI: PropTypes.string,
+  /** 設定Modal是否開啟 */
+  setOpen: PropTypes.func,
+  /** 錯誤或成功時的提示 */
+  onNotify: PropTypes.func
+};
+
+export { ContactModal as C };