Get difference between local time and other time zone based time using Temporal or Luxon

getTimeBasedOnTimeZone.ts

<!-- Example -->
//const time = showTimeUsingTemporal ? 
//await this.getOfficeLocalTimeUsingTemporal(officeTimeZoneId) : 
//await this.getOfficeLocalTimeUsingLuxon(officeTimeZoneId);

<!-- Output  -->
<!-- officeTimeZoneId = 'Asia/Kolkata' -->
//🕙 14:32 (4h 30m ahead of you)

<!-- officeTimeZoneId = 'Europe/London' -->
//🕙 10:02 (Same time zone as you)

<!-- officeTimeZoneId = 'Europe/Lisbon' -->
//🕙 10:02 (Same time as you)

<!-- officeTimeZoneId = 'America/Los_Angeles' -->
//🕙 02:02 (8h behind you)

//* See - https://moment.github.io/luxon/#/?id=luxon
private async getOfficeLocalTimeUsingLuxon(officeTimeZoneId: string): Promise<string> {
  const luxon = await import(
    /* webpackChunkName: 'luxon' */
    'luxon'
  );
  try {
    const { DateTime } = luxon;
    const officeTime = DateTime.local().setZone(officeTimeZoneId);
    if (!officeTime.isValid) {
      return "";
    }

    const officeTimeToDisplay: string = `🕙 ${officeTime.toLocaleString(DateTime.TIME_SIMPLE)}`;
    const localTime = DateTime.local();
    if (localTime.zoneName === officeTimeZoneId) {
      return `${officeTimeToDisplay} (Same time zone as you)`;
    }

    const localTimeOffset: number = localTime.offset;
    const officeTimeOffset: number = officeTime.offset;
    return this.formatTimeUsingOffset(officeTimeToDisplay, officeTimeOffset - localTimeOffset);

  } catch (error) {
    console.error(error);
    return "";
  }
}

//* See - https://www.npmjs.com/package/@js-temporal/polyfill
private async getOfficeLocalTimeUsingTemporal(officeTimeZoneId: string): Promise<string> {
  const jstemporal = await import(
    /* webpackChunkName: 'jstemporal' */
    '@js-temporal/polyfill'
  );
  try {
    const { Temporal } = jstemporal;
    const now = Temporal.Now;
    const officeTime = now.zonedDateTimeISO(officeTimeZoneId);

    const officeTimeToDisplay: string = `🕙 ${String(officeTime.hour).padStart(2, '0')}:${String(officeTime.minute).padStart(2, '0')}`;
    const localTime = now.zonedDateTimeISO();
    if (localTime.timeZone.toString() === officeTimeZoneId) {
      return `${officeTimeToDisplay} (Same time zone as you)`;
    }

    const localTimeOffset = localTime.offsetNanoseconds / 1000000000 / 60;
    const officeTimeOffset = officeTime.offsetNanoseconds / 1000000000 / 60;

    return this.formatTimeUsingOffset(officeTimeToDisplay, officeTimeOffset - localTimeOffset);

  } catch (error) {
    console.error(error);
    return "";
  }
}

private formatTimeUsingOffset(time: string, offset: number): string {

  if (offset === 0) {
    return `${time} (Same time as you)`;
  }

  const offsetHours: number = Math.abs(offset / 60 ^ 0);
  const offsetMinutes: number = Math.abs(offset % 60);
  const offsetHoursString: string = offsetHours > 0 ? `${offsetHours}h` : '';
  const offsetMinutesString: string = offsetMinutes > 0 ? `${offsetMinutes}m` : '';
  let offsetSuffix: string = `${offsetHoursString} ${offsetMinutesString} ${offset > 0 ? 'ahead of' : 'behind'} you`;
  return `${time} (${offsetSuffix})`;
}

<!-- Example -->
//const time = showTimeUsingTemporal ? 
//await this.getOfficeLocalTimeUsingTemporal(officeTimeZoneId) : 
//await this.getOfficeLocalTimeUsingLuxon(officeTimeZoneId);

<!-- Output  -->
<!-- officeTimeZoneId = 'Asia/Kolkata' -->
//🕙 14:32 (4h 30m ahead of you)

<!-- officeTimeZoneId = 'Europe/London' -->
//🕙 10:02 (Same time zone as you)

<!-- officeTimeZoneId = 'Europe/Lisbon' -->
//🕙 10:02 (Same time as you)

<!-- officeTimeZoneId = 'America/Los_Angeles' -->
//🕙 02:02 (8h behind you)

<!-- Dependencies -->
//"@js-temporal/polyfill": "^0.4.0" (Will not be needed later)
//"luxon": "^2.3.1"