Files
chatwoot/app/javascript/widget/composables/useAvailability.js
Sivin Varghese 6ca38e10e9 feat: Migrate availability mixins to composable and helper (#11596)
# Pull Request Template

## Description

**This PR includes:**

* Refactored two legacy mixins (`availability.js`,
`nextAvailability.js`) into a Vue 3 composable (`useAvailability`),
helper module and component based rendering logic.
* Fixed an issue where the widget wouldn't load if business hours were
enabled but all days were unchecked.
* Fixed translation issue
[[#11280](https://github.com/chatwoot/chatwoot/issues/11280)](https://github.com/chatwoot/chatwoot/issues/11280).
* Reduced code complexity and size.
* Added test coverage for both the composable and helper functions.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/2bc3ed694b4349419505e275d14d0b98?sid=22d585e4-0dc7-4242-bcb6-e3edc16e3aee

### Story
<img width="995" height="442" alt="image"
src="https://github.com/user-attachments/assets/d6340738-07db-41d5-86fa-a8ecf734cc70"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules


Fixes https://github.com/chatwoot/chatwoot/issues/12012

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2025-08-22 00:43:34 +05:30

70 lines
1.9 KiB
JavaScript

import { computed, toRef } from 'vue';
import {
isOnline as checkIsOnline,
isInWorkingHours as checkInWorkingHours,
} from 'widget/helpers/availabilityHelpers';
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
const DEFAULT_TIMEZONE = 'UTC';
const DEFAULT_REPLY_TIME = 'in_a_few_minutes';
/**
* Composable for availability-related logic
* @param {Ref|Array} agents - Available agents (can be ref or raw array)
* @returns {Object} Availability utilities and computed properties
*/
export function useAvailability(agents = []) {
const availableAgents = toRef(agents);
const channelConfig = computed(() => window.chatwootWebChannel || {});
const inboxConfig = computed(() => ({
workingHours: channelConfig.value.workingHours?.map(useCamelCase) || [],
workingHoursEnabled: channelConfig.value.workingHoursEnabled || false,
timezone: channelConfig.value.timezone || DEFAULT_TIMEZONE,
utcOffset:
channelConfig.value.utcOffset ||
channelConfig.value.timezone ||
DEFAULT_TIMEZONE,
replyTime: channelConfig.value.replyTime || DEFAULT_REPLY_TIME,
}));
const currentTime = computed(() => new Date());
const hasOnlineAgents = computed(() => {
const agentList = availableAgents.value || [];
return Array.isArray(agentList) ? agentList.length > 0 : false;
});
const isInWorkingHours = computed(() =>
checkInWorkingHours(
currentTime.value,
inboxConfig.value.utcOffset,
inboxConfig.value.workingHours
)
);
// Check if online (considering both working hours and agents)
const isOnline = computed(() =>
checkIsOnline(
inboxConfig.value.workingHoursEnabled,
currentTime.value,
inboxConfig.value.utcOffset,
inboxConfig.value.workingHours,
hasOnlineAgents.value
)
);
return {
channelConfig,
inboxConfig,
currentTime,
availableAgents,
hasOnlineAgents,
isOnline,
isInWorkingHours,
};
}