4878562030

Build # 4878562030

Build Type

push

github

Committed by GitHub

Commit Message

sync features and bugfixs from e3d1ac7 (#1714)

Run Details

1724 of 6102 branches covered (28.25%)

Branch coverage included in aggregate %.

751 of 2684 new or added lines in 97 files covered. (27.98%)

457 existing lines in 34 files now uncovered.

3248 of 8911 relevant lines covered (36.45%)

18.43 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

21.38

/packages/ringcentral-integration/modules/UserGuide/UserGuide.ts

import { includes } from 'ramda';

import {
  action,
  computed,
  RcModuleV2,
  state,
  storage,
  track,
  watch,
} from '@ringcentral-integration/core';

import { Module } from '../../lib/di';
import { proxify } from '../../lib/proxy/proxify';
import { trackEvents } from '../../enums/trackEvents';
import {
  CarouselOptions,
  CarouselState,
  Deps,
  Guides,
} from './UserGuide.interface';

export const SUPPORTED_LOCALES = {
  'en-US': 'en-US',
  'fr-CA': 'fr-CA',
};

function getFileName(fileUrl: string) {
  return fileUrl.split('\\').pop()?.split('/').pop();
}

// Since file name has included file MD5, any file name change means file change
function anyFileDiff(urls1: string[], urls2: string[]) {
  const files1 = (urls1 ?? []).map((url) => getFileName(url));
  const files2 = (urls2 ?? []).map((url) => getFileName(url));
  return JSON.stringify(files1) !== JSON.stringify(files2);
}

@Module({
  name: 'UserGuide',
  deps: [
    'Auth',
    'Locale',
    'Storage',
    'Webphone',
    'AppFeatures',
    'Brand',
    { dep: 'UserGuideOptions', optional: true },
  ],
})
export class UserGuide extends RcModuleV2<Deps> {
  constructor(deps: Deps) {
    super({
      deps,
      enableCache: true,
      storageKey: 'UserGuide',
    });
  }

  @storage
  @state
  allGuides: { [key: string]: Guides } = {};

  @state
  carouselState: CarouselState = {
    curIdx: 0,
    entered: false,
    playing: false,
  };

  @state
  preLoadImageStatus = false;

  @state
  firstLogin = false;

  @action
  setPreLoadImageStatus() {
    this.preLoadImageStatus = true;
  }

  @action
  setGuides(guides: Guides) {
    const oldGuides = this.allGuides[this._deps.brand.code] ?? {};
    this.allGuides[this._deps.brand.code] = guides;
    for (const locale of Object.keys(SUPPORTED_LOCALES)) {
      if (anyFileDiff(guides[locale], oldGuides[locale])) {
        this.start({ firstLogin: true });
        break;
      }
    }
  }

  @action
  _migrateGuides() {
    if (!this.allGuides[this._deps.brand.code]) {
      this.allGuides[this._deps.brand.code] = {};
    }
    Object.keys(SUPPORTED_LOCALES).forEach((locale) => {
      const allGuides: Guides = this.allGuides as any;
      if (allGuides[locale]) {
        this.allGuides[this._deps.brand.code][locale] = allGuides[locale];
        delete allGuides[locale];
      }
    });
  }

  @track((that: UserGuide, options: Required<CarouselOptions>) => {
    if (options.curIdx === 0 && options.playing) {
      return [trackEvents.whatsNew];
    }
  })
  @action
  setCarousel({ firstLogin, ...carouselState }: Required<CarouselOptions>) {
    this.carouselState = carouselState;
    this.firstLogin = firstLogin;
  }

  override async onInitSuccess() {
    if (this.hasPermission) {
      await this.initUserGuide();
    }
  }

  override _shouldInit() {
    return !!(
      this.pending &&
      this._deps.auth.ready &&
      this._deps.auth.loggedIn &&
      this._deps.locale.ready &&
      this._deps.storage.ready &&
      this._deps.appFeatures.ready &&
      this._deps.brand.ready
    );
  }

  override _shouldReset() {
    return !!(
      this.ready &&
      (!this._deps.auth.ready ||
        !this._deps.locale.ready ||
        !this._deps.storage.ready ||
        !this._deps.appFeatures.ready ||
        !this._deps.brand.ready)
    );
  }

  override onInitOnce() {
    this._migrateGuides();
    // When there is an incoming call,
    // the guide should be dismissed
    watch(
      this,
      () => this._deps.webphone.ringSession,
      (ringSession) => {
        if (this._deps.webphone.ready && ringSession) {
          this.dismiss();
        }
      },
    );
    watch(
      this,
      () => this._deps.brand.brandConfig,
      async () => {
        if (this.hasPermission) {
          await this.initUserGuide();
        }
      },
    );
  }

  @proxify
  async _preLoadImage(url: string) {
    await new Promise((resolve, reject) => {
      const img = new Image();
      img.src = url;
      img.onload = resolve;
      img.onerror = reject;
    });
  }

  @proxify
  async preLoadImage() {
    const url = this.guides[0];
    if (url) {
      await this._preLoadImage(url);
    }
    this.setPreLoadImageStatus();
  }

  /**
   * Using webpack `require.context` to load guides files.
   * Image files will be sorted by file name in ascending order.
   */
  resolveGuides(): Record<string, string[]> {
    let images =
      (this._deps.brand.brandConfig.assets?.guides as string[]) || [];

    if (
      images.length === 0 &&
      typeof this._deps.userGuideOptions?.context === 'function'
    ) {
      images = this._deps.userGuideOptions.context
        .keys()
        .sort()
        .map((key: string) => {
          const value = this._deps.userGuideOptions!.context(key);
          return typeof value === 'string' ? value : value?.default;
        }) as string[];
    }

    const locales = Object.keys(SUPPORTED_LOCALES);
    return images.reduce<Record<string, string[]>>((acc, curr: string) => {
      locales.forEach((locale) => {
        if (!acc[locale]) {
          acc[locale] = [];
        }
        if (includes(locale, curr)) {
          acc[locale].push(curr);
        }
      });
      return acc;
    }, {});
  }

  @proxify
  async dismiss() {
    if (
      this.carouselState.curIdx !== 0 ||
      this.carouselState.playing ||
      this.carouselState.entered ||
      this.firstLogin
    ) {
      this.updateCarousel({
        curIdx: 0,
        entered: false,
        playing: false,
        firstLogin: false,
      });
    }
  }

  @proxify
  async updateCarousel({
    curIdx,
    entered,
    playing,
    firstLogin = this.firstLogin,
  }: CarouselOptions) {
    this.setCarousel({
      curIdx,
      entered,
      playing,
      firstLogin,
    });
  }

  get hasPermission() {
    // For extensions without calling or read message permissions, most of the content in
    // the user guide is not applicable to them. So we should not show the user guide for
    // these extensions.
    return (
      this._deps.appFeatures.isCallingEnabled ||
      this._deps.appFeatures.hasReadMessagesPermission
    );
  }

  @proxify
  async initUserGuide() {
    const guides = this.resolveGuides();
    // Determine if it needs to be displayed when first log in,
    // the principles behind this is to use webpack's file hash,
    // i.e. if any of the guide files is changed, the file name hash
    // will be changed as well, in this case, it will be displayed.
    if (guides) {
      this.setGuides(guides);
      await this.preLoadImage();
    }
  }

  @proxify
  async start({ firstLogin = false } = {}) {
    // Start guides only when images are ready
    this.setCarousel({
      curIdx: 0,
      entered: true,
      playing: true,
      firstLogin,
    });
  }

  @computed((that: UserGuide) => [
    that._deps.locale.ready,
    that.allGuides[that._deps.brand.code],
    that._deps.locale.currentLocale,
  ])
  get guides() {
    if (!this._deps.locale.ready) {
      return [];
    }
    const brandGuides = this.allGuides[this._deps.brand.code];
    if (brandGuides) {
      const currentGuides = brandGuides[this._deps.locale.currentLocale];
      if (currentGuides && currentGuides.length > 0) {
        return currentGuides;
      }
      return brandGuides[SUPPORTED_LOCALES['en-US']] || [];
    }
    return [];
  }

  get started() {
    return this.carouselState.entered && this.carouselState.playing;
  }
}

1	import { includes } from 'ramda';
2
3	import {
4	action,
5	computed,
6	RcModuleV2,
7	state,
8	storage,
9	track,
10	watch,
11	} from '@ringcentral-integration/core';
12
13	import { Module } from '../../lib/di';
14	import { proxify } from '../../lib/proxy/proxify';
15	import { trackEvents } from '../../enums/trackEvents';
16	import {
17	CarouselOptions,
18	CarouselState,
19	Deps,
20	Guides,
21	} from './UserGuide.interface';
22
23	export const SUPPORTED_LOCALES = {	1✔
24	'en-US': 'en-US',
25	'fr-CA': 'fr-CA',
26	};
27
28	function getFileName(fileUrl: string) {
29	return fileUrl.split('\\').pop()?.split('/').pop();	1✔
30	}
31
32	// Since file name has included file MD5, any file name change means file change
33	function anyFileDiff(urls1: string[], urls2: string[]) {
34	const files1 = (urls1 ?? []).map((url) => getFileName(url));	1!
35	const files2 = (urls2 ?? []).map((url) => getFileName(url));	1✔
36	return JSON.stringify(files1) !== JSON.stringify(files2);	1✔
37	}
38
39	@Module({
40	name: 'UserGuide',
41	deps: [
42	'Auth',
43	'Locale',
44	'Storage',
45	'Webphone',
46	'AppFeatures',
47	'Brand',
48	{ dep: 'UserGuideOptions', optional: true },
49	],
50	})
51	export class UserGuide extends RcModuleV2<Deps> {
52	constructor(deps: Deps) {
53	super({	4✔
54	deps,
55	enableCache: true,
56	storageKey: 'UserGuide',
57	});
58	}
59
60	@storage
61	@state
62	allGuides: { [key: string]: Guides } = {};	4✔
63
64	@state
65	carouselState: CarouselState = {	4✔
66	curIdx: 0,
67	entered: false,
68	playing: false,
69	};
70
71	@state
72	preLoadImageStatus = false;	4✔
73
74	@state
75	firstLogin = false;	4✔
76
77	@action
78	setPreLoadImageStatus() {
79	this.preLoadImageStatus = true;	1✔
80	}
81
82	@action
83	setGuides(guides: Guides) {
84	const oldGuides = this.allGuides[this._deps.brand.code] ?? {};	1✔
85	this.allGuides[this._deps.brand.code] = guides;	1✔
86	for (const locale of Object.keys(SUPPORTED_LOCALES)) {	1✔
87	if (anyFileDiff(guides[locale], oldGuides[locale])) {	1!
88	this.start({ firstLogin: true });	1✔
89	break;	1✔
90	}
91	}
92	}
93
94	@action
95	_migrateGuides() {
96	if (!this.allGuides[this._deps.brand.code]) {	1!
97	this.allGuides[this._deps.brand.code] = {};	1✔
98	}
99	Object.keys(SUPPORTED_LOCALES).forEach((locale) => {	1✔
100	const allGuides: Guides = this.allGuides as any;	2✔
101	if (allGuides[locale]) {	2!
102	this.allGuides[this._deps.brand.code][locale] = allGuides[locale];	2✔
103	delete allGuides[locale];	2✔
104	}
105	});
106	}
107
108	@track((that: UserGuide, options: Required<CarouselOptions>) => {
109	if (options.curIdx === 0 && options.playing) {	×
110	return [trackEvents.whatsNew];	×
111	}
112	})
113	@action
114	setCarousel({ firstLogin, ...carouselState }: Required<CarouselOptions>) {
115	this.carouselState = carouselState;	1✔
116	this.firstLogin = firstLogin;	1✔
117	}
118
119	override async onInitSuccess() {
120	if (this.hasPermission) {	×
121	await this.initUserGuide();	×
122	}
123	}
124
125	override _shouldInit() {
126	return !!(	×
127	this.pending &&	×
128	this._deps.auth.ready &&
129	this._deps.auth.loggedIn &&
130	this._deps.locale.ready &&
131	this._deps.storage.ready &&
132	this._deps.appFeatures.ready &&
133	this._deps.brand.ready
134	);
135	}
136
137	override _shouldReset() {
138	return !!(	×
139	this.ready &&	×
140	(!this._deps.auth.ready \|\|
141	!this._deps.locale.ready \|\|
142	!this._deps.storage.ready \|\|
143	!this._deps.appFeatures.ready \|\|
144	!this._deps.brand.ready)
145	);
146	}
147
148	override onInitOnce() {
149	this._migrateGuides();	×
150	// When there is an incoming call,
151	// the guide should be dismissed
152	watch(	×
153	this,
154	() => this._deps.webphone.ringSession,	×
155	(ringSession) => {
156	if (this._deps.webphone.ready && ringSession) {	×
157	this.dismiss();	×
158	}
159	},
160	);
161	watch(	×
162	this,
163	() => this._deps.brand.brandConfig,	×
164	async () => {
165	if (this.hasPermission) {	×
166	await this.initUserGuide();	×
167	}
168	},
169	);
170	}
171
172	@proxify
173	async _preLoadImage(url: string) {
174	await new Promise((resolve, reject) => {	×
175	const img = new Image();	×
176	img.src = url;	×
177	img.onload = resolve;	×
178	img.onerror = reject;	×
179	});
180	}
181
182	@proxify
183	async preLoadImage() {
184	const url = this.guides[0];	×
185	if (url) {	×
186	await this._preLoadImage(url);	×
187	}
188	this.setPreLoadImageStatus();	×
189	}
190
191	/**
192	* Using webpack `require.context` to load guides files.
193	* Image files will be sorted by file name in ascending order.
194	*/
195	resolveGuides(): Record<string, string[]> {
196	let images =
197	(this._deps.brand.brandConfig.assets?.guides as string[]) \|\| [];	×
198
199	if (	×
200	images.length === 0 &&	×
201	typeof this._deps.userGuideOptions?.context === 'function'
202	) {
203	images = this._deps.userGuideOptions.context	×
204	.keys()
205	.sort()
206	.map((key: string) => {
NEW 207	const value = this._deps.userGuideOptions!.context(key);	×
208	return typeof value === 'string' ? value : value?.default;	×
209	}) as string[];
210	}
211
212	const locales = Object.keys(SUPPORTED_LOCALES);	×
213	return images.reduce<Record<string, string[]>>((acc, curr: string) => {	×
214	locales.forEach((locale) => {	×
215	if (!acc[locale]) {	×
216	acc[locale] = [];	×
217	}
NEW 218	if (includes(locale, curr)) {	×
219	acc[locale].push(curr);	×
220	}
221	});
222	return acc;	×
223	}, {});
224	}
225
226	@proxify
227	async dismiss() {
NEW 228	if (	×
229	this.carouselState.curIdx !== 0 \|\|	×
230	this.carouselState.playing \|\|
231	this.carouselState.entered \|\|
232	this.firstLogin
233	) {
NEW 234	this.updateCarousel({	×
235	curIdx: 0,
236	entered: false,
237	playing: false,
238	firstLogin: false,
239	});
240	}
241	}
242
243	@proxify
244	async updateCarousel({
245	curIdx,
246	entered,
247	playing,
248	firstLogin = this.firstLogin,	×
249	}: CarouselOptions) {
250	this.setCarousel({	×
251	curIdx,
252	entered,
253	playing,
254	firstLogin,
255	});
256	}
257
258	get hasPermission() {
259	// For extensions without calling or read message permissions, most of the content in
260	// the user guide is not applicable to them. So we should not show the user guide for
261	// these extensions.
262	return (	×
263	this._deps.appFeatures.isCallingEnabled \|\|	×
264	this._deps.appFeatures.hasReadMessagesPermission
265	);
266	}
267
268	@proxify
269	async initUserGuide() {
270	const guides = this.resolveGuides();	×
271	// Determine if it needs to be displayed when first log in,
272	// the principles behind this is to use webpack's file hash,
273	// i.e. if any of the guide files is changed, the file name hash
274	// will be changed as well, in this case, it will be displayed.
275	if (guides) {	×
276	this.setGuides(guides);	×
277	await this.preLoadImage();	×
278	}
279	}
280
281	@proxify
282	async start({ firstLogin = false } = {}) {	×
283	// Start guides only when images are ready
284	this.setCarousel({	×
285	curIdx: 0,
286	entered: true,
287	playing: true,
288	firstLogin,
289	});
290	}
291
292	@computed((that: UserGuide) => [	×
293	that._deps.locale.ready,
294	that.allGuides[that._deps.brand.code],
295	that._deps.locale.currentLocale,
296	])
297	get guides() {
298	if (!this._deps.locale.ready) {	×
299	return [];	×
300	}
301	const brandGuides = this.allGuides[this._deps.brand.code];	×
302	if (brandGuides) {	×
303	const currentGuides = brandGuides[this._deps.locale.currentLocale];	×
304	if (currentGuides && currentGuides.length > 0) {	×
305	return currentGuides;	×
306	}
307	return brandGuides[SUPPORTED_LOCALES['en-US']] \|\| [];	×
308	}
309	return [];	×
310	}
311
312	get started() {
313	return this.carouselState.entered && this.carouselState.playing;	×
314	}
315	}

ringcentral / ringcentral-js-widgets / 4878562030

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous