diff --git a/src/components/CustomPopup/CustomPopupModal.test.tsx b/src/components/CustomPopup/CustomPopupModal.spec.tsx
similarity index 75%
rename from src/components/CustomPopup/CustomPopupModal.test.tsx
rename to src/components/CustomPopup/CustomPopupModal.spec.tsx
index 8af7b85987f82d3ba36082e4eb9e7ebb0396929d..845c8722cc606e65cba16fefc2ef938b3af8aa3a 100644
--- a/src/components/CustomPopup/CustomPopupModal.test.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.spec.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
+import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
-import CustomPopupModal from './CustomPopupModal'
+import React from 'react'
import {
mockCustomPopup,
mockCustomPopupOff,
+ mockCustomPopupOutdated,
} from '../../../tests/__mocks__/customPopup.mock'
-import { Button } from '@material-ui/core'
+import CustomPopupModal from './CustomPopupModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -36,7 +37,7 @@ describe('CustomPopupModal component', () => {
expect(mockHandleClose).toHaveBeenCalled()
})
- it('should not be rendered', () => {
+ it('should not be rendered, popup not enabled', () => {
const wrapper = mount(
<CustomPopupModal
customPopup={mockCustomPopupOff}
@@ -45,4 +46,14 @@ describe('CustomPopupModal component', () => {
)
expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
})
+
+ it('should not be rendered, popup outdated', () => {
+ const wrapper = mount(
+ <CustomPopupModal
+ customPopup={mockCustomPopupOutdated}
+ handleCloseClick={mockHandleClose}
+ />
+ )
+ expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
+ })
})
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index f1504a4e65b7c48595e438774933b1f69b730e17..8e1d402d506314ea7fb28d9dae128e4fd7431e12 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -2,11 +2,11 @@ import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import IconButton from '@material-ui/core/IconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
-import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
import Speaker from 'assets/icons/ico/speaker.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
+import { DateTime } from 'luxon'
import { CustomPopup } from 'models/customPopup.model'
import React from 'react'
import './customPopupModal.scss'
@@ -21,9 +21,12 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
handleCloseClick,
}) => {
const { t } = useI18n()
+ const isPopupOutdated = () =>
+ DateTime.local() >= DateTime.fromISO(customPopup.endDate)
+
return (
<Dialog
- open={customPopup.popupEnabled}
+ open={customPopup.popupEnabled && !isPopupOutdated()}
disableEscapeKeyDown
onClose={(event, reason): void => {
event && reason !== 'backdropClick' && handleCloseClick()
@@ -31,7 +34,7 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
- paper: 'modal-paper',
+ paper: 'modal-paper customPopupRoot',
}}
>
<div id="accessibility-title">{customPopup.title}</div>
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
similarity index 98%
rename from src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap
rename to src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index 0871899eda032786ddedcbd4f5f8d8d843608212..bb492567614e5d308210feb46a05d3790acd9f93 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.test.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -5,6 +5,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
customPopup={
Object {
"description": "Interesting description",
+ "endDate": "2099-10-04T15:10:53.219+02:00",
"popupEnabled": true,
"title": "Bold title",
}
@@ -15,7 +16,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
aria-labelledby="accessibility-title"
classes={
Object {
- "paper": "modal-paper",
+ "paper": "modal-paper customPopupRoot",
"root": "modal-root",
}
}
@@ -28,7 +29,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
classes={
Object {
"container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
+ "paper": "MuiDialog-paper modal-paper customPopupRoot",
"paperFullScreen": "MuiDialog-paperFullScreen",
"paperFullWidth": "MuiDialog-paperFullWidth",
"paperScrollBody": "MuiDialog-paperScrollBody",
@@ -408,7 +409,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
>
<div
aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ class="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
role="dialog"
>
<div
@@ -642,13 +643,13 @@ exports[`CustomPopupModal component should render correctly 1`] = `
>
<WithStyles(ForwardRef(Paper))
aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ className="MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
elevation={24}
role="dialog"
>
<ForwardRef(Paper)
aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ className="MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
classes={
Object {
"elevation0": "MuiPaper-elevation0",
@@ -686,7 +687,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
>
<div
aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ className="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
role="dialog"
>
<div
diff --git a/src/components/CustomPopup/customPopupModal.scss b/src/components/CustomPopup/customPopupModal.scss
index 2646579c3519bf12eeb3e39d0816467cf14a2a3d..4262831b6a91356c8fe5424287429fac1a1fc638 100644
--- a/src/components/CustomPopup/customPopupModal.scss
+++ b/src/components/CustomPopup/customPopupModal.scss
@@ -1,9 +1,14 @@
@import '../../styles/base/typo-variables';
@import '../../styles/base/color';
+.customPopupRoot {
+ border: 1px solid $gold-euro;
+}
+
.customPopupModal {
padding: 1rem;
max-width: 20rem;
+
.warn-icon {
margin: 1rem auto;
display: block;
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index fc398862ab245bea80a494caa8d70fb49140a8ff..3937386c5031c25da7a6e8b6fafa1f12bf776c73 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -31,7 +31,6 @@ import {
import PartnersIssueModal from 'components/PartnersIssue/PartnersIssueModal'
import ProfileService from 'services/profile.service'
import { useClient } from 'cozy-client'
-import { DateTime } from 'luxon'
import ExpiredConsentModal from 'components/Connection/ExpiredConsentModal'
import CustomPopupModal from 'components/CustomPopup/CustomPopupModal'
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index 3ea8034eead93d39dd94aff726fd9149ab4e0f6b..a17087d6376bb8094dc9cf15eb50b62c5b0d6e92 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -261,38 +261,46 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
const today = getTodayDate().toISO()
- // Check customPopup from backoffice
- const customModalInfo = await customPopupService.getCustomPopup()
- if (customModalInfo && today !== profile?.customPopupDate.toISO()) {
- dispatch(setCustomPopup(customModalInfo))
+ try {
+ // Check customPopup from backoffice
+ const customModalInfo = await customPopupService.getCustomPopup()
+ if (customModalInfo && today !== profile?.customPopupDate.toISO()) {
+ dispatch(setCustomPopup(customModalInfo))
+ }
+ } catch (error) {
+ console.error('Error while checking customPopup informations')
}
- // Check partnersInfo from backoffice
- const partnersInfo: PartnersInfo | undefined =
- await partnersInfoService.getPartnersInfo()
+ try {
+ // Check partnersInfo from backoffice
+ const partnersInfo: PartnersInfo | undefined =
+ await partnersInfoService.getPartnersInfo()
- // If notification is activated and konnector is connected, set FluidStatus to PARTNER_ISSUE
- if (partnersInfo && partnersInfo.notification_activated) {
- const fluidService = new FluidService(client)
- const _updatedFluidStatus: FluidStatus[] =
- await fluidService.getFluidStatus(partnersInfo)
- let isConcernedByPartnerIssue = false
- for (const fluid of _updatedFluidStatus) {
- if (fluid.status === FluidState.PARTNER_ISSUE)
- isConcernedByPartnerIssue = true
- }
- dispatch(setFluidStatus(_updatedFluidStatus))
- /*
- * If the partnersIssueModal has not been seen today
- * and the user is concerned by any one of the partners' issue
- * enable the modal
- */
- if (
- today !== profile?.partnersIssueDate.toISO() &&
- isConcernedByPartnerIssue
- ) {
- dispatch(setPartnersIssue(true))
+ // If notification is activated and konnector is connected, set FluidStatus to PARTNER_ISSUE
+ if (partnersInfo && partnersInfo.notification_activated) {
+ const fluidService = new FluidService(client)
+ const _updatedFluidStatus: FluidStatus[] =
+ await fluidService.getFluidStatus(partnersInfo)
+ let isConcernedByPartnerIssue = false
+ for (const fluid of _updatedFluidStatus) {
+ if (fluid.status === FluidState.PARTNER_ISSUE)
+ isConcernedByPartnerIssue = true
+ }
+ dispatch(setFluidStatus(_updatedFluidStatus))
+ /*
+ * If the partnersIssueModal has not been seen today
+ * and the user is concerned by any one of the partners' issue
+ * enable the modal
+ */
+ if (
+ today !== profile?.partnersIssueDate.toISO() &&
+ isConcernedByPartnerIssue
+ ) {
+ dispatch(setPartnersIssue(true))
+ }
}
+ } catch (error) {
+ console.error('Error while fetching partners informations')
}
if (subscribed) {
diff --git a/src/models/customPopup.model.ts b/src/models/customPopup.model.ts
index 2d9784562a9fd1764a50290693e0ce2026bbe51d..be4016d18ddf56b0b5b0700482ee14e15edbc8c9 100644
--- a/src/models/customPopup.model.ts
+++ b/src/models/customPopup.model.ts
@@ -2,4 +2,5 @@ export interface CustomPopup {
popupEnabled: boolean
description: string
title: string
+ endDate: string
}
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index b53334afcc1db5a83ce896cecdd02dd706592d6d..ed06067df8c0d8dd47eb15042d6a4eda5546a9ea 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -19,6 +19,7 @@ $gold: #b2901b;
$gold-40: rgba(227, 184, 42, 0.4);
$gold-light: #deaf0e;
$gold-shadow: #e3b82a;
+$gold-euro: #f1c017;
/** ORANGE **/
$orange: #ec9d41;
diff --git a/tests/__mocks__/customPopup.mock.ts b/tests/__mocks__/customPopup.mock.ts
index c72db4dce6cfbf34bf24c8aeadb9f72ece020c13..6576af638fc9d3cdf80094416d55b37722bc3c63 100644
--- a/tests/__mocks__/customPopup.mock.ts
+++ b/tests/__mocks__/customPopup.mock.ts
@@ -4,10 +4,19 @@ export const mockCustomPopup: CustomPopup = {
popupEnabled: true,
title: 'Bold title',
description: 'Interesting description',
+ endDate: '2099-10-04T15:10:53.219+02:00',
}
export const mockCustomPopupOff: CustomPopup = {
popupEnabled: false,
title: '',
description: '',
+ endDate: '2099-10-04T15:10:53.219+02:00',
+}
+
+export const mockCustomPopupOutdated: CustomPopup = {
+ popupEnabled: true,
+ title: 'Hello',
+ description: 'Friend',
+ endDate: '2000-10-04T15:10:53.219+02:00',
}