Skip to content

Commit ff64cb0

Browse files
cizil-keyvaluecizil-keyvalue
authored
fix: Bug fix in style and verification
1 parent cf58d21 commit ff64cb0

22 files changed

+45029
-5647
lines changed

‎README.md‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ Below are optional props available for the inbox component:
6969
| Prop | Description | Type | Default value |
7070
|------|-------------|-------|---------------|
7171
| theme | Object for custom themes | Theme | {} |
72+
| customStyles | Object for custom styling | CustomStyle | {} |
7273
| loadMoreLabel | Text shown on the load more component | string | "Load More" |
7374
| hideBadge | Toggle to hide or show the badge | boolean | false |
7475
| darkMode | Toggle to enable dark mode | boolean | false |
@@ -114,6 +115,7 @@ Below are optional slots available for the inbox component:
114115
| listEmptyComponent | Custom Empty list component |
115116
| customCard | Custom notification card component |
116117
| customFooter | Custom footer component |
118+
| notificationIcon | Custom notification icon component |
117119

118120
## 3. Customization
119121

@@ -145,14 +147,10 @@ type ThemeProps = {
145147
color?: string,
146148
textColor?: string,
147149
},
148-
window?: {
149-
borderColor?: string,
150-
},
151150
windowHeader?: {
152151
background?: string,
153152
titleColor?: string,
154153
headerActionColor?: string,
155-
borderColor?: string,
156154
},
157155
windowContainer?: {
158156
background?: string,
@@ -204,7 +202,7 @@ Please note that the badgeStyle, window shadow and border props are only applica
204202
titleFontWeight?: TextStyle["fontWeight"],
205203
titleSize?: number,
206204
subtitleFontWeight?: TextStyle['fontWeight'],
207-
subtitleSize?: number
205+
subtitleSize?: number,
208206
descriptionFontWeight?: TextStyle['fontWeight'],
209207
descriptionSize?: number,
210208
dateSize?: number,
@@ -221,10 +219,7 @@ Please note that the badgeStyle, window shadow and border props are only applica
221219
},
222220
deleteIcon?:{
223221
size?: number,
224-
}
225-
dateIcon?:{
226-
size?: number,
227-
}
222+
},
228223
timerIcon?: {
229224
size?: number,
230225
},

‎src/components/NotificationCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
</div>
3030
</div>
3131
<div class="siren-sdk-delete-button" @click="handleDelete" @keydown="handleDelete" data-testid="delete-notification-button" v-if="!cardProps?.hideDelete">
32-
<CloseIcon :fill="styles?.deleteIcon?.color" :size="String(styles?.deleteIcon?.size)" />
32+
<CloseIcon :stroke="styles?.deleteIcon?.color" :size="String(styles?.deleteIcon?.size)" />
3333
</div>
3434
</div>
3535
</template>

‎src/components/NotificationIcon.vue‎

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,15 @@
11
<template>
2-
<div
3-
class="siren-sdk-notification-icon-container"
4-
:onClick="handleNotification"
5-
data-testid="notification-icon-container"
6-
>
7-
<slot name="notification-icon">
8-
<BellIcon
9-
:size="String(styles.notificationIcon.size)"
10-
:stroke=" darkMode
11-
? COLORS.dark.notificationIcon
12-
: COLORS.light.notificationIcon" />
2+
<div class="siren-sdk-notification-icon-container" :onClick="handleNotification"
3+
data-testid="notification-icon-container">
4+
<slot name="notificationIcon">
5+
<BellIcon :size="String(styles.notificationIcon.size)" :stroke="darkMode
6+
? COLORS.dark.notificationIcon
7+
: COLORS.light.notificationIcon" />
138
</slot>
14-
<div
15-
v-if="!hideBadge"
16-
class="siren-sdk-notificationIcon-badge-container"
17-
:style="
18-
badgeType === BadgeType.DEFAULT && unViewedCount > 0
19-
? styles.badgeStyle
20-
: {
21-
width: 0,
22-
height: 0,
23-
overflow: 'hidden',
24-
}
25-
"
26-
>
9+
<div v-if="!hideBadge && unViewedCount > 0" class="siren-sdk-notificationIcon-badge-container" :style="!isModalOpen && styles.badgeStyle
10+
">
2711
<div :style="styles.badgeTextStyle">
28-
{{ unViewedCount > 99 ? "99+" : unViewedCount }}
12+
{{ unViewedCount > MAXIMUM_UNVIEWED_COUNT_SHOWN ? `${MAXIMUM_UNVIEWED_COUNT_SHOWN}+` : unViewedCount }}
2913
</div>
3014
</div>
3115
</div>
@@ -46,22 +30,22 @@ import PubSub from 'pubsub-js';
4630
4731
import type { SirenStyleProps } from '../types';
4832
import {
49-
BadgeType,
5033
EventType,
5134
eventTypes,
5235
events,
53-
COLORS
36+
COLORS,
37+
MAXIMUM_UNVIEWED_COUNT_SHOWN
5438
} from '../utils/constants';
5539
import BellIcon from './BellIcon.vue';
5640
5741
import '../styles/icon.css';
5842
5943
const props = defineProps<{
6044
handleNotification: (event: any) => void;
61-
badgeType: BadgeType;
6245
darkMode: boolean;
6346
styles: SirenStyleProps;
6447
hideBadge: boolean;
48+
isModalOpen: boolean;
6549
}>();
6650
6751
const siren: Ref<Siren> = inject('siren') as Ref<Siren>;
@@ -79,18 +63,18 @@ const notificationCountSubscriber = async (
7963
};
8064
8165
const cleanUp = () => {
82-
siren.value?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
66+
siren?.value?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
8367
};
8468
8569
const startRealTimeDataFetch = () => {
8670
cleanUp();
87-
siren.value?.startRealTimeFetch({ eventType: EventType.UNVIEWED_COUNT });
71+
siren?.value?.startRealTimeFetch({ eventType: EventType.UNVIEWED_COUNT });
8872
};
8973
9074
const getUnViewedCount = async (): Promise<void> => {
91-
if (!siren.value) return;
75+
if (!siren?.value) return;
9276
try {
93-
const response = await siren.value?.fetchUnviewedNotificationsCount();
77+
const response = await siren?.value?.fetchUnviewedNotificationsCount();
9478
9579
startRealTimeDataFetch();
9680
if (response && response.error) return;
@@ -114,9 +98,10 @@ onMounted(() => {
11498
});
11599
116100
watch(
117-
() => siren.value,
101+
() => siren?.value,
118102
() => {
119-
if (!props.hideBadge) getUnViewedCount();
103+
// Check isModalOpen in case of multiple validations of token
104+
if (!props.hideBadge && !props.isModalOpen) getUnViewedCount();
120105
},
121106
{ immediate: true }
122107
);

‎src/components/SirenInbox.vue‎

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
<template>
2-
<div :class="!windowViewOnly && 'siren-sdk-inbox-container'" ref="notificationRef" data-testid="siren-inbox-container">
3-
<div v-if="!windowViewOnly" ref="iconRef" data-testid="siren-inbox-icon">
4-
<NotificationIcon :handleNotification="handleNotification"
5-
:badgeType="showNotifications ? BadgeType.NONE : BadgeType.DEFAULT"
6-
:darkMode="darkMode" :styles="styles" :hideBadge="hideBadge" />
7-
</div>
8-
<div v-if="showNotifications || windowViewOnly" :style="{
2+
<div :class="windowViewOnly ? 'siren-sdk-window-container' : 'siren-sdk-inbox-container'" ref="notificationRef"
3+
data-testid="siren-inbox-container">
4+
<div v-if="!windowViewOnly" ref="iconRef" data-testid="siren-inbox-icon">
5+
<NotificationIcon :handleNotification="handleNotification"
6+
:darkMode="darkMode" :styles="styles"
7+
:hideBadge="hideBadge" :isModalOpen="isModalOpen">
8+
<template #notificationIcon>
9+
<slot name="notificationIcon" />
10+
</template>
11+
</NotificationIcon>
12+
</div>
13+
<div v-if="isModalOpen || windowViewOnly" :style="{
914
...styles.container,
1015
...(!windowViewOnly && styles.windowShadow),
1116
width:
@@ -15,48 +20,41 @@
1520
position: windowViewOnly ? 'initial' : 'absolute',
1621
...modalPosition,
1722
}">
18-
<SirenPanel :styles="styles"
19-
:itemsPerFetch="itemsPerFetch"
20-
:hideBadge="hideBadge"
21-
:headerProps="headerProps ?? defaultHeaderProps"
22-
:onCardClick="onCardClick"
23-
:onError="onError"
24-
:darkMode="darkMode"
25-
:windowViewOnly="windowViewOnly"
26-
:showNotifications="showNotifications"
27-
:hideClearAll="headerProps?.hideClearAll ?? false"
28-
:loadMoreLabel="loadMoreLabel"
29-
:cardProps="cardProps ?? defaultCardProps"
30-
:modalWidth="updatedModalWidth">
31-
<template #loadMoreComponent>
32-
<slot name="loadMoreComponent" />
33-
</template>
34-
<template #customHeader>
35-
<slot name="customHeader" />
36-
</template>
37-
<template #customLoader>
38-
<slot name="customLoader" />
39-
</template>
40-
<template #customErrorWindow>
41-
<slot name="customErrorWindow" />
42-
</template>
43-
<template #listEmptyComponent>
44-
<slot name="listEmptyComponent" />
45-
</template>
46-
<template #customCard="{ item }">
47-
<slot name="customCard" :item="item" />
48-
</template>
49-
<template #customFooter>
50-
<slot name="customFooter" />
51-
</template>
52-
</SirenPanel>
53-
</div>
23+
<SirenPanel :styles="styles" :itemsPerFetch="itemsPerFetch" :hideBadge="hideBadge"
24+
:headerProps="headerProps ?? defaultHeaderProps"
25+
:onCardClick="onCardClick" :onError="onError"
26+
:darkMode="darkMode" :windowViewOnly="windowViewOnly" :isModalOpen="isModalOpen"
27+
:hideClearAll="headerProps?.hideClearAll ?? false" :loadMoreLabel="loadMoreLabel"
28+
:cardProps="cardProps ?? defaultCardProps" :modalWidth="updatedModalWidth">
29+
<template #loadMoreComponent>
30+
<slot name="loadMoreComponent" />
31+
</template>
32+
<template #customHeader>
33+
<slot name="customHeader" />
34+
</template>
35+
<template #customLoader>
36+
<slot name="customLoader" />
37+
</template>
38+
<template #customErrorWindow>
39+
<slot name="customErrorWindow" />
40+
</template>
41+
<template #listEmptyComponent>
42+
<slot name="listEmptyComponent" />
43+
</template>
44+
<template #customCard="{ item }">
45+
<slot name="customCard" :item="item" />
46+
</template>
47+
<template #customFooter>
48+
<slot name="customFooter" />
49+
</template>
50+
</SirenPanel>
5451
</div>
52+
</div>
5553
</template>
5654

5755
<script setup lang="ts">
5856
import type {
59-
Ref
57+
Ref
6058
} from 'vue';
6159
import {
6260
ref,
@@ -74,10 +72,9 @@ import type { SirenProps } from '../types';
7472
import { applyTheme, calculateModalPosition, calculateModalWidth, debounce } from '../utils/commonUtils';
7573
import {
7674
ThemeMode,
77-
BadgeType,
7875
DEFAULT_WINDOW_TITLE,
7976
DEFAULT_NOTIFICATION_FETCH_COUNT,
80-
EventType
77+
EventType
8178
} from '../utils/constants';
8279
import SirenPanel from './SirenPanel.vue';
8380
import NotificationIcon from './NotificationIcon.vue';
@@ -103,7 +100,7 @@ const defaultCardProps = { hideAvatar: false, showMedia: false };
103100
104101
const notificationRef = ref<HTMLElement | null>(null);
105102
const iconRef = ref<HTMLElement | null>(null);
106-
const showNotifications = ref<boolean>(false);
103+
const isModalOpen = ref<boolean>(false);
107104
const modalPosition = ref<{
108105
right?: string;
109106
left?: string;
@@ -126,11 +123,11 @@ const styles = computed(() =>
126123
127124
const handleNotification = (event: any) => {
128125
event.preventDefault();
129-
showNotifications.value = !showNotifications.value;
126+
isModalOpen.value = !isModalOpen.value;
130127
};
131128
132129
const closeNotification = () => {
133-
showNotifications.value = false;
130+
isModalOpen.value = false;
134131
};
135132
136133
const handleOutsideClick = (event: MouseEvent) => {
@@ -168,8 +165,8 @@ onMounted(() => {
168165
window.addEventListener('resize', debouncedUpdate);
169166
});
170167
171-
watch(showNotifications, () => {
172-
if (showNotifications.value)
168+
watch(isModalOpen, () => {
169+
if (isModalOpen.value)
173170
document.addEventListener('click', handleOutsideClick);
174171
else document.removeEventListener('click', handleOutsideClick);
175172
});

‎src/components/SirenPanel.vue‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div :class="windowViewOnly ? 'siren-sdk-panel-container' : 'siren-sdk-panel-modal'
3-
" :style="panelStyle"
4-
data-testid="siren-panel-container">
3+
" :style="{ ...panelStyle, ...(!windowViewOnly && styles.windowShadow) }" data-testid="siren-panel-container">
54
<slot name="customHeader" v-if="!headerProps?.hideHeader">
65
<HeaderComponent :title="headerProps?.title ?? DEFAULT_WINDOW_TITLE"
76
:enableClearAll="!isEmptyArray(notificationsContent) && !isLoading"
@@ -37,9 +36,8 @@
3736
<div v-for="notification in notificationsContent" :key="notification?.id">
3837
<slot name="customCard" :item="notification">
3938
<NotificationCard :notification="notification"
40-
:cardProps="cardProps"
41-
:onCardClick="onCardClick" :deleteById="deleteNotificationById"
42-
:styles="styles" :darkMode="darkMode" />
39+
:cardProps="cardProps" :onCardClick="onCardClick"
40+
:deleteById="deleteNotificationById" :styles="styles" :darkMode="darkMode" />
4341
</slot>
4442
</div>
4543
</div>
@@ -63,7 +61,8 @@
6361

6462
<script setup lang="ts">
6563
import type {
66-
Ref } from 'vue';
64+
Ref
65+
} from 'vue';
6766
import {
6867
computed,
6968
defineProps,
@@ -325,12 +324,12 @@ onBeforeUnmount(() => {
325324
});
326325
327326
watch(() => props.modalWidth, () => {
328-
panelStyle = {
329-
...(!props.windowViewOnly && props.styles.windowTopBorder),
330-
...(!props.windowViewOnly && { width: `${props.modalWidth}` }),
331-
...(!props.windowViewOnly && props.styles.windowBottomBorder),
332-
...props.styles.container
333-
};
327+
panelStyle = {
328+
...(!props.windowViewOnly && props.styles.windowTopBorder),
329+
...(!props.windowViewOnly && { width: `${props.modalWidth}` }),
330+
...(!props.windowViewOnly && props.styles.windowBottomBorder),
331+
...props.styles.container
332+
};
334333
}, { immediate: true });
335334
336335
watch(
@@ -355,11 +354,11 @@ watch(
355354
watch(
356355
[() => siren.value, () => verificationStatus.value],
357356
() => {
358-
if (siren.value && verificationStatus.value !== VerificationStatus.PENDING) {
357+
if (siren.value && verificationStatus.value === VerificationStatus.SUCCESS) {
359358
if (!props.hideBadge) siren.value?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
360359
fetchNotifications(true);
361360
}
362-
if (!siren.value && isLoading.value) {
361+
if (verificationStatus.value === VerificationStatus.FAILED) {
363362
isLoading.value = false;
364363
if (props.onError)
365364
props.onError(errorMap.INVALID_CREDENTIALS);

0 commit comments

Comments
 (0)