Implemented:added current browser timezone support in timezonemodal

[SuyashSingh01]

Related Issues

Related Issue: Dxp-371
Issue Link: hotwax/dxp-components#371

Short Description and Why It's Useful

Improved and added the current timezone support in the setting page and timezonemodal.

Screenshots of Visual Changes before/after (If There Are Any)

Contribution and Currently Important Rules Acceptance

• I read and followed contribution rules

[dt2patel]

@gemini-code-assist review

[gemini-code-assist]

Code Review

The pull request introduces the display of the browser's time zone in the TimezoneModal and Settings components, enhancing the user experience by providing immediate context of their current time zone. It also includes the functionality to display the current time for selected time zones. The code changes are well-structured and improve the usability of the application. However, there are some areas where improvements can be made to enhance code clarity and efficiency.

[gemini-code-assist]

It is recommended to use const instead of let for variables that are not reassigned after initialization. This improves code readability and helps prevent accidental reassignments.

const timeZones = computed(() => userStore.getTimeZones)

const timeZones = computed(() => userStore.getTimeZones)

[gemini-code-assist]

The optional chaining operator ?. is used after the find method. While this prevents errors if no matching time zone is found, it might be better to provide a default label in case timeZones.value is empty or the find method returns undefined. This will ensure that the UI always displays a valid label, even if it's a placeholder.

browserTimeZone.value.label = timeZones.value.find((timeZone: any) => timeZone.id.toLowerCase().match(browserTimeZone.value.id.toLowerCase()))?.label || 'N/A';

browserTimeZone.value.label = timeZones.value.find((timeZone: any) => timeZone.id.toLowerCase().match(browserTimeZone.value.id.toLowerCase()))?.label || 'N/A';

[gemini-code-assist]

This filtering logic could be simplified by combining the conditions into a single filter operation. This reduces redundancy and makes the code more readable.

filteredTimeZones.value = filteredTimeZones.value.filter((timeZone: any) => !props.showBrowserTimeZone || !timeZone.id.toLowerCase().match(browserTimeZone.value.id.toLowerCase()));

filteredTimeZones.value = filteredTimeZones.value.filter((timeZone: any) => !props.showBrowserTimeZone || !timeZone.id.toLowerCase().match(browserTimeZone.value.id.toLowerCase()));