@subiz/widget-v4 4.1.214 → 4.1.216

package/README.md

@@ -6,6 +6,12 @@ $ npm run dev
 
 visit: http://localhost:8082/?account_id=acqcsmrppbftadjzxnvo
 
+The fallback button keeps the configured width and height and has an opaque
+white backing. Each dimension defaults to 70px only when it is not configured.
+
+Masks use data URLs rather than blob URLs. If data URLs are blocked, the widget
+tries the original image URL with CORS before using the fallback button.
+
 ### To test widget in injection mode
 
 ``` sh

package/api.md

@@ -1264,6 +1264,7 @@ nghiệp vụ của form do website thực hiện.
 subiz('waitReady', async function () {
   try {
     const result = await subiz('getFormStatus', 'website_contact')
+    // result.values: [{key: 'fullname', label: 'Họ tên', value: 'Nguyễn Văn An'}, ...]
     if (result.submitted) document.getElementById('contact-form').hidden = true
   } catch (error) {
     // Không ẩn form khi kiểm tra thất bại.
@@ -1271,11 +1272,26 @@ subiz('waitReady', async function () {
 })
 ```
 
-`getFormStatus(formId)` trả `{submitted, status, conversation_id?}`, chỉ hỗ trợ ID
-website không bắt đầu bằng `cp`. Cả hội thoại đã kết thúc cũng được tính.
-`status: 'found'` nghĩa là tìm thấy lần gửi; `'not_found_in_available_history'`
-không khẳng định khách chưa từng gửi. Service hiện chỉ đọc tối đa 200 dòng lịch sử
-khách trước khi lọc theo form, sau đó trả tối đa 6 hội thoại; cache và việc xóa dữ
-liệu cũng ảnh hưởng kết quả. Lần gửi theo luồng cũ dùng hostname làm nguồn hoặc
-CF7 ticket chưa được tra cứu bằng API này. Khách cần được nhận diện lại bằng cùng
-phiên widget; không đảm bảo khi xóa dữ liệu trình duyệt hoặc đổi thiết bị.
+`getFormStatus(formId)` đọc qua store KV/LSDB của widget, không gọi API trạng thái
+hay lấy hội thoại. Sau khi submit thành công, SDK lưu dấu đã gửi và nội dung form
+trong 7 ngày, tách theo account, ID khách và ID form. Bản ghi gồm mã hội thoại,
+thời điểm hết hạn và `values` của lần gửi thành công gần nhất, theo dạng
+`[{key, label, value}]` với giá trị đã chuẩn hóa thành chuỗi như khi gửi.
+Đọc trạng thái không gia hạn thời gian lưu. Lần gửi thất bại không ghi đè dữ liệu cũ.
+
+Kết quả: `{submitted: true, status: 'found', conversation_id, values}` nếu còn hạn;
+`{submitted: false, status: 'not_found'}` nếu chưa lưu; `status: 'expired'` khi
+hết hạn (đồng thời xóa bản ghi); `status: 'storage_unavailable'` khi trình duyệt
+không cho truy cập localStorage. Lỗi lưu localStorage không biến một submit đã
+thành công thành thất bại. Website nên ẩn form ngay sau khi submit thành công.
+
+SDK bỏ qua sự kiện realtime của hội thoại kênh form trước khi lấy chi tiết hội
+thoại; không mở hội thoại form trong chat widget. Luồng chat thông thường giữ
+nguyên. Trạng thái chỉ có trên cùng website/trình duyệt và cùng ID khách, không
+đồng bộ thiết bị khác, mất khi xóa localStorage. Các lần gửi trước khi bổ sung
+cơ chế lưu này không được tự khôi phục từ server. Bản ghi cũ chỉ lưu dấu đã gửi
+vẫn trả `submitted: true` nếu còn hạn, nhưng `values: []` vì chưa lưu nội dung.
+
+SDK không truy cập localStorage trực tiếp: store dùng `kv.put/match/del` và
+LSDB hiện có. Khi widget dùng chế độ in-memory hoặc trình duyệt chặn lưu trữ,
+trạng thái có thể chỉ giữ trong bộ nhớ của trang và mất khi tải lại.

package/assets/img/bubble_default.svg

@@ -7,6 +7,7 @@
     </style>
   </defs>
   <title>Asset 5</title>
+  <circle cx="30" cy="30" r="30" fill="white"/>
   <g id="Layer_2" data-name="Layer 2">
     <g id="Layer_1-2" data-name="Layer 1">
       <g>

package/assets/less/widget.less

@@ -438,6 +438,18 @@
 	// min-height: @desktop-chat-button-height;
 }
 
+.chat-button--fallback {
+	.chat-button--img-container {
+		background-size: 100% 100%;
+	}
+
+	.chat-button--img {
+		width: 100%;
+		min-width: 0;
+		height: 100%;
+	}
+}
+
 .chat-button.chat-button--left {
 	float: left;
 }

package/compiled_src/chatbox/ChatButton.js

@@ -400,18 +400,10 @@ class ChatButton extends _common.Com {
     this.readyGate.close();
     const [loaded, mask] = await Promise.all([Promise.all(appearance.urls.filter(url => url !== appearance.maskAsset).map(url => preloadButtonImage(url))), appearance.maskAsset ? prepareButtonMask(appearance.maskAsset) : Promise.resolve(null)]);
     const stale = () => !this._isMounted || this._buttonImageVersion !== version;
-    if (stale()) {
-      if (mask) URL.revokeObjectURL(mask);
-      return;
-    }
+    if (stale()) return;
     const fallback = loaded.some(success => !success) || !!appearance.maskAsset && !mask;
     const ready = !fallback || (await preloadButtonImage(defaultBubble));
-    if (stale()) {
-      if (mask) URL.revokeObjectURL(mask);
-      return;
-    }
-    if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl);
-    this._buttonMaskUrl = mask;
+    if (stale()) return;
     if (this._buttonElement) window.getComputedStyle(this._buttonElement).transform;
     this.setState({
       ready,
@@ -422,7 +414,6 @@ class ChatButton extends _common.Com {
     this.readyGate.open();
   }
   componentWillUnmount() {
-    if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl);
     if (this._animateTimeout) clearTimeout(this._animateTimeout);
   }
   renderButton() {
@@ -437,11 +428,12 @@ class ChatButton extends _common.Com {
       imgwidth,
       imgheight
     } = appearance;
+    const fallback = this.state.readyImageKey === appearance.key && this.state.fallbackButtonImage;
     if (appearance.maskAsset) {
       maskurl = this.state.readyImageKey === appearance.key ? this.state.buttonMaskUrl : '';
       if (imgsrc === appearance.maskAsset) imgsrc = maskurl || '';
     }
-    if (this.state.readyImageKey === appearance.key && this.state.fallbackButtonImage) {
+    if (fallback) {
       imgsrc = imgurl = defaultBubble;
       maskurl = '';
     }
@@ -501,7 +493,11 @@ class ChatButton extends _common.Com {
         mask-size: cover !important;
 			`;
     }
+    if (fallback) {
+      imgcontainerstyle += `width: ${imgwidth}px !important; height: ${imgheight}px !important;`;
+    }
     let cls = 'chat-button chat-button--' + position;
+    if (fallback) cls += ' chat-button--fallback';
     let whiteBgStyle = `
 			width: ${imgwidth - 4}px !important;
 			height: ${imgheight - 4}px !important;
@@ -624,13 +620,19 @@ function preloadButtonImage(src, {
   });
 }
 async function prepareButtonMask(src) {
-  let url;
   try {
     const response = await fetch(src);
     if (!response.ok) return null;
-    url = URL.createObjectURL(await response.blob());
-    if (await preloadButtonImage(url)) return url;
+    const blob = await response.blob();
+    const url = await new Promise(resolve => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reader.onabort = () => resolve('');
+      reader.readAsDataURL(blob);
+    });
+    if (url && (await preloadButtonImage(url))) return url;
   } catch (_) {}
-  if (url) URL.revokeObjectURL(url);
-  return null;
+  return (await preloadButtonImage(src, {
+    crossOrigin: true
+  })) ? src : null;
 }

package/compiled_src/lib.js

@@ -233,12 +233,12 @@ class Widget {
       return this.store.sendConversion(formid, values, impressiontoken);
     }
     const payload = formRequest(formid, values, options);
-    return formResult(await this.store.api.submitWebsiteForm(formid, payload), 'submit');
+    return this.store.submitWebsiteForm(formid, payload);
   }
   async getFormStatus(formid) {
     validateWebsiteFormId(formid);
     await this.store.readyGate.entry();
-    return formResult(await this.store.api.getWebsiteFormStatus(formid), 'status');
+    return this.store.getFormStatus(formid);
   }
   startConvo(req) {
     req = _index.default.cloneDeep(req) || {};
@@ -378,17 +378,4 @@ function formRequest(formid, fields, options = {}) {
       };
     })
   };
-}
-function formResult(response, operation) {
-  const body = response && response.body;
-  const detail = response && response.error || body && body.error;
-  const status = response && response.code;
-  const valid = operation === 'submit' ? body && typeof body.conversation_id === 'string' && body.conversation_id && typeof body.submission_id === 'string' && body.submission_id : body && typeof body.submitted === 'boolean' && typeof body.status === 'string';
-  if (detail || !(status >= 200 && status < 300) || !valid) {
-    const error = new Error('Subiz form request failed');
-    error.code = detail && detail.code || 'form_request_failed';
-    error.status = status;
-    throw error;
-  }
-  return body;
 }

package/compiled_src/store/api.js

@@ -65,7 +65,6 @@ class _default {
     _defineProperty(this, "sendEvent", data => this.apireq.addQuery('shorten', true).addQuery('x-referer', _index.default.get(location, 'origin', '')).post(`/accounts/${this.accid}/users/${this.uid}/events`, data));
     _defineProperty(this, "websiteFormRequest", () => this.apireq.setBaseUrl(this.ApiURL.replace(/\/4\.[01]\/?$/, '/4.1')));
     _defineProperty(this, "submitWebsiteForm", (formid, payload) => this.websiteFormRequest().post(`/accounts/${this.accid}/external-forms/${encodeURIComponent(formid)}/submissions`, payload));
-    _defineProperty(this, "getWebsiteFormStatus", formid => this.websiteFormRequest().get(`/accounts/${this.accid}/external-forms/${encodeURIComponent(formid)}/status`));
     _defineProperty(this, "submitForm", (form_id, page_url, device, data, user) => this.apireq.addQuery('x-referer', _index.default.get(location, 'origin', '')).post(`/accounts/${this.accid}/users/${this.uid}/events`, {
       by: {
         id: this.uid,

package/compiled_src/store/store.js

@@ -881,6 +881,56 @@ class Store {
       this.reconnectGate.open();
     }
   }
+  async submitWebsiteForm(formid, payload) {
+    await this.readyGate.entry();
+    const key = websiteFormStorageKey(this.api, formid);
+    const kv = this.kv;
+    const values = _index.default.cloneDeep(payload.values);
+    const result = formResult(await this.api.submitWebsiteForm(formid, payload));
+    try {
+      kv.put(key, {
+        conversation_id: result.conversation_id,
+        values,
+        expires_at: _index.default.Date.now() + 7 * 24 * 60 * 60 * 1000
+      });
+    } catch (_) {}
+    return result;
+  }
+  getFormStatus(formid) {
+    const key = websiteFormStorageKey(this.api, formid);
+    try {
+      const receipt = this.kv.match(key);
+      if (!receipt) return {
+        submitted: false,
+        status: 'not_found'
+      };
+      if (!Number.isFinite(receipt.expires_at) || typeof receipt.conversation_id !== 'string' || !receipt.conversation_id) {
+        this.kv.del(key);
+        return {
+          submitted: false,
+          status: 'not_found'
+        };
+      }
+      if (receipt.expires_at <= _index.default.Date.now()) {
+        this.kv.del(key);
+        return {
+          submitted: false,
+          status: 'expired'
+        };
+      }
+      return {
+        submitted: true,
+        status: 'found',
+        conversation_id: receipt.conversation_id,
+        values: Array.isArray(receipt.values) ? _index.default.cloneDeep(receipt.values) : []
+      };
+    } catch (_) {
+      return {
+        submitted: false,
+        status: 'storage_unavailable'
+      };
+    }
+  }
   async submitForm(formid, data, user) {
     await this.readyGate.entry();
     if (user) await this.setUser(user);
@@ -1008,6 +1058,7 @@ class Store {
   async _onWs(ev) {
     if (this._die) return;
     if (!ev || !ev.type) return;
+    if (_index.default.get(ev, 'touchpoint.channel') === 'form' || _index.default.get(ev, 'data.conversation.touchpoint.channel') === 'form') return;
     ev.created = _index.default.getMs(ev.created);
     if (ev.type === 'user_info_updated') {
       return;
@@ -1757,4 +1808,20 @@ var xhrsend = function (method, url, body, cb) {
   if (body) request.setRequestHeader('content-type', 'text/plain');
   request.send(body);
 };
-const dieErr = new Error('sdk unloaded');
+const dieErr = new Error('sdk unloaded');
+function websiteFormStorageKey(api, formid) {
+  return 'sbz_form_submitted:' + _index.default.stringify([api.accid, api.uid, formid]);
+}
+function formResult(response) {
+  const body = response && response.body;
+  const detail = response && response.error || body && body.error;
+  const status = response && response.code;
+  const valid = body && typeof body.conversation_id === 'string' && body.conversation_id && typeof body.submission_id === 'string' && body.submission_id;
+  if (detail || !(status >= 200 && status < 300) || !valid) {
+    const error = new Error('Subiz form request failed');
+    error.code = detail && detail.code || 'form_request_failed';
+    error.status = status;
+    throw error;
+  }
+  return body;
+}