favesalon-embed 0.1.0 → 1.0.1

package/dist/collection/components/user-avatar/index.js

@@ -1,127 +1,134 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 import { Colors } from '../../constants/colors';
 export class UserAvatar {
   constructor() {
     this.size = 24;
+    this.name = undefined;
+    this.nameStyle = undefined;
+    this.shortName = undefined;
+    this.avatar = undefined;
   }
   render() {
-    return (h("div", { style: { display: "flex", alignItems: "center" } },
-      this.avatar && (h("div", { style: {
-          backgroundImage: `url("${this.avatar}")`,
-          backgroundColor: Colors.Gray01,
-          backgroundPosition: 'center center',
-          backgroundSize: 'cover',
-          borderRadius: '50%',
-          height: `${this.size}px`,
-          width: `${this.size}px`,
-          minWidth: `${this.size}px`,
-        } })),
-      !this.avatar && (h("div", { style: {
-          backgroundColor: Colors.Gray01,
-          backgroundPosition: 'center center',
-          backgroundSize: 'cover',
-          borderRadius: '50%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: `${this.size}px`,
-          width: `${this.size}px`,
-          minWidth: `${this.size}px`,
-        } }, this.shortName)),
-      h("div", { style: Object.assign({ flexShrink: '1', flexGrow: '1', marginLeft: '12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, this.nameStyle) }, this.name)));
+    return (h("div", { style: { display: "flex", alignItems: "center" } }, this.avatar && (h("div", { style: {
+        backgroundImage: `url("${this.avatar}")`,
+        backgroundColor: Colors.Gray01,
+        backgroundPosition: 'center center',
+        backgroundSize: 'cover',
+        borderRadius: '50%',
+        height: `${this.size}px`,
+        width: `${this.size}px`,
+        minWidth: `${this.size}px`,
+      } })), !this.avatar && (h("div", { style: {
+        backgroundColor: Colors.Gray01,
+        backgroundPosition: 'center center',
+        backgroundSize: 'cover',
+        borderRadius: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: `${this.size}px`,
+        width: `${this.size}px`,
+        minWidth: `${this.size}px`,
+      } }, this.shortName)), this.name && (h("div", { style: Object.assign({ flexShrink: '1', flexGrow: '1', marginLeft: '12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, this.nameStyle) }, this.name))));
   }
   static get is() { return "user-avatar"; }
-  static get originalStyleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["index.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["index.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "24"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "nameStyle": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "object",
+          "resolved": "object",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "attribute": "name",
-      "reflect": false
-    },
-    "nameStyle": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object",
-        "resolved": "object",
-        "references": {}
+      "shortName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "short-name",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "avatar": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "avatar",
+        "reflect": false
       }
-    },
-    "shortName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "short-name",
-      "reflect": false
-    },
-    "avatar": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "avatar",
-      "reflect": false
-    }
-  }; }
+    };
+  }
 }
 ;

package/dist/collection/mocks/users.js

@@ -0,0 +1,10 @@
+export const consumerUser = {
+  "id": 442558,
+  "name": "Trung Luu",
+  "avatar": "https://favesalon.s3.amazonaws.com/public/media/uploads/photos/-1/2022-08-23-a982011a-4d49-488b-8a28-343631avatar1.jpg",
+};
+export const salonOwner = {
+  "id": 373905,
+  "name": "Nick Test",
+  "avatar": "https://d3m4d8z2xvy8tb.cloudfront.net/public/media/uploads/salon/profile/2018-11-13-575a6133-724f-4d63-8595-f545396ad96d.png",
+};

package/dist/collection/services/services.js

@@ -1,12 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import get from 'lodash/get';
+import each from 'lodash/each';
 import sortBy from 'lodash/sortBy';
 import axios from 'axios';
 import { createSalon } from '../types/salon';
+import { initializeApp } from 'firebase/app';
+import { child, getDatabase, ref, onValue, push, update } from 'firebase/database';
 import { createFaveStyle, createFaveStyleComment } from '../types/style';
 import { createService } from '../types/service';
 import { createStylist } from '../types/stylist';
 import { createReview } from '../types/review';
 import { apiV1Prefix } from '../types/common';
+import { createChatMessage, createChatRoom } from '../types/chat';
+import dayjs from 'dayjs';
 const apiV2Prefix = 'api-ver2';
+const firebaseMessagesNode = 'favesalon--messages';
 class HttpService {
   constructor() {
     this.http = null;
@@ -15,6 +34,21 @@ class HttpService {
       // baseURL: 'http://13.57.216.170',
       headers: {},
     });
+    try {
+      if (!this.firebaseApp) {
+        this.firebaseApp = initializeApp({
+          apiKey: "AIzaSyD5IdiIA9QUZeguRbi8DEZ25TrNXPU3-uI",
+          authDomain: "favestyle-b57d4.firebaseapp.com",
+          databaseURL: "https://favestyle-b57d4.firebaseio.com",
+          projectId: "favestyle-b57d4",
+          storageBucket: "favestyle-b57d4.appspot.com",
+          messagingSenderId: "105638847842",
+          appId: "1:105638847842:web:35f50dfe0e8eb52f46783b",
+        });
+      }
+      this.firebaseDatabase = getDatabase(this.firebaseApp);
+    }
+    catch (error) { }
   }
   fetchStyleDetail(styleId) {
     return this.http.get(`${apiV2Prefix}/style/${styleId}/detail`)
@@ -170,5 +204,92 @@ class HttpService {
     })
       .catch(() => ({ total: 0, data: [] }));
   }
+  createChatRoom(receiverId, accessToken) {
+    const url = `${apiV2Prefix}/chatroom/create/${receiverId}?access_token=${accessToken}`;
+    return this.http.get(url)
+      .then(response => {
+      const blob = get(response, 'data.data', {});
+      return createChatRoom(blob);
+    })
+      .catch(() => (null));
+  }
+  fetchRooms(accessToken, page, allRooms = []) {
+    const url = `${apiV2Prefix}/chatroom/get?page=${page}&limit=20&access_token=${accessToken}`;
+    return this.http.get(url)
+      .then(response => {
+      const blobs = get(response, 'data.data', []);
+      const chatRooms = blobs.map(createChatRoom);
+      // fetch next page's styles
+      if (chatRooms.length >= 20) {
+        return this.fetchRooms(accessToken, page + 1, allRooms.concat(chatRooms));
+      }
+      return page === 1 ? chatRooms : allRooms.concat(chatRooms);
+    });
+  }
+  fetchChatRooms(accessToken) {
+    return this.fetchRooms(accessToken, 1)
+      .catch(() => ([]));
+  }
+  fetchChatMessages(roomId, onDone) {
+    if (this.firebaseDatabase) {
+      try {
+        const roomMessagesRef = ref(this.firebaseDatabase, `${firebaseMessagesNode}/${roomId}`);
+        onValue(roomMessagesRef, (snapshot) => {
+          const conversations = [];
+          each(snapshot.val(), (message, key) => {
+            const chatMessage = createChatMessage(Object.assign(Object.assign({}, message), { uid: key }));
+            conversations.push(chatMessage);
+          });
+          onDone(sortBy(conversations, 'timestamp'));
+        });
+      }
+      catch (error) {
+        onDone([]);
+      }
+    }
+    return Promise.resolve({});
+  }
+  markMessagesAsRead(roomId, roomMessages) {
+    if (this.firebaseDatabase) {
+      try {
+        const roomMessagesRef = ref(this.firebaseDatabase, `${firebaseMessagesNode}/${roomId}`);
+        const updates = {};
+        roomMessages.forEach(message => {
+          const { uid } = message, nestedMessage = __rest(message, ["uid"]);
+          updates[`${message.uid}`] = Object.assign(Object.assign({}, nestedMessage), { unRead: 0 });
+        });
+        return update(roomMessagesRef, updates);
+      }
+      catch (error) { }
+    }
+    return Promise.reject();
+  }
+  sendChatMessage(options) {
+    if (this.firebaseDatabase) {
+      try {
+        const { message, senderId, chatRoomId } = options;
+        // Get a key for a new message.
+        const roomMessagesRef = ref(this.firebaseDatabase, `${firebaseMessagesNode}`);
+        const newMessageKey = push(child(roomMessagesRef, chatRoomId)).key;
+        const newMessageKeyPath = `/${chatRoomId}/${newMessageKey}`;
+        const newMessage = {
+          message,
+          unRead: 1,
+          senderId,
+          timestamp: dayjs().valueOf(),
+        };
+        // Store new message in Firebase
+        const updates = {
+          [newMessageKeyPath]: newMessage,
+        };
+        return update(roomMessagesRef, updates)
+          .then(() => {
+          return Object.assign(Object.assign({}, newMessage), { uid: newMessageKey });
+        });
+      }
+      catch (error) { }
+    }
+    return Promise.reject();
+  }
 }
 export default () => new HttpService();

package/dist/collection/types/chat.js

@@ -0,0 +1,23 @@
+import { createUser } from './user';
+export function createChatMessage(blob) {
+  return {
+    uid: blob.uid,
+    message: blob.message,
+    timestamp: blob.timestamp,
+    unRead: blob.unRead,
+    senderId: blob.senderId,
+  };
+}
+export class ChatRoom {
+  constructor(fields) {
+    Object.assign(this, fields);
+  }
+}
+export function createChatRoom(blob) {
+  return new ChatRoom({
+    id: blob.id,
+    uid: blob.firebase_room_id,
+    members: blob.from_user && blob.to_user ? [createUser(blob.from_user), createUser(blob.to_user)] : [],
+    messages: [],
+  });
+}

package/dist/collection/types/user.js

@@ -1,7 +1,7 @@
 export function createUser(blob) {
   const userNames = [blob.first_name, blob.last_name].filter(name => !!name);
   return {
-    id: blob.user_id,
+    id: blob.id || blob.user_id,
     firstName: blob.first_name,
     lastName: blob.last_name,
     fullName: userNames.length > 0 ? userNames.join(' ') : (blob.fullName || blob.name || blob.username),

package/dist/custom-elements/index.d.ts

@@ -2,6 +2,12 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface ChatButton extends Components.ChatButton, HTMLElement {}
+export const ChatButton: {
+  prototype: ChatButton;
+  new (): ChatButton;
+};
+
 interface GoogleMap extends Components.GoogleMap, HTMLElement {}
 export const GoogleMap: {
   prototype: GoogleMap;