# G-23 買主註冊頁

> [name=Tony Fan]
###### tags: `G系統功能頁` `頁面分析`

## API 清單

No | API | Desc | 執行順序 | 執行條件 | 參考
---|---------|----------------------------|----------|---------------------------------------|------
1 | [URI-A-02](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) | prepare 多語標籤 | 1 | page init | [附註-多語標籤](#多語標籤)
2 | [URI054](https://hackmd.io/Nftm3f0tS6661WC-n-9n0Q) | Prepare code | 1 | page init | URI-054
3 | [URI-G-01](https://hackmd.io/V7jRCMByS52JWAOpEZ72Vg) | Check email | None | on form validate | 無
4 | [URI-G-02](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA) | 會員買主註冊 | None | on form submit | 無
5 | [URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ) | SEO資料 | 1 | page init | [附註-SEO資料](#SEO資料)
6 | [URI-G-07](https://hackmd.io/K7K56lvhSxCNvH1Je7hEfQ) | Check Password Rule | None | on form validate | 無

## 原頁面網址
- https://www.taiwantrade.com/register/buyer
- 獨立頁面


## 原頁面 URL 解析
* `${domain}/register/buyer`
* domain: 網域

## 頁面解說圖

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



* G-23-01
* 共用區塊: Header Service元件, 參考[`A-01 Header元件分析`](https://hackmd.io/aA5DMa_GTQqoolRC2B8ohw)
* G-23-02
* HOME : 固定該網域 DID，連結為 https://{domain}
* [多語標籤](#多語標籤): backtohomepage
* Register : 固定標籤
* [多語標籤](#多語標籤): register
* G-23-03
* 標題：
* [多語標籤](#多語標籤): registerfortaiwantrade
* G-23-04
* 邏輯: Step1文字需要 highlight效果
* Step 1 Fill in the form
* [多語標籤](#多語標籤): ```ez_step1 + fillintheform```
* Step 2 Completion
* [多語標籤](#多語標籤): ```ez_step2 + completion```
* G-23-05
* 台灣廠商請由此註冊為會員
* 寫死文字
* 連結為 https://info.taiwantrade.com/register/supplier
* 標題：Benefits of Registration
* [多語標籤](#多語標籤): benefitsofregistration
* 項目標題：As a member, you can:
* [多語標籤](#多語標籤): asamemberyoucan
* 項目一：
* [多語標籤](#多語標籤): trackyourfavorites
* 項目二：
* [多語標籤](#多語標籤): ``takefulladvantage + customizedSourcingServices + asamemberyoucan ``
* `customizedSourcingServices`：
* 連結為：https://{domain}/mp/customized-sourcing
* 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
* 項目三：
* [多語標籤](#多語標籤): manageyourmessageswithsuppliers

<div id="B_G-23-06"></div>

* G-23-06
* 註冊表單
* 各個項目對應參考：[頁面欄位說明 G-23-06](#G-23-06)
* Submit後，
* validate error：跳出 [G-23-07](#B_G-23-07) 的視窗
* validate success：送出 [會員買主註冊 API](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA)，
* 送出成功：則導入頁面 [G-24 買主註冊成功頁](https://hackmd.io/CnNNKZR_RQaoRxKJAWye3Q)
* 送出失敗：跳出失敗訊息
* `Somthing ERROR when register to TT, ` + [可辨識的失敗訊息]

<div id="B_G-23-07"></div>

* G-23-07
* [G-23-06](#B_G-23-06) 有validate錯誤則顯示此視窗並
* Please fill in all required fields.
* 寫死文字
* 內容
* 邏輯：提示validate error的欄位
* OK
* 寫死文字

### 頁面欄位說明
區塊中使用到的欄位對應

#### G-23-06
註冊表單，送出 [會員買主註冊 API](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA)，欄位與對應參數(API欄位)如下

1. Email：
- [多語標籤](#多語標籤): email
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`email`
- Validate：
- 必填：是
- 錯誤訊息：Required
- 透過 [會員帳號檢查 API](https://hackmd.io/V7jRCMByS52JWAOpEZ72Vg) 即時檢查Email是否已被使用。
- 通過：[會員帳號檢查 API] 回傳0: 代表 email可用
- 錯誤訊息：This email address is already in use.
2. Your email will be your Taiwantrade.com login.
- [多語標籤](#多語標籤): suggestenterofficeemail
3. Create Password：
- [多語標籤](#多語標籤): createapassword
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`password`
- Validate：
- 必填：是
- 錯誤訊息：Required
- 透過 [URI-G-07](https://hackmd.io/K7K56lvhSxCNvH1Je7hEfQ) 即時檢查Password是否符合密碼規則。
- 通過：[URI-G-07] 回傳0: 代表 password可用
- 錯誤訊息：輸出 [URI-G-07] 回傳的`errorMsg`
4. Confirm Password
- [多語標籤](#多語標籤): confirmpassword
- API欄位：無
- Validate：
- 必填：是
- 錯誤訊息：Required
- 檢核輸入是否與 Create Password 的輸入ㄧ致
- 錯誤訊息：Please input the password again.
5. Full Name：
- [多語標籤](#多語標籤): fullname
- 稱謂(下拉)：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`titleCode`
- 下拉選單透過 [URI054](https://hackmd.io/Nftm3f0tS6661WC-n-9n0Q) 取得
- 預設選項：Mr
- codemetaId：`user-title-code`
- Validate
- 必填：是
- 錯誤訊息：Required
- 姓名(輸入框)：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`name`
- Validate
- 必填：是
- 錯誤訊息：Required
6. Company Name：
- [多語標籤](#多語標籤): companyname
- 必填：以下兩欄位至少一項
1. 公司名(輸入框)：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`companyName`
- Validate
- 必填：是 (`公司名(輸入框)`和`I'm an indivdual buyer(檢核方框)`至少一有值)
- 錯誤訊息：Required
2. I'm an indivdual buyer(檢核方框)：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`individualbuyer`
- 勾選：1，取消：0
- 同時將字串 `Individual buyer` 填入`companyName`
- onClick：
- 勾選：自動將字串 `Individual buyer` 填入 公司名(輸入框)，並將輸入框設為 readonly 。
- 取消：清除 公司名(輸入框) 內容 並 取消 readonly。
7. Country/Region：
- [多語標籤](#多語標籤): countryregion
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`location`
- 代碼下拉選單透過 [URI054](https://hackmd.io/Nftm3f0tS6661WC-n-9n0Q) 取得，
- codemetaId：`user-country`
- 預設選項：please select
- [多語標籤](#多語標籤): ez_pleaseselect
- Validate
- 必填：是
- 錯誤訊息：Required
- 檢查是否輸入為Taiwan (UI邏輯新版不實作)
- 錯誤訊息：`registerintaiwan` + 請由此註冊成會員
- `registerintaiwan`：[多語標籤](#多語標籤)
- 請由此註冊成會員
- 連結為：https://info.taiwantrade.com/register/supplier
- onSelect：
- 所選的代碼，其API回應欄位`telcode`會帶入`Business Phone Number`和`Mobile Phone Number`的`國碼`欄位為預設值。
- 並且，選取的代碼作為parentCode帶入`State/Province/City` 的欄位

8. State/Province/City
- 必填：以下兩欄位至少一項
1. State/Province/City：
- [多語標籤](#多語標籤): stateprovincecity
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`officeStateCode`
- 代碼下拉選單透過 [URI054](https://hackmd.io/Nftm3f0tS6661WC-n-9n0Q) 取得，
- codemetaId：`user-country-state` ，
- parentCode：Company/Region 所選的`location`。
- 預設選項：please select
- [多語標籤](#多語標籤): ez_pleaseselect
- Validate
- 必填：是 (`State/Province/City`和`Other State/Provice/City`至少一有值)
- 錯誤訊息：Required
2. Other State/Provice/City：
- [多語標籤](#多語標籤): otherstateprovincecity
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`officeOtherState`
9. Address：
- [多語標籤](#多語標籤): address
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`officeAddress`
- Validate
- 必填：是
- 錯誤訊息：Required

10. Company Website：
- [多語標籤](#多語標籤): companywebsite
- 必填：以下兩欄位至少一項
1. 網址(輸入框)：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`companyWebsite`
- Validate
- 必填：是 (`網址(輸入框)`和`Not Avaliable(檢核方框)`至少一有值)
- 錯誤訊息：Required
2. Not Avaliable(檢核方框)：
- [多語標籤](#多語標籤): notavailable
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`websiteNotAvaliable`
- 勾選：1，取消：0
- 同時將字串 `Not Available` 填入`companyWebsite`
- onClick：
- 勾選：自動將字串 `Not Available` 填入 公司名(輸入框)，並將輸入框設為 readonly 。
- 取消：清除 公司名(輸入框) 內容 並 取消 readonly。

11. Business Phone Number：
- [多語標籤](#多語標籤): tel1
- 國碼：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`telCountry`
- Validate
- 必填：否
- 必須為數字：是
- 錯誤訊息：Please enter only numbers.
- 預設值：參考 [URI054](https://hackmd.io/Nftm3f0tS6661WC-n-9n0Q) 取得
- codemetaId：`user-country`
- 對應 Company/Region 所選的`location`的欄位：`telcode`帶入。
- user-country的客製輸出
- 號碼：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`tel`
- Validate
- 必填：否
- 必須為數字：是
- 錯誤訊息：Please enter only numbers.
- 分機：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`telExt`
- Validate
- 必填：否
- 必須為數字：是
- 錯誤訊息：Please enter only numbers.

12. Mobile Phone Number
- [多語標籤](#多語標籤): mobilephone
- 國碼：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`mobileCountry`
- Validate
- 必填：否
- 必須為數字：是
- 錯誤訊息：Please enter only numbers.
- 預設值：參考 [URI054](https://hackmd.io/@jTFbLxrFR6qCyUF4lSdQCA/r1Gv-cTGY) 取得
- codemetaId：`user-country`
- 對應 Company/Region 所選的`location`的欄位：`telcode`帶入。
- 號碼：
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`mobile`
- Validate
- 必填：否
- 必須為數字：是
- 錯誤訊息：Please enter only numbers.

13. I accept the Taiwantrade.com Membership Agreement, Terms of Use and Privacy Policy
- API欄位：(https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`acceptAgreement`
- [多語標籤](#多語標籤): `iacceptthe + taiwantradecommembershipagreement + termsofuse + and + privacypolicy`
- `taiwantradecommembershipagreement`
- 連結為：https://www.taiwantrade.com/mp/help#2
* 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
- `termsofuse`
- 連結為：https://www.taiwantrade.com/mp/help#3
* 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
- `privacypolicy`
- 連結為：https://www.taiwantrade.com/mp/help#4
* 這一頁只是 MP，開發時請直接使用一頁 html 加上連結做出後再置換連結
- 同意服務條款，要勾選才能submit
- Validate
- 必填：是
- 錯誤訊息：無。但disable Submit Button。

14. I'd like to show my email address to the suppliers I contact on Taiwantrade.com.
- [多語標籤](#多語標籤): idontlikeshowmyemail
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`newShowInfo`
- 勾選：1，取消：0
- 必填：否
15. Google recaptcha
- API欄位：無
- Validate
- 必填：是
- 錯誤訊息：無。但disable Submit Button。
- 用法：請見 [Google Recaptcha 說明](#Google-Recaptcha)
16. I'd like to receive information on related products and events.
- [多語標籤](#多語標籤): subscribetotaiwantradenewsletter
- [API欄位](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA#%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E8%AA%AA%E6%98%8E)：`newsLetter`
- 勾選：1，取消：0
17. Submit
- [多語標籤](#多語標籤): register
- onClick：
- Sumbit表單，參考：[頁面區塊說明 G-23-06](#B_G-23-06)

## 頁面邏輯說明

請見 [頁面解說圖 頁面欄位說明](#頁面欄位說明) 各欄說明

以下僅列出特別需要注意的頁面邏輯

### SEO資料
比照AEM舊案，在HEAD TAG 內植入的SEO資料

參考 [API URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ)

General類的頁面代碼 指定為 REGISTER_BUYER

### Google Recaptcha

請參考 [Google官網](https://developers.google.com/recaptcha/docs/display) 實作，每一種語言的用法不同

- 目前使用 V2
- 需驗證合法性
- secrekey請向貿協或凌網EODA索取
- 請確認使用的開發技術，能讓中國大陸地區也能使用(中國有檔 `https://www.google.com/recaptcha/api.js` )
- 如果是使用angular，可以參考使用：
- https://www.npmjs.com/package/ngx-captcha
- 這個確定可以支援中國地區，遇到中國地區瀏覽器會自動轉成`https://www.recaptcha.net/recaptcha/api.js` 來翻牆
- https://www.npmjs.com/package/ng-recaptcha

## 頁面輸出
API規格請見 [會員買主註冊 API](https://hackmd.io/-Cwy_fKaSrGXsgpVsUA0ZA)

輸出欄位對應請見 [頁面解說圖 頁面欄位說明](#頁面欄位說明) 各頁說明

## 附註
### 多語標籤

需要多語標籤，請參考下圖圖示所表示的參數`code`值 透過 [多語標籤 API](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) 取得翻譯名稱。
取得後，請參考頁面欄位說明或是以下圖示，填入所需的標籤`code`對應的`name`

以下列出此頁面所需的所有`code`：

***標題***

圖示中所需多語標籤的`code`：
- backtohomepage
- register
- registerfortaiwantrade
- ez_step1
- fillintheform
- ez_step2
- completion

***提示***

圖示中所需多語標籤的`code`：
- benefitsofregistration
- asamemberyoucan
- trackyourfavorites
- takefulladvantage
- customizedSourcingServices
- asamemberyoucan
- manageyourmessageswithsuppliers

***表單***

圖示中所需多語標籤的`code`：
- email
- suggestenterofficeemail
- createapassword
- confirmpassword
- fullname
- companyname
- individualbuyer
- ez_pleaseselect
- countryregion
- stateprovincecity
- otherstateprovincecity
- address
- companywebsite
- notavailable
- tel1
- mobilephone
- iacceptthe
- taiwantradecommembershipagreement
- termsofuse
- and
- privacypolicy
- idontlikeshowmyemail
- register
- subscribetotaiwantradenewsletter

***訊息***


圖示中所需多語標籤的`code`：
- registerintaiwan