@webitel/ui-sdk 3.2.125 → 3.2.127

package/src/composables/useRepresentableAgentPauseCause/__tests__/useRepresentableAgentPauseCause.spec.js

@@ -0,0 +1,78 @@
+import {
+  useRepresentableAgentPauseCause,
+} from '../useRepresentableAgentPauseCause';
+
+let pauseCauses = [];
+
+describe('useRepresentableAgentPauseCause', () => {
+  beforeEach(() => {
+    pauseCauses = [{ durationMin: 10, limitMin: 12 }];
+  });
+
+  it('correctly computes duration', () => {
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].duration).toBe('00:10');
+  });
+  it('isOverflow with limit = 0 returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 0 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration < limit returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 15 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration > limit returns true', () => {
+    const pauseCauses = [{ durationMin: 15, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(true);
+  });
+
+  it('isOverflow with duration = limit returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+
+  it('correctly computes progressColor', () => {
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+
+  it('correctly computes progressColor with duration > limit', () => {
+    const pauseCauses = [{ durationMin: 15, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('danger');
+  });
+
+  it('correctly computes progressColor with duration < limit', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 15 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('success');
+  });
+
+it('correctly computes progressColor with duration = limit', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+});

package/src/composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js

@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+import convertDuration from '../../scripts/convertDuration';
+
+const prettifyPauseCauseDuration = (min) => {
+  const SEC_IN_MIN = 60;
+  const secDuration = convertDuration(min * SEC_IN_MIN);
+  return secDuration.slice(0, -3);
+};
+
+const isDurationOverflow = ({ durationMin, limitMin }) => {
+  return (durationMin > limitMin) && limitMin !== 0;
+};
+
+const duration = ({ durationMin, limitMin }) => {
+  return isDurationOverflow({ durationMin, limitMin })
+    ? `-${prettifyPauseCauseDuration(durationMin - limitMin)}`
+    : prettifyPauseCauseDuration(durationMin);
+};
+
+const pauseCauseProgressColor = ({ durationMin, limitMin }) => {
+  if (isDurationOverflow({ durationMin, limitMin })) return 'danger';
+  if (durationMin <= (limitMin * 0.75)) return 'success';
+  return 'primary';
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useRepresentableAgentPauseCause = (pauseCauses) => {
+  const representablePauseCause = computed(() => pauseCauses.map((pauseCause) => ({
+    ...pauseCause,
+    duration: duration(pauseCause),
+    progressColor: pauseCauseProgressColor(pauseCause),
+    isOverflow: isDurationOverflow(pauseCause),
+  })));
+
+  return { representablePauseCause };
+};

package/src/locale/en/en.js

@@ -340,5 +340,12 @@ export default {
     dummy: {
       text: 'There are no records yet',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Select a pause cause',
+        min: 'Min',
+        unlimited: 'Unlimited',
+      },
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -338,5 +338,12 @@ export default {
     dummy: {
       text: 'Записи в разделе еще не созданы',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Выберите причину паузы',
+        min: 'Мин',
+        unlimited: 'Безлимит',
+      },
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -338,5 +338,12 @@ export default {
     dummy: {
       text: 'Записи у розділі ще не створені',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Виберіть причину паузи',
+        min: 'Хв',
+        unlimited: 'Безліміт',
+      },
+    },
   },
 };