@cuemath/web-utils 0.0.1-beta.0 → 0.0.1-beta.2

package/src/date-time-helper/index.ts

@@ -0,0 +1,363 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import {
+  shorthandWeekDayArray,
+  monthArray,
+  TWENTY_FOUR_HOURS_IN_SECONDS,
+  HOUR_FORMAT,
+} from '../constants/date-time';
+import { timezones } from '../constants/date-time/e-cna-international-timezones';
+
+type Timestamp = number;
+
+export interface DateSlots {
+  key: number;
+  label: string;
+  subLabel: string;
+  disabled: boolean;
+}
+
+export const formatDateTime = (
+  dateTime: string | number | Date | dayjs.Dayjs | null | undefined,
+  format: string | undefined,
+) => {
+  const momentDate = dayjs(dateTime);
+
+  return momentDate.format(format);
+};
+
+export function getCurrentTimestamp(): number {
+  if (!Date.now) {
+    Date.now = () => new Date().getTime();
+  }
+
+  return Math.floor(Date.now() / 1000);
+}
+
+export function dateTimeByTimezone(timestamp: Timestamp, timezone?: string) {
+  let options = {};
+
+  if (timezone) {
+    options = {
+      timeZone: timezone,
+    };
+  }
+
+  return new Date(timestamp).toLocaleString('en-US', options);
+}
+
+export function dateByTimezone(timestamp: number, timezone: string, format: string) {
+  const datetime = dateTimeByTimezone(timestamp, timezone);
+
+  return dayjs(datetime).format(format || 'mm/dd/yyyy');
+}
+
+export const dateByTimestamp = (timestamp: Timestamp, format: string) => {
+  const datetime = new Date(timestamp).toLocaleString('en-US');
+
+  return dayjs(datetime).format(format || 'mm/dd/yyyy');
+};
+
+export function convertTimeStampToSeconds(timeStamp: Timestamp) {
+  const demoTimeStamp = timeStamp;
+  const currentTimeStamp = getCurrentTimestamp();
+
+  if (Number.isNaN(demoTimeStamp) || Number.isNaN(currentTimeStamp)) {
+    return timeStamp;
+  }
+
+  const demoTimeStampLength = String(demoTimeStamp).length;
+  const currentTimeStampLength = String(currentTimeStamp).length;
+
+  return demoTimeStampLength > currentTimeStampLength ? timeStamp / 1000 : timeStamp;
+}
+
+export function formatTimestamp(datetime: Timestamp, format: string | undefined) {
+  const timeStamp = convertTimeStampToSeconds(datetime);
+
+  return dayjs.unix(timeStamp).format(format);
+}
+
+export function getTimezone() {
+  return Intl?.DateTimeFormat().resolvedOptions().timeZone;
+}
+
+export function timeToX(
+  datetime: string | number | Date | dayjs.Dayjs | null | undefined,
+) {
+  dayjs.extend(relativeTime);
+
+  return dayjs().to(datetime, true);
+}
+
+export function getCurrentDatebyTimezone(timezone: string) {
+  let options = {};
+
+  if (timezone) {
+    options = {
+      timeZone: timezone,
+    };
+  }
+
+  return new Date().toLocaleString('en-US', options);
+}
+
+export function getTimeDiff(
+  date1: string | number | Date | dayjs.Dayjs | null | undefined,
+  date2: string | number | Date | dayjs.Dayjs | null | undefined,
+) {
+  const dateTime1 = dayjs(date1);
+  const dateTime2 = dayjs(date2);
+
+  return {
+    days: dateTime1.diff(dateTime2, 'days'),
+    hour: dateTime1.diff(dateTime2, 'hour'),
+    minute: dateTime1.diff(dateTime2, 'minute'),
+    seconds: dateTime1.diff(dateTime2, 'seconds'),
+    distance: dateTime1.diff(dateTime2),
+  };
+}
+
+// function roundTime(time: Date) {
+//   time.setHours(time.getHours() + Math.round(time.getMinutes() / 60));
+//   time.setMinutes(0, 0, 0);
+// }
+
+// function getTimeString(increment: number, time: Date, timezone: string) {
+//   const value = dateByTimezone(time, timezone, 'hh:mm a');
+
+//   time.setTime(time.getTime() + increment * 60 * 1000);
+
+//   return value;
+// }
+
+// export function getSlotsTillNextDay(interval: number, timezone: string) {
+//   const today = new Date();
+//   const curr = new Date();
+
+//   roundTime(today);
+//   roundTime(curr);
+
+//   const slots = [];
+
+//   while (getTimeDiff(today, curr).days !== -1) {
+//     slots.push({
+//       id: curr.getTime(),
+//       value: getTimeString(interval, curr, timezone),
+//     });
+//   }
+
+//   return slots;
+// }
+
+export function getISOTimeString(demoTs: number) {
+  return new Date(demoTs * 1000).toISOString().replace(/-|:|\.\d\d\d/g, '');
+}
+
+export function getDateAfterDays(days: number) {
+  return formatDateTime(dayjs().add(days, 'day'), 'D MMM, YYYY').toUpperCase();
+}
+
+// function convertTZ(date: string | number | Date, tzString: any){
+//   return new Date(
+//     (typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', {
+//       timeZone: tzString,
+//     }),
+//   );
+// }
+
+// export function getUtcTimestamp(timeZone: any, date: string) {
+//   const time = convertTZ(date, timeZone);
+
+//   const parsedDate = Date.parse(time);
+
+//   return parsedDate / 1000;
+// }
+
+export const convertedTimezone = (selectedTimezone: string) => {
+  const formattedTimezone = timezones?.filter(
+    currentTimezone => currentTimezone?.id === selectedTimezone,
+  );
+
+  if (formattedTimezone?.length) {
+    return formattedTimezone[0]?.value;
+  }
+
+  return selectedTimezone?.replaceAll('_', ' ');
+};
+
+export const getHourInTwelveHourFormat = (hour: number) => {
+  return hour % 12 === 0 ? 12 : hour % 12;
+};
+
+export const getMeridiemAccordingToHourAndHourFormat = (
+  hour: number,
+  hourFormat: number,
+  meridiem = '',
+) => {
+  if (hourFormat === HOUR_FORMAT.TWENTY_FOUR_HOUR_FORMAT) {
+    return hour / 12 >= 1 ? 'PM' : 'AM';
+  }
+
+  return hour === 12 ? 'PM' : meridiem;
+};
+
+export const getTimeSlotDuration = (selectedTime: number, selectedTimezone: any) => {
+  const firstHour = getHourInTwelveHourFormat(selectedTime);
+  const firstMeridiem = getMeridiemAccordingToHourAndHourFormat(
+    selectedTime,
+    HOUR_FORMAT.TWENTY_FOUR_HOUR_FORMAT,
+  );
+
+  const secondHour = getHourInTwelveHourFormat(selectedTime + 1);
+  const secondMeridiem = getMeridiemAccordingToHourAndHourFormat(
+    selectedTime + 1,
+    HOUR_FORMAT.TWENTY_FOUR_HOUR_FORMAT,
+  );
+  const currentTimeZone =
+    convertedTimezone(selectedTimezone)?.split('(') || selectedTimezone;
+
+  return `${firstHour} ${firstMeridiem.toLowerCase()} - ${secondHour} ${secondMeridiem.toLowerCase()} (${currentTimeZone})`;
+};
+
+export const convertSecondsToMiliseconds = (seconds: number) => {
+  return seconds * 1000;
+};
+
+// convert date into Sept 01, Thursday format
+export const convertDate = (selectedDate: number, selectedTimezone: string) => {
+  const slotDate = formatTimestamp(selectedDate, 'DD-MM-YYYY');
+  const dayOfWeek = dateByTimezone(selectedDate * 1000, selectedTimezone, 'dddd');
+  const dateArr = slotDate?.split('-');
+  const month = dateArr?.[1];
+  const day = dateArr?.[0];
+
+  return `${monthArray[parseInt(month, 10) - 1]} ${day}, ${dayOfWeek}`;
+};
+
+export const getModifiedDateSlots = (dateSlotsData: { label: string }[]) => {
+  const startWeekIndex = shorthandWeekDayArray?.indexOf(dateSlotsData?.[0]?.label);
+
+  // get all days
+  let weekDays: { label: string; removeBorder?: boolean }[] = [];
+
+  // while loop to check start date's day
+  // for eg: if first date is wednesday, it will add blank days on monday, tuesday
+  while (weekDays.length !== startWeekIndex) {
+    weekDays.push({
+      label: '',
+      removeBorder: false,
+    });
+  }
+  weekDays = [...weekDays, ...dateSlotsData];
+
+  // while loop to add check end date
+  // for eg: if last date end's on friday, it will add blank days on saturday and sunday
+  while (weekDays.length % 7 !== 0) {
+    weekDays.push({
+      label: '',
+      removeBorder: false,
+    });
+  }
+  const weekRows = [];
+
+  // divide weekDays in weeks group
+  while (weekDays.length !== 0) {
+    const row =
+      weekDays?.length >= 7
+        ? weekDays?.splice(0, 7)
+        : weekDays?.splice(0, weekDays?.length);
+
+    weekRows.push(row);
+  }
+
+  return weekRows;
+};
+
+// Array of 7 days
+export const getDates = (timezone: string) => {
+  const currentDate = Date.parse(getCurrentDatebyTimezone(timezone)) / 1000;
+  const dates = [];
+
+  // getting dates by adding 86400 seconds(24 hours)
+  for (let i = 0; i < 7; i++) {
+    dates.push({
+      futureDate: currentDate + TWENTY_FOUR_HOURS_IN_SECONDS * i,
+      disabled: !(i > 1),
+    });
+  }
+
+  return dates;
+};
+
+export function formatDateFromTimestamp(
+  timestamp: string | number | Date,
+  format: string,
+) {
+  const datetime = new Date(timestamp).toLocaleString('en-US');
+
+  return dayjs(datetime).format(format || 'mm/dd/yyyy');
+}
+
+export function getAvailableDateSlots(currentTimezone: any) {
+  const availableDateSlots: DateSlots[] = [];
+
+  getDates(currentTimezone).map(item => {
+    const { futureDate, disabled } = item;
+
+    availableDateSlots.push({
+      key: futureDate,
+      label: formatDateFromTimestamp(futureDate * 1000, 'dd'),
+      subLabel: formatDateFromTimestamp(futureDate * 1000, 'DD'),
+      disabled,
+    });
+
+    return null;
+  });
+
+  return availableDateSlots;
+}
+
+export const toTimestamp = (strDate: string) => {
+  return Date.parse(strDate) / 1000;
+};
+
+export const getDateSlots = (timezone: any) => {
+  return getDates(timezone).map(item => {
+    const { futureDate, disabled } = item;
+
+    return {
+      key: futureDate,
+      label: dateByTimestamp(futureDate * 1000, 'dd'),
+      subLabel: dateByTimestamp(futureDate * 1000, 'DD'),
+      disabled,
+    };
+  });
+};
+
+// export const getUtcUnixTimestamp = (date: number, time: any, timezone: any) => {
+//   const formatDate = formatTimestamp(date, 'MM/DD/YYYY');
+//   const convertedDatTime = dateTimeByTimezone(
+//     toTimestamp(`${formatDate} ${time}`) * 1000
+//   );
+
+//   return getUtcTimestamp(timezone, convertedDatTime);
+// };
+
+export const getTimeSlotDurationForSlotPage = (selectedTime: string) => {
+  const timeArr = selectedTime.split(':');
+  const firstHour = timeArr?.[0];
+  const meridiem = timeArr?.[1]?.split(' ')?.[1];
+
+  const secondHourInTwelveHourFormat = parseInt(firstHour, 10) + 1;
+  const secondHour = getHourInTwelveHourFormat(secondHourInTwelveHourFormat);
+  const secondMeridiem = getMeridiemAccordingToHourAndHourFormat(
+    secondHourInTwelveHourFormat,
+    HOUR_FORMAT.TWELVE_HOUR_FORMAT,
+    meridiem,
+  );
+
+  return `${firstHour} ${meridiem.toLowerCase()} - ${secondHour} ${secondMeridiem.toLowerCase()}`;
+};

package/src/e-cna/flow/aggregator.ts

@@ -0,0 +1,6 @@
+import { DEFAULT_FLOW } from './variants';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getFlow = (flow: string) => {
+  return DEFAULT_FLOW;
+};

package/src/e-cna/flow/index.ts

@@ -0,0 +1 @@
+export * from './aggregator';

package/src/e-cna/flow/variants/default.ts

@@ -0,0 +1,40 @@
+import {
+  intro,
+  grade,
+  key_need_l1,
+  key_need_l2,
+  math_perception,
+  school_performance_5_12,
+  school_performance_kg_4,
+  child_hobbies,
+  child_personality,
+  key_need_l3,
+  other_curriculum,
+  secondary_needs,
+  signup_refer,
+  signup,
+  slot_pick,
+} from '../../slides';
+
+export const DEFAULT_FLOW = {
+  intro: intro.DEFAULT,
+  grade: grade.DEFAULT,
+  math_perception: math_perception.DEFAULT,
+  school_performance_5_12: school_performance_5_12.DEFAULT,
+  school_performance_kg_4: school_performance_kg_4.DEFAULT,
+  key_need_l1: key_need_l1.DEFAULT,
+  strong_math_foundation: key_need_l2.STRONG_MATH_FOUNDATION,
+  mental_math: key_need_l2.MENTAL_MATH,
+  learning_gaps: key_need_l2.LEARNING_GAPS,
+  more_practice: key_need_l2.MORE_PRACTICE,
+  develop_interest: key_need_l2.DEVELOP_INTEREST,
+  advanced_and_competitive_maths: key_need_l2.ADVANCE_AND_COMPETITIVE_MATHS,
+  key_need_l3: key_need_l3.DEFAULT,
+  secondary_needs: secondary_needs.DEFAULT,
+  child_personality: child_personality.DEFAULT,
+  child_hobbies: child_hobbies.DEFAULT,
+  slot_pick: slot_pick.DEFAULT,
+  parent_student_details: signup.DEFAULT,
+  other_curriculum: other_curriculum.DEFAULT,
+  signup_refer: signup_refer.DEFAULT,
+};

package/src/e-cna/flow/variants/index.ts

@@ -0,0 +1 @@
+export * from './default';

package/src/e-cna/index.ts

@@ -0,0 +1,264 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ASSESSMENT_ID, CUE_COUNTRY_CODE_KEY, SLIDE_TYPES } from '../constants';
+import { getCookie } from '../cookie';
+import { getTimezone, dateByTimezone, getCurrentTimestamp } from '../date-time-helper';
+
+// interface Timezone {
+//   id: string;
+//   value: string;
+//   meta: string;
+// }
+
+const showCallModalURL: string[] = [
+  SLIDE_TYPES.INTRO,
+  SLIDE_TYPES.QUESTION,
+  SLIDE_TYPES.SLOT_PICK,
+  SLIDE_TYPES.PARENT_STUDENT_DETAILS,
+];
+const ignoreCallModalURL: string[] = ['otp_enabled'];
+const ECNA = '#/e-cna/';
+
+export const timeSlots = {
+  now: 'Now',
+  anytime: 'Anytime',
+  today: 'Today',
+  tomorrow: 'Tomorrow',
+};
+
+export const ecnaSlideTypeName = {
+  CLASS_CONFIRMED: SLIDE_TYPES.CLASS_CONFIRMED,
+};
+
+export const getSlideDetails = (path: string) => {
+  const hash = path?.split('#')[1] || '';
+  const href = hash?.split('/') || [];
+
+  const slideType = href?.[2];
+  let slideId: string | number = href?.[3];
+
+  if (slideType === ecnaSlideTypeName.CLASS_CONFIRMED) {
+    slideId = 16;
+  }
+
+  if (slideId === 'curriculum') {
+    slideId = 17;
+  }
+
+  return {
+    slideType,
+    slideId,
+  };
+};
+
+export function handleModalClose(
+  path: string,
+  // actions: any
+) {
+  // const { slideType, slideId } = getSlideDetails(path);
+
+  //   parentAnalytics.ecnaModalClosed(
+  //     slideType === SLIDE_TYPES.QUESTION ? questionsData[slideId]?.questionID : slideType,
+  //   );
+
+  if (!path) {
+    return 'close';
+  }
+
+  const filteredData = showCallModalURL.filter(key => path.includes(`${ECNA}${key}`));
+  const noCallfilteredData = ignoreCallModalURL.filter(key => path.includes(key));
+
+  if (filteredData.length && !noCallfilteredData.length) {
+    setTimeout(() => {
+      // const isMobileView = (window && window.innerWidth <= 767) || false;
+      // Router.pushRoute(`${ECNA}exit-parent/`);
+      // openEcnaModal({ actions, isMobileView });
+    }, 500);
+  } else {
+    // Router.pushRoute('#');
+  }
+
+  return 'close';
+}
+
+// export function openEcnaModal({ actions, isMobileView, type, id }): void {
+//   actions.openModal(
+//     'e-cna-form',
+//     {
+//       size: 'custom',
+//       width: '624px',
+//       height: isMobileView && window ? 'auto' : '548px',
+//       style: {
+//         backgroundColor: `${COLORS.WILD_SAND}`,
+//         padding: '0px',
+//       },
+//       outSideCloseButton: true,
+//       blocking: !isMobileView,
+//       handleModalClose: (path, modalActions) => handleModalClose(path, modalActions),
+//       enableTransform: !isMobileView,
+//     },
+//     {
+//       type,
+//       id,
+//     },
+//   );
+// }
+
+// export const handleOpenEcnaModal = ({ actions, isMobileView, type, id }) => {
+//   openEcnaModal({ actions, isMobileView, type, id });
+// };
+
+const getTime = (baseTime: number, requiredTime: number) => {
+  return baseTime + requiredTime * 60 * 60;
+};
+
+const getTimeFormat = (reqtime: number, format = 'ha') => {
+  const timezone = getTimezone();
+
+  return dateByTimezone(reqtime, timezone, format);
+};
+
+const getTitle = (noOfDaysFromToday: number, requiredDay: number) => {
+  if (noOfDaysFromToday === 0) {
+    return timeSlots.today;
+  }
+
+  if (noOfDaysFromToday === 1) {
+    return timeSlots.tomorrow;
+  }
+
+  const timezone = getTimezone();
+
+  return dateByTimezone(requiredDay, timezone, 'DD/MM/YYYY');
+};
+
+export const getSlots = (noOfDaysFromToday = 0, slotDetails = []) => {
+  const dateCon = new Date();
+  const requiredDay = dateCon.setDate(dateCon.getDate() + noOfDaysFromToday);
+
+  dateCon.setHours(0, 0, 0, 0); // making time 12am
+  const baseTime = dateCon.getTime() / 1000;
+  const currentTime = getCurrentTimestamp();
+
+  const tabSlots = slotDetails?.map(({ from, to, custom }) => {
+    // 'Now' slot condition. Keeping it for future usage
+    // if (custom === timeSlots.now) {
+    //   return ({
+    //     key: custom,
+    //     label: custom,
+    //     slot: { from: currentTime  }
+    //   })
+    // }
+
+    const anyTimeStamp = getTime(baseTime, 20); // 8pm timestamp. choosen randomly
+
+    if (custom === timeSlots.anytime) {
+      return {
+        key: anyTimeStamp,
+        label: custom,
+        slot: { from: '', to: anyTimeStamp },
+      };
+    }
+
+    const fromTime = getTime(baseTime, from);
+    const toTime = getTime(baseTime, to);
+    const fromTimeFormat = getTimeFormat(fromTime * 1000);
+    const toTimeFormat = getTimeFormat(toTime * 1000);
+    const isDisabled = currentTime - toTime > 0;
+
+    return {
+      key: `${fromTime}${toTime}`,
+      label: `${fromTimeFormat} - ${toTimeFormat}`,
+      disabled: isDisabled,
+      slot: { from: fromTime, to: toTime },
+    };
+  });
+
+  const data = { title: getTitle(noOfDaysFromToday, requiredDay), slots: tabSlots };
+
+  return data;
+};
+
+export const getOrigin = () => {
+  const { origin = '' } =
+    typeof window !== 'undefined' && window.location ? window.location : {};
+
+  return origin;
+};
+
+export const getQueryField = (asPath: string, field: string) => {
+  let searchParams: any = asPath?.split('?') || [];
+
+  searchParams = searchParams.length > 2 ? searchParams[2] : searchParams[1];
+  const params = new URLSearchParams(searchParams);
+
+  return params.get(field) || '';
+};
+
+// export const FadeIn = keyframes`
+//   from {
+//     opacity: 0;
+//     transform: translateX(480px);
+
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translateX(0);
+//   }
+// `;
+
+export const getCounsellorSpelling = () => {
+  const cueCountryCode = getCookie('cue_country_code');
+
+  return cueCountryCode === 'US' ? 'Counselor' : 'Counsellor';
+};
+
+// export const uniqueTimeZones  = [
+//   ...new Map(timezones.map(item => [item.value, item])).values(),
+// ];
+
+// export let countrySpecificTimezones = uniqueTimeZones.filter(uniqueTimezone => {
+//   const countryCode = getCookie('cue_country_code');
+
+//   if (countryCode) {
+//     return countryTimezones?.countries?.[getCookie('cue_country_code')]?.zones?.find(
+//       countryTimezone => {
+//         return countryTimezone === uniqueTimezone?.id;
+//       },
+//     );
+//   }
+
+//   return uniqueTimezone;
+// });
+
+export const sendFieldEventToWebengage = (label: string | number, value: any) => {
+  if (getCookie(ASSESSMENT_ID)) {
+    const field: { [key: string]: [value: string] } = {};
+
+    field[label] = value;
+    // parentAnalytics.signupFieldFilled(field);
+  }
+};
+
+export const isOtpRequired = (cueCountryCode: string) => {
+  const noOtpCountrycodes = ['AU', 'NZ', 'SG'];
+
+  return !(noOtpCountrycodes.findIndex(key => key === cueCountryCode) > -1);
+};
+
+export const getUrlWithoutHash = (asPath: string) => {
+  return asPath?.includes('#') ? asPath.split('#')[0] : asPath;
+};
+
+export const showLaptopQuestion = () => {
+  const cueCountryCode = getCookie(CUE_COUNTRY_CODE_KEY);
+
+  return cueCountryCode === 'IN';
+};
+
+export const nonROWCountries: string[] = ['IN', 'US', 'CA'];
+
+export const isROWCountry = (countryCode: string) => {
+  return !nonROWCountries.includes(countryCode);
+};
+
+export * from './flow';

package/src/e-cna/slides/child_hobbies/index.ts

@@ -0,0 +1 @@
+export * from './variants';

package/src/e-cna/slides/child_hobbies/variants.ts

@@ -0,0 +1,13 @@
+export const child_hobbies = {
+  DEFAULT: {
+    id: 15,
+    questionID: 'child_hobbies',
+    type: 'freeFlowingText',
+    question: 'What do they enjoy doing outside of school?',
+    description:
+      'Tell us what your child has fun doing and has shown strong interests in.',
+    questionUUID: 'ea6a29f3-c6b6-4932-b606-e828070fd6fe',
+    placeholderText: 'Loves reading fiction novels, Harry Potter is the favourite',
+    nextSlide: 'slot_pick',
+  },
+};

package/src/e-cna/slides/child_personality/index.ts

@@ -0,0 +1 @@
+export * from './variants';