# H44A Favorite Product

- Inquiry Product 類型的商機

###### tags: `biz`
> [name=RoyHuang]

------------------------------------------------------------------------
## API 清單

No | API | Desc | 執行順序 | 執行條件 | 參考
---|-----------------------------------------------------------------------------------------------|----------------------------|----------|---------------------------------------|--------------------
1 | [URI-H-02](https://hackmd.io/K2f0var-QLu6PP9T6Parqw?view#Prepare-biz-data) | Prepare biz data | 1 | page init | 無
2 | [URI-O-01](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-01-Prepare-appellation-data) | Prepare appellation data | 1 | page init | URI-054，需擴充
3 | [URI-O-02](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-02-Prepare-quantity-unit-data) | Prepare quantity unit data | 1 | page init | URI-054，需擴充
4 | [URI-O-03](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-03-Prepare-country-data) | Prepare country data | 1 | page init | URI-054，需擴充，欄位多加上國碼
5 | [URI-O-04](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-04-Prepare-state-data) | Prepare state data | None | when change coutnry list | URI-054
6 | [URI-O-05](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-05-Prepare-template-data) | Prepare template data | 1 | page init(offer to sell 不使用) | 無
7 | [URI-O-06](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-06-file-upload) | file upload | None | when submit and upload file have data | 無
8 | [URI-O-07](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-07-Prepare-password-rule-data) | Prepare password rule data | 1 | only 新會員，page init when no login | 無
9 | [URI-O-08](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-08-Check-password-rule) | Check password rule | None | only 新會員，when check | 無
10 | [URI-O-09](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-09-Check-email) | Check email | None | only 新會員，when check | URI-G-01
11 | [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data) | Prepare login data | None | when login | 無
12 | [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business) | add business | None | when submit | 無
13 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag | 1 | page init
14 | [URI-O-21](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-21-Get-file-data-by-id) | Get file data by id | None | when login |

------------------------------------------------------------------------
## 原頁面網址
- https://www.ttstaging.com.tw/contact/PRODUCT?contactType=PRODUCT&productIds[1895999]=42&productIds[1452595]=42&productIds[1896775]=42
- <div style="color:red">注意: SU 登入，Header 無 Favorite 功能</div>

- 相關程式
- front
- com.hyweb.tt.cms.front.rest.ContactSupplierResource.java
- adm
- com.hyweb.tt.cms.cm.webservice.BizEnhanceWebservice.java

## 原頁面 URL 解析
- https://www.ttstaging.com.tw/contact/PRODUCT?contactType=PRODUCT&productIds[{productId}]={languageId}
- 可接多組的 `&productIds[{productId}]={languageId}`

No | Parameter | Type | Desc
---|------------|--------|------------------------------
1 | productId | int | 型錄id
2 | languageId | string | 語系id(是以當初下 favorite 時，頁面語系為主)

------------------------------------------------------------------------
## 頁面解說
### 頁面區塊說明
以區塊方式說明使用到的 API

#### 登入
- Header Service
參考[`L01`](https://docs.google.com/spreadsheets/d/1FfU1adulMCzdWNQNjagsm5rHYhokRwhKfzY-Lurvw9Q/edit#gid=1382704913)

------------------------------------------------------------------------
- H-02-01

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

------------------------------------------------------------------------
- H-02-02

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-H-02](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg?view#Prepare-biz-data) | Prepare biz data
2 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

------------------------------------------------------------------------
- H-02-03

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-02](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-02-Prepare-quantity-unit-data) | Prepare quantity unit data
2 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

- H-02-04

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-05](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-05-Prepare-template-data) | Prepare template data
2 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

- H-02-05

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-21](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-21-Get-file-data-by-id) | Get file data by id
2 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

------------------------------------------------------------------------
- H-02-06

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-01](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-01-Prepare-appellation-data) | Prepare appellation data
2 | [URI-O-03](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-03-Prepare-country-data) | Prepare country data
3 | [URI-O-04](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-04-Prepare-state-data) | Prepare state data
4 | [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data) | Prepare login data
5 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

------------------------------------------------------------------------
- H-02-07

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data) | Prepare login data
2 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

- H-02-08

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

- H-02-09
無

- H-02-10

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business) | add business
2 | [URI-O-06](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-06-file-upload) | file upload
3 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag

------------------------------------------------------------------------
- 參考首頁 Footer

#### 註冊
登入與註冊差別在於 Contact Information 顯示不同，其餘區塊皆同

- H-02-11

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-O-01](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-01-Prepare-appellation-data) | Prepare appellation data
2 | [URI-O-03](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-03-Prepare-country-data) | Prepare country data
3 | [URI-O-04](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-04-Prepare-state-data) | Prepare state data
4 | [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data) | Prepare login data
5 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag
6 | [URI-O-07](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-07-Prepare-password-rule-data) | Prepare password rule data
7 | [URI-O-08](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-08-Check-password-rule) | Check password rule
8 | [URI-O-09](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-09-Check-email) | Check email

#### 未登入
- 與登入、註冊差別在於無 Contact Information

------------------------------------------------------------------------
### 頁面欄位說明
- 登入


- 註冊
- 以下只列出與登出差異部分


#### 藍1
Contact Supplier
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  contactsupplier

#### 藍2
Step 1 Fill in the form
- UI 邏輯: 下商機的頁面，文字需要 highlight
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  ez_step1 + fillintheform

#### 藍3
Step 2 Completion
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  ez_step2 + completion

#### 藍4
To
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  to

#### <div style="color:red">藍5、藍6、藍7、藍8</div>
- 是以公司群族來分，每個公司底下顯示各自的資訊
- 可以多組公司

#### 藍5
聯絡人大頭貼
- 圖片尺寸: 100 x 100，但UI 顯示又綁死 `width="26" height="32"`
- alt: Contact，寫死
- 資料來源
- API： [URI-H-02](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg?view#Prepare-biz-data)

  data.contactPictureUrl

#### 藍6
Mr. 測試看看 , TAIWAN EXTERNAL TRADE DEVELOPMENT COUNCIL
- UI 邏輯: 聯絡人稱呼 + 聯絡人名稱 + 英文逗號 + 公司名稱
- 資料來源
- API： [URI-H-02](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg?view#Prepare-biz-data)

  data.contactTitleName + data.contactName + ',' + data.companyName

#### 藍7
型錄圖片
- 圖片尺寸: 150 x 150
- alt: 型錄圖片說明
- 資料來源
- API： [URI-H-02](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg?view#Prepare-biz-data)

  -- 型錄圖片
  data.productImgUrl

  -- alt
  data.productImgDesc

#### 藍8
型錄名稱
- UI 邏輯: click 要連結至 product cp url
- 資料來源
- API： [URI-H-02](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg?view#Prepare-biz-data)

  -- 型錄名稱 
  -- CASE 1: if modelNumber 有值，才顯示
  data.productName + "(" + data.modelNumber + ")"  
  -- CASE 2:
  data.productName

  -- product cp url
  data.productCpUrl

#### 藍9
Quantity
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  ez_quantity + ":"

#### 藍10
Quantity - field
- UI 邏輯
- require: N
- HTML field: number
- 預設是 null。若有填寫，至少 1，至多 999999999
- 整數
- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: number(整數)

  quantity

#### 藍11
『-』
- UI 邏輯:
- click，Quantity 數量會減 1，至少為 1

#### 藍12
『+』
- UI 邏輯:
- click，Quantity 數量會加 1，至多為 999999999

#### 藍13
數量單位下拉列表
- UI 邏輯:
- require: N
- HTML field: select
- 預設是給第一個順位
- 資料來源
- API: [URI-O-02](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-02-Prepare-quantity-unit-data)

  -- Array(Object)
  label

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: number(整數)

  quantity

#### 藍14
Estimated Purchase Amount USD
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  estimatedannualpurchases + ":"

#### 藍15
USD
- UI 邏輯: 寫死

#### 藍16
Estimated Purchase Amount USD - field
- UI 邏輯:
- require: N
- HTML field: number
- 預設是 null。若有填寫，至少 0，至多 999999999
- 整數、浮點數
- 原規則小數點沒限制位數，全依照瀏覽器支援程度而定
- 補：`input type="number"` 並非每一家瀏覽器都有實作，無實作會造成無法再欄位中輸入的動作，只能點選上下按鈕增加數字。(Safari 不支援)
- 新增商機
- API： [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: number(整數、浮點數)

  purchaseAmount

#### 藍17
Message
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  message

#### 藍18
Insert a template
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  insertatemplate + ":"

#### 藍19
訊息範本
- UI 邏輯:
- click，會重游標所在新增此範本內容
- unclick，會移除掉最後一組此範本內容
- 資料來源
- API： [URI-O-05](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-05-Prepare-template-data)

  -- Array(Object)
  data

#### 藍20
Message - field
- UI 邏輯:
- require: Y
- HTML field: textarea
- 至多 1500 個字，超過不能填
- DB: CLOB
- 資料來源，預設值
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  businessmessagetextboxdefault

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  message

#### 藍21
計算 Message 字數，0/1500
- UI 邏輯:
- 0，是動態計算，以字數計算
- 1500，是最大字數，寫死
- 數字超過移除，不顯示

#### 藍22
上傳附件
- UI 邏輯:
- require: N
- HTML field: file
- 使用套件: dropzone.js
- 檔案數量: 0 ~ 3個
- 檔案格式: htm, html, doc, docx, pdf, txt, jpg, gif, png, odt, ods
- 檔案容量: 10 MB
- click
- 有 privew 檔案功能。若有圖檔要顯示圖
- 滑鼠移標到檔案時，要顯示檔案名稱
- 需要有移除檔案功能，右上角有個『x』可移除
- ~~只有在 submit 送出時，才會上傳檔案至系統~~
- 直接上傳，目前先放入暫存檔案
- 新增附件
- API: [URI-O-06](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-06-file-upload)
- require: N
- type: uploadFile

  message

- 登入後，取得附件資料
- API: [URI-O-21](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-21-Get-file-data-by-id)
- require: 看有檔案id，才處理
- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: string
- 商機附件id(至多3個，用逗號區隔)，Ex: `1,2,3`

  attachs

#### 藍23
Drop files here to upload
- UI 邏輯:
- dropzone.js 預設文字

#### 藍24
File formats
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  fileuploadlimit

#### 藍25
: htm, html, doc, docx, pdf, txt, jpg, gif, png, odt, ods. Max 3 files (10MB in total).
- 『: htm, html, doc, docx, pdf, txt, jpg, gif, png, odt, ods.』，寫死
- 『 (10MB in total).』
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

      maxfileslimit

#### 藍26
Total size
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  totalsizet

#### 藍27
計算檔案大小
- UI 邏輯:
- 預設 0
- 以 MB 為單位計算

#### 藍28
Contact Information
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  contactinformation

#### 藍29
View and Modify、Collapse
- UI 邏輯
- HTML field: button
- 只有登入時會顯示
- 預設是合
- 合，顯示 View and Modify
- Full Name 下面那行都隱藏
- 開，顯示 Collapse
- View and Modify
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

    多語：viewandmodify

- Collapse
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

    collapse

#### 藍30
Email
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  email

#### 藍31
登入者 email - field
- UI 邏輯:
- require: Y
- HTML field: text
- 登入時，屬性為 readonly
- 註冊時，需檢查是否已存在
- DB: VARCHAR2(100 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)

  data.userEmail

- 註冊時，需檢查是否已存在
- API: [URI-O-09](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-09-Check-email)
- 且需要驗證是否為合法的 email

  ok: code >= 0 
  error: code < 0

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  quantity

#### 藍32
Full Name
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  fullname

#### 藍33
登入者稱謂 - field
- UI 邏輯
- require: Y
- HTML field: select
- 下拉選單可選擇稱呼列表，如沒資料預設給下第一個順位
- 登入時，會顯示此使用者的稱謂
- 資料來源，下拉選單
- API： [URI-O-01](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-01-Prepare-appellation-data)

  -- Array(Object)
  label

- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: number
- 用登入者稱謂id 比對下拉選單，有則選擇，無則給預設下拉選單第一個順位

  data.userTitleCode

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  userTitleCode

#### 藍34
登入者名稱
- require: Y
- HTML field: text
- 登入時，會顯示此使用者名稱
- DB: VARCHAR2(160 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.userName

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  userName

#### 藍35
Company Name
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  companyname

#### 藍36
Company Name - field
- UI 邏輯
- require: Y
- HTML field: text
- 登入時，會顯示公司名稱
- 若公司名稱是『individual buyer』，則藍34需打勾，且欄位會 readonly
- DB: VARCHAR2(250 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.companyName

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  companyName

#### 藍37
『I'm an individual buyer』- field
- UI 邏輯
- require: Y
- HTML type: checkbox(單選)
- 預設是 unclick
- click，則此藍33 的值會改成『individual buyer』，且欄位會 readonly
- unclick，則此藍33 的值會清空，且移除 readonly

#### 藍38
I'm an individual buyer
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  individualbuyer

#### 藍39
Country/Region
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  countryregion

#### 藍40
Country/Region(公司所屬的國家) - field
- UI 邏輯
- require: Y
- HTML field: select
- 下拉選單可選擇國家列表，如沒資料預設給第一個順位
- 第一個選單是多語標籤 Select
- 若有異動下拉選單，
- (1) 連動 藍43 去撈取國家的州別清單資料
- (2) 將國碼寫入 藍49、藍53
- 登入會顯示此公司所屬的國家
- 移除 UI 邏輯
- 若是 註冊會員時，點選『台灣』
- 『submit』按鈕會 disabled，無法送出表單。只有非台灣的註冊會員可註冊並新增商機
- 下方會多出文字訊息
- For companies in Taiwan, please click here to register as member.
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

          registerintaiwan

- 請由此註冊成會員
- 寫死
- 點選會連結至 中文網註冊頁面(${中文網URL}/register/supplier)
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  ez_pleaseselect

- 資料來源，下拉選單
- API： [URI-O-03](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-03-Prepare-country-data)

  -- Array(Object)
  label

- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: number
- 用公司所屬的國家id 比對下拉選單，有則選擇，無則給預設下拉選單第一個順位

  data.officeNationCode

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  officeNationCode

#### 藍41
State/Province/City
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  stateprovincecity

#### <div style="color:red">藍42、藍44</div>
- 此二欄位是二擇一，必填

#### 藍42
State/Province/City(公司所屬的州別) - field
- UI 邏輯
- require: Y
- HTML field: select
- 下拉選單可選擇此國家的州別列表，如沒資料預設給第一個順位
- 第一個選單是多語標籤 Select
- 登入會顯示此公司所屬的州別
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  ez_pleaseselect

- 資料來源，下拉選單
- API： URI-054

  -- Array(Object)
  label

- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: number
- 用公司所屬的州別id 比對下拉選單，有則選擇，無則給預設下拉選單第一個順位

  data.officeStateCode

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  officeStateCode

#### 藍43
Other State/Province/City
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  otherstateprovincecity

#### 藍44
Other State/Province/City(其他州別) - field
- UI 邏輯
- require: Y
- HTML field: text
- DB: VARCHAR2(100 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.officeOtherState

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  officeOtherState

#### 藍45
Company Address
- API： [URI-O-03](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-03-Prepare-country-data)

  companyaddress

#### 藍46
Company Address(公司地址) - field
- UI 邏輯
- require: Y
- HTML field:`url`
- 登入時，會顯示公司地址
- DB: VARCHAR2(255 BYTE)
- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string
- `https://` 或 `http://` 開頭即可
- jquery validator 會實作驗證 url rule，[參考](https://www.runoob.com/jquery/jquery-plugin-validate.html)

  officeAddredd

#### 藍47
Company Site
- 多語：companysite

#### 藍48
Company Site(公司網址) - field
- UI 邏輯
- require: Y
- HTML field: `url`
- placeholder: `http://`
- 登入時，會顯示公司網址
- 若公司名稱是『Not Available』，則藍46需打勾，且欄位會 readonly
- DB: VARCHAR2(500 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.officeAddress

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string
- 需要驗證是否為合法的 url
- `https://` 或 `http://` 開頭即可
- jquery validator 會實作驗證 url rule，[參考](https://www.runoob.com/jquery/jquery-plugin-validate.html)

  officeAddredd

#### 藍49
『Not Available』- field
- UI 邏輯
- require: Y
- HTML field: checkbox(單選)
- 預設是 unclick
- click，則此藍45 的值會改成『Not Available』，且欄位會 readonly
- unclick，則此藍345 的值會清空，且移除 readonly

#### 藍50
Not Available
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  notavailable

#### 藍51
Business Phone Number
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  tel1

#### 藍52
Business Phone Number(公司電話 - 國碼) - field
- UI 邏輯
- require: N
- HTML field: text
- 登入時，會顯示公司電話 - 國碼
- 至多 3 碼
- DB: VARCHAR2(3 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.officeTelCountry

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: string
- 需驗證字串為 0-9 的數字

  officeTelCountryCode

#### 藍53
Business Phone Number(公司電話) - field
- UI 邏輯
- require: N
- HTML field: text
- 登入時，會顯示公司電話
- 至多 20 碼
- DB: VARCHAR2(20 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.officeTel

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: string
- 需驗證字串為 0-9 的數字

  officeTel

#### 藍54
Business Phone Number(公司電話 - 分機) - field
- UI 邏輯
- require: N
- HTML field: text
- 登入時，會顯示公司電話 - 分機
- 至多 10 碼
- DB: VARCHAR2(10 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.officeTelExt

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: string
- 需驗證字串為 0-9 的數字

  officeTelExt

#### 藍55
Mobile Phone Number
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  mobilephone

#### 藍56
Mobile Phone Number(聯絡人手機 - 國碼) - field
- UI 邏輯
- require: N
- HTML field: text
- 登入時，會顯示聯絡人手機 - 國碼
- 至多 3 碼
- DB: VARCHAR2(3 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.userMobileCountry

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: string
- 需驗證字串為 0-9 的數字

  mobileCountry

#### 藍57
Mobile Phone Number(聯絡人手機) - field
- UI 邏輯
- require: N
- HTML field: text
- 登入時，會顯示聯絡人手機
- DB: VARCHAR2(17 BYTE)
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: string

  data.userMobile

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: N
- type: string
- 需驗證字串為 0-9 的數字

  mobile

#### 藍58
Changes will be automatically saved to your profile.
- 只有登入時顯示
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  changeswillbeautomaticallysaved

#### 藍59
『Recommend other suppliers if this supplier doesn't reply.』- field
- UI 邏輯
- require: Y
- HTML type: checkbox(單選)
- 預設是 click
- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: boolean
- 若 checkbox 是 click，則為 true；反之，為 false

  recommendMatch

#### 藍60
Recommend other suppliers if this supplier doesn't reply.
- 資料來源
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  recommendmatchingsupplier

#### 藍61
『I'd like to show my email address to the suppliers I contact on Taiwantrade.com.』(TT聯繫的供應商，顯示我的email)- field
- UI 邏輯
- require: Y
- HTML type: checkbox(單選)
- 登入時，若使用者公司已勾選，則不顯示
- 資料來源，登入
- API: [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data)
- type: number
- 若 showBizEmailStatus == 1 則不顯示；反之，則顯示

  -- 1:開放、0:關閉、-1:未設定
  data.showBizEmailStatus

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: boolean
- 若 checkbox 是 click，則為 true；反之，為 false

  showBizEmail

#### 藍62
I'd like to show my email address to the suppliers I contact on Taiwantrade.com.
- 登入時，若使用者公司已勾選，則不顯示，參考 藍58 登入
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  idontlikeshowmyemail

#### 藍63
『I'd like to show my email address to the suppliers I contact on Taiwantrade.com.』的Tip
- click ，顯示燈箱，內容是多語
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  bytickingthisbox


#### 藍64
Keywords of products you are looking for
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  keywordsofproducts

#### 藍65
商機 keyword
- UI 邏輯
- require: N
- 1) HTML field: display data tag(by 設計師)
- placeholder: `new Keyword`
- ui 效果是設計師實作
- 可新增、移除
- 可設定 0 ~ n 組
- 2) HTML field: hidden
- 多組用逗號區隔
- DB: VARCHAR2(500 BYTE)，每一組為一筆record
- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string
- 多則用逗號區隔，EX: `car,house,water`

  keywords

#### 藍66
- This helps to more precisely match your inquiry with potential suppliers.Use "," or "enter" to separate multiple keywords.
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  thishelpstomorepreciselymatch + useorentertoseparatemultiplekeywords

#### 藍67
google recaptcha
- UI 邏輯
- require: Y
- 目前使用 V2
- 需驗證合法性
- google key 放在 front(server)

#### 藍68
Submit
- UI 邏輯
- HTML field: button
- 若未登入前，click 會顯示燈箱
- click 『Sign In』，會連結至 SSO 登入網站，登入後會導回此頁面
- click 『Create an account free』，會關閉燈箱，並顯示 Contact Information 區塊
- 登入後，可送出表單
- 表單驗證規則
- 必填欄位驗證
- google recaptcha 驗證
- 會先送出上傳檔案，回傳拿到上傳檔案id 後，才新增商機
- 商機新增成功後，會連結至商機成功頁面
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  ok

- 新增附件
- API: [URI-O-06](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-06-file-upload)
- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)

#### 藍101
Your email will be your Taiwantrade.com login.
- 只有註冊時顯示
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  suggestenterofficeemail

#### 藍102
Create Password
- 只有註冊時顯示
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  createapassword

#### 藍103
Password - field
- 只有註冊時顯示
- UI 邏輯
- require: Y
- HTML field: password
- 需檢查是否為合法的密碼
- DB: VARCHAR2(64 BYTE)
- 驗證密碼規則
- API: [URI-O-08](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-08-Check-password-rule)

  ok: code >= 0 
  error: code < 0

- 新增商機
- API: [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business)
- require: Y
- type: string

  userPassword

#### 藍104
密碼規則提示文字
- 只有註冊時顯示
- 資料來源，密碼規則
- API: [URI-O-07](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-07-Prepare-password-rule-data)
- type: string

#### 藍105
Confirm Password
- 只有註冊時顯示
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  confirmpassword

#### 藍106
Confirm Password - field
- 只有註冊時顯示
- UI 邏輯:
- require: Y
- HTML field: password
- 需檢查字串與 藍103 相同

#### 藍107
『I accept the Taiwantrade.com Membership Agreement, Terms of Use and Privacy Policy』(是否同意 TT Policy) - field
- 只有註冊時顯示
- UI 邏輯:
- require: Y
- HTML field: checkbox(單選)
- 預設 unclick
- 必須勾選才合法

#### 藍108
I accept the Taiwantrade.com Membership Agreement, Terms of Use and Privacy Policy
- 只有註冊時顯示

- 『I accept the』
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  iacceptthe

- 『Taiwantrade.com Membership Agreement』
- click，需連結至 https://www.taiwantrade.com/mp/help#2
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  taiwantradecommembershipagreement

- 『,』
- 寫死逗號
- 『TTerms of Use』
- click，需連結至 https://www.taiwantrade.com/mp/help#3
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  termsofuse

- 『and』
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  and

- 『Privacy Policy』
- click，需連結至 https://www.taiwantrade.com/mp/help#4
- 資料來源，多語標籤
- API： [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag)

  privacypolicy

------------------------------------------------------------------------
### 頁面邏輯說明
- 同 [Inquiry Product](https://hackmd.io/FDa_t2QwRxKoBimH6mW4qQ?view#%E9%A0%81%E9%9D%A2%E9%82%8F%E8%BC%AF%E8%AA%AA%E6%98%8E)

------------------------------------------------------------------------
### 頁面輸出

- 登入

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-H-02](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg?view#Prepare-biz-data) | Prepare biz data
2 | [URI-O-01](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-01-Prepare-appellation-data) | Prepare appellation data
3 | [URI-O-02](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-02-Prepare-quantity-unit-data) | Prepare quantity unit data
4 | [URI-O-03](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-03-Prepare-country-data) | Prepare country data
5 | [URI-O-05](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-05-Prepare-template-data) | Prepare template data
6 | [URI-O-10](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-10-Prepare-login-data) | Prepare login data
7 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag
8 | [URI-O-21](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-21-Get-file-data-by-id) | Get file data by id

------------------------------------------------------------------------
- 註冊

No | API | Desc
---|-----------------------------------------------------------------------------------------------|---------------------------
1 | [URI-H-02](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg?view#Prepare-biz-data) | Prepare biz data
2 | [URI-O-01](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-01-Prepare-appellation-data) | Prepare appellation data
3 | [URI-O-02](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-02-Prepare-quantity-unit-data) | Prepare quantity unit data
4 | [URI-O-03](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-03-Prepare-country-data) | Prepare country data
5 | [URI-O-05](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-05-Prepare-template-data) | Prepare template data
6 | [URI-O-07](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-07-Prepare-password-rule-data) | Prepare password rule data
7 | [URI-O-17](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-17-Prepare-language-label-tag) | Prepare language label tag
8 | [URI-O-21](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-21-Get-file-data-by-id) | Get file data by id

------------------------------------------------------------------------
- 州別列表

No | API | Desc
---|---------------------------------------------------------------------------------------|-------------------
1 | [URI-O-04](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-04-Prepare-state-data) | Prepare state data

------------------------------------------------------------------------
- email驗證

No | API | Desc
---|--------------------------------------------------------------------------------|------------
1 | [URI-O-09](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-09-Check-email) | Check email

------------------------------------------------------------------------
- 密碼驗證

No | API | Desc
---|----------------------------------------------------------------------------------------|--------------------
1 | [URI-O-08](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-08-Check-password-rule) | Check password rule

------------------------------------------------------------------------
- file upload

No | API | Desc
---|--------------------------------------------------------------------------------|------------
1 | [URI-O-06](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-06-file-upload) | file upload

------------------------------------------------------------------------
- add business

No | API | Desc
---|---------------------------------------------------------------------------------|-------------
1 | [URI-O-11](https://hackmd.io/cCmvIP36SCyTsLbZCPrbhg?view#URI-O-11-add-business) | add business