favesalon-embed 0.0.4 → 1.0.0

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

@@ -0,0 +1,134 @@
+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)), 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": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "nameStyle": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "object",
+          "resolved": "object",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "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/constants/colors.js

@@ -0,0 +1,65 @@
+export const Colors = {
+  TextColor: '#141414',
+  Black: '#000000',
+  White: '#ffffff',
+  Primary: '#F05A61',
+  Secondary: '#001529',
+  Black01: '#262626',
+  Black02: '#1f1f1f',
+  Black03: '#141414',
+  Gray01: '#F5F5F5',
+  Gray02: '#EFEFEF',
+  Gray03: '#DBDBDB',
+  Gray04: '#999999',
+  Gray05: '#666666',
+  Red01: '#FEEFEF',
+  Red02: '#F9BDC0',
+  Red03: '#F05A61',
+  Red04: '#C0484E',
+  Red05: '#90363A',
+  Orange01: '#FFF4F0',
+  Orange02: '#FFD1C3',
+  Orange03: '#FF8D69',
+  Orange04: '#CC7154',
+  Orange05: '#99553F',
+  Yellow01: '#FDFBF4',
+  Yellow02: '#F8EDD3',
+  Yellow03: '#EED291',
+  Yellow04: '#BEA874',
+  Yellow05: '#8F7E57',
+  Lilac01: '#F3F0F4',
+  Lilac02: '#CFC1D4',
+  Lilac03: '#886594',
+  Lilac04: '#6D5176',
+  Lilac05: '#523D59',
+  Blue01: '#EAECEE',
+  Blue02: '#AAB1BD',
+  Blue03: '#2B3C59',
+  Blue04: '#223047',
+  Blue05: '#1A2435',
+  Green01: '#ECF7ED',
+  Green02: '#B2E1B9',
+  Green03: '#3FB34F',
+  Green04: '#328F3F',
+  Green05: '#266B2F',
+  Success01: '#EEF9E8',
+  Success02: '#BAE7A3',
+  Success03: '#52C41A',
+  Success04: '#429D15',
+  Success05: '#317610',
+  Error01: '#FFEDED',
+  Error02: '#FFB8B9',
+  Error03: '#FF4D4F',
+  Error04: '#CC3E3F',
+  Error05: '#992E2F',
+  Warning01: '#FFF7E8',
+  Warning02: '#FDDEA1',
+  Warning03: '#FAAD14',
+  Warning04: '#C88A10',
+  Warning05: '#96680C',
+  Info01: '#E8F4FF',
+  Info02: '#A3D3FF',
+  Info03: '#1890FF',
+  Info04: '#1373CC',
+  Info05: '#0E5699',
+};

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

@@ -0,0 +1,295 @@
+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;
+    this.http = axios.create({
+      baseURL: 'https://favesalon.com',
+      // 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`)
+      .then((response) => {
+      const { status, data } = response.data;
+      if (status) {
+        let styleInfo = null, similarStyles = [];
+        try {
+          styleInfo = createFaveStyle(data);
+          similarStyles = (data.style_similars || []).map(createFaveStyle);
+        }
+        catch (e) { }
+        return { styleInfo, similarStyles };
+      }
+      return { styleInfo: null, similarStyles: [] };
+    })
+      .catch(() => {
+      return { styleInfo: null, similarStyles: [] };
+    });
+  }
+  fetchSalonInfo(salonId) {
+    const url = `${apiV2Prefix}/salon/${salonId}/detail`;
+    return this.http.get(url)
+      .then((response) => {
+      const { status, data } = response.data;
+      return status && data ? createSalon(data) : null;
+    })
+      .catch(() => (null));
+  }
+  fetchSalonLatestStyles(salonId, options) {
+    const url = `${apiV2Prefix}/salon/${salonId}/styles`;
+    return this.http.post(url, Object.assign(Object.assign({}, options), { sort: 'newest' }))
+      .then(response => {
+      const { data } = response.data;
+      return (data || []).slice(0, options.limit).map(createFaveStyle);
+    })
+      .catch(() => ([]));
+  }
+  decorateServiceGroups(groups) {
+    return groups.map((cate, index) => {
+      const cateName = cate.name;
+      const categoryId = `${cate.service_id}-${String(cateName).toLowerCase().split(' ').join('-')}-${cate.order}-index-${index}`;
+      const sortedSubCates = sortBy(cate.service_groups, [subCate => subCate.order]);
+      return {
+        id: categoryId,
+        name: cateName,
+        type: 'category',
+        data: sortedSubCates.map((subCate, subCateIndex) => {
+          const subCateId = `${categoryId}-${String(subCate.name).toLowerCase().split(' ').join('-')}-${subCate.order}-index-${subCateIndex}`;
+          return {
+            key: subCateId,
+            name: subCate.category,
+            type: 'sub-category',
+            data: (subCate.services || []).map(rawService => {
+              const serviceObj = createService(rawService);
+              return Object.assign(Object.assign({}, serviceObj), { type: 'service' });
+            }),
+          };
+        }),
+      };
+    });
+  }
+  fetchSalonServices(salonId) {
+    const url = `${apiV1Prefix}/salon/services?v=2&id=${salonId}`;
+    return this.http.get(url)
+      .then(response => {
+      const { status, data } = response.data;
+      if (status) {
+        return this.decorateServiceGroups(data || []);
+      }
+      return [];
+    })
+      .catch(() => ([]));
+  }
+  fetchSalonStylists(salonId, options = { page: 1, limit: 12 }) {
+    const url = `${apiV2Prefix}/salon/${salonId}/stylists?page=${options.page}&limit=${options.limit}`;
+    return this.http.get(url)
+      .then(response => {
+      const { paging, data } = response.data;
+      return {
+        total: paging.total_item || data.length,
+        data: data.map(createStylist),
+      };
+    })
+      .catch(() => ({ total: 0, data: [] }));
+  }
+  fetchSalonReviews(salonId, options) {
+    const url = `${apiV2Prefix}/salon/${salonId}/reviews`;
+    return this.http.post(url, Object.assign({ avg_point_greater_than: 0 }, options))
+      .then(response => {
+      const { data, paging } = response.data || {};
+      const { total_1star: onestar, total_2star: twoStar, total_3star: threeStar, total_4star: fourStar, total_5star: fiveStar, total_review: totalReviews, avg_point: reviewPoint, } = paging.review_detail || {};
+      return {
+        total: paging.total_item || 0,
+        stats: {
+          totalReviews,
+          reviewPoint: reviewPoint ? Math.ceil(reviewPoint) : 0,
+          '1': onestar ? Math.ceil(onestar) : 0,
+          '2': twoStar ? Math.ceil(twoStar) : 0,
+          '3': threeStar ? Math.ceil(threeStar) : 0,
+          '4': fourStar ? Math.ceil(fourStar) : 0,
+          '5': fiveStar ? Math.ceil(fiveStar) : 0,
+        },
+        data: data.map(createReview),
+      };
+    })
+      .catch(() => ({ total: 0, stats: {}, data: [] }));
+  }
+  fetchSalonCategories() {
+    return this.http.post(`${apiV2Prefix}/search/get-services`, { limit: 50 })
+      .then((response) => {
+      const { status, data } = response.data;
+      if (status) {
+        return (data || []).map(blob => {
+          return {
+            id: blob.id,
+            name: blob.name,
+            image: blob.full_image,
+            imageThumb: blob.full_thumb_image,
+          };
+        });
+      }
+      return [];
+    })
+      .catch(() => ([]));
+  }
+  fetchSalonLookbooks(salonId, options) {
+    const noResult = { total: 0, allLookbooks: [] };
+    const url = `${apiV2Prefix}/salon/${salonId}/styles`;
+    const postData = Object.assign({ page: 1, limit: 20 }, options);
+    return this.http.post(url, postData)
+      .then(response => {
+      const { status, data, paging } = response.data;
+      if (status) {
+        return {
+          total: paging.total_item || 0,
+          allLookbooks: (data || []).map(createFaveStyle),
+        };
+      }
+      return noResult;
+    })
+      .catch(() => (noResult));
+  }
+  fetchStyleComments(styleId) {
+    const url = `${apiV2Prefix}/style/comment?photo_id=${styleId}`;
+    return this.http.get(url)
+      .then(response => {
+      const { paging, data } = response.data;
+      return {
+        total: paging.total_item || 0,
+        data: data.map(createFaveStyleComment),
+      };
+    })
+      .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/common.js

@@ -0,0 +1,11 @@
+export const timeFormat = 'HH:mm:ss';
+export const timeFormatAmPm = 'hh:mm A';
+export const dateName = 'dddd';
+export const dateFormat = 'YYYY-MM-DD';
+export const dateTimeFormat = 'YYYY-MM-DD HH:mm:ss';
+export const dateTimeFormatAmPm = 'YYYY-MM-DD hh:mm A';
+export const shortDateFormat = 'ddd, MMM DD';
+export const shortDateYearFormat = 'ddd, MMM DD YYYY';
+export const apiV1Prefix = 'api';
+export const apiV2Prefix = 'api-ver2';
+export const defaultImage = 'https://res.cloudinary.com/reckon-mini-sites/image/upload/v1636477599/FaveSalon%20Social%20Website/default/default--picture_w3jvfh.png';

package/{collection → dist/collection}/types/review.js

@@ -1,5 +1,7 @@
 import dayjs from "dayjs";
-import { apiDateFormat } from "./common";
+import { dateTimeFormat } from "./common";
+import { createSalon } from "./salon";
+import { createStylist } from "./stylist";
 import { createUser } from "./user";
 function createReviewPhoto(blob) {
   return {
@@ -12,15 +14,15 @@ function createReviewPhoto(blob) {
 export class Review {
 }
 export function createReview(blob) {
-  const reviewPhotos = blob.salon_review_photo || blob.beautician_review_photo || [];
+  const reviewPhotos = blob.review_photo || [];
   const [createdDay, createdTime] = String(blob.create_date).split(' ');
   const [updatedDay, updatedTime] = String(blob.update_date).split(' ');
   return {
     title: blob.title,
-    point: Math.ceil(Number(blob.avg_point)),
     description: blob.comment,
-    createdDate: dayjs(`${createdDay} ${createdTime}`, apiDateFormat).valueOf(),
-    updatedDate: dayjs(`${updatedDay} ${updatedTime}`, apiDateFormat).valueOf(),
+    createdDate: dayjs(`${createdDay} ${createdTime}`, dateTimeFormat).valueOf(),
+    updatedDate: dayjs(`${updatedDay} ${updatedTime}`, dateTimeFormat).valueOf(),
+    point: Math.ceil(Number(blob.avg_point)),
     pointView: blob.view_point,
     pointPrice: blob.price_point,
     pointProduct: blob.product_point,
@@ -30,6 +32,8 @@ export function createReview(blob) {
     helpful: blob.helpful,
     recommend: blob.recommend,
     user: blob.user ? createUser(blob.user) : null,
+    salon: blob.salon ? createSalon(blob.salon) : null,
+    stylist: blob.stylist && blob.stylist.user ? createStylist(blob.stylist) : null,
     photos: reviewPhotos.map(createReviewPhoto),
   };
 }

package/dist/collection/types/salon.js

@@ -0,0 +1,58 @@
+import { Colors } from '../constants/colors';
+import { defaultImage } from './common';
+export var BusinessHourStatus;
+(function (BusinessHourStatus) {
+  BusinessHourStatus[BusinessHourStatus["Open"] = 0] = "Open";
+  BusinessHourStatus[BusinessHourStatus["Close"] = 1] = "Close";
+  BusinessHourStatus[BusinessHourStatus["ByAppointment"] = 2] = "ByAppointment";
+})(BusinessHourStatus || (BusinessHourStatus = {}));
+export function createSalon(blob) {
+  const geoLocations = blob.salon_geolocation || [];
+  let salonImages = [];
+  if (blob.salon_miniwebsite) {
+    const activeSite = Array.isArray(blob.salon_miniwebsite) ? blob.salon_miniwebsite[0] : (blob.salon_miniwebsite || {});
+    salonImages = [
+      activeSite.full_small_slider_img1,
+      activeSite.full_small_slider_img2,
+      activeSite.full_small_slider_img3,
+    ].filter(image => !!image);
+  }
+  return {
+    id: blob.id,
+    about: blob.about,
+    email: blob.email,
+    ownerName: blob.owner_name,
+    fullProfileImage: blob.full_profile_image,
+    fullCoverImage: blob.full_cover_image,
+    subdomain: blob.subdomain,
+    website: blob.website,
+    businessName: blob.business_name,
+    businessPhone: blob.business_phone,
+    businessAddress: blob.business_address,
+    businessLocationLat: geoLocations.length > 0 ? geoLocations[0].location_lat : null,
+    businessLocationLng: geoLocations.length > 0 ? geoLocations[0].location_lng : null,
+    city: blob.city,
+    state: blob.state,
+    zipcode: blob.zipcode ? Number(blob.zipcode) : null,
+    businessHours: (blob.business_hours || blob.salon_working_time || []).map(bh => {
+      return {
+        dayName: bh.day_name,
+        openTime: bh.open_time,
+        closeTime: bh.close_time,
+        status: bh.status,
+      };
+    }),
+    rating: Number(blob.rating_point),
+    primaryColor: blob.primary_color || Colors.Primary,
+    salonImages,
+  };
+}
+export function getSalonImage({ salonImages, fullProfileImage }) {
+  if (salonImages && salonImages.length > 0) {
+    return salonImages[0];
+  }
+  if (fullProfileImage) {
+    return fullProfileImage;
+  }
+  return defaultImage;
+}