Skip to content

Commit 0a1dbf8

Browse files
denengineerdenengineer
committed
feat: add announcements feature
1 parent 83b5a70 commit 0a1dbf8

File tree

5 files changed

+322
-11
lines changed

5 files changed

+322
-11
lines changed

‎app/sources/src/scenes/Payments/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const Wrapper = props => {
2525
payments.get.run();
2626
ui.getLiveChat.run();
2727
info.get.run();
28+
info.getSkippedAnnouncements.run();
2829

2930
const polling = setInterval(() => {
3031
payments.get.run();

‎app/sources/src/scenes/Payments/styles.js

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
Support as SupportRaw,
2424
ShareLink,
2525
Tip,
26+
Div,
2627
} from 'components/common';
2728

2829
import BalanceSummaryRaw from 'components/BalanceSummary';
@@ -236,11 +237,12 @@ export const Maintenance = styled(MessageRaw)`
236237
margin-bottom: -3.5em;
237238
background: var(--colors__bg_warn);
238239
font-weight: 400;
240+
z-index: 10;
239241
& * {
240242
word-break: break-word;
241243
}
242244
& > ${Span} {
243-
font-weight: 600 !important;;
245+
font-weight: 600 !important;
244246
padding: 0 !important;
245247
}
246248
& > ${Tip} {
@@ -252,6 +254,46 @@ export const Maintenance = styled(MessageRaw)`
252254
}
253255
`;
254256

257+
export const Announcement = styled(Maintenance)`
258+
z-index: 9;
259+
background: var(--colors__bg_darkenbright);
260+
display: flex;
261+
flex-direction: row;
262+
justify-content: flex-start;
263+
align-items: flex-start;
264+
margin-right: 1.3em;
265+
padding: 1.3em;
266+
267+
& ${Div} {
268+
display: flex;
269+
flex-direction: column;
270+
align-items: flex-start;
271+
text-align: initial;
272+
}
273+
& ${Div} ${Div} {
274+
align-items: center;
275+
}
276+
& ${Img} {
277+
height: 5em;
278+
border-radius: 50%;
279+
margin-right: 1.2em;
280+
}
281+
& ${Span} {
282+
padding-top: 0!important;
283+
padding-bottom: 0.35em!important;
284+
}
285+
& ${Button} {
286+
margin-top: 1.3em;
287+
}
288+
& ${Button}:last-child {
289+
margin-top: 0.4em;
290+
font-size: 0.8em;
291+
text-decoration: underline;
292+
color: gray;
293+
font-weight: 500;
294+
}
295+
`;
296+
255297
export const Root = withLoader(styled.div`
256298
display: flex;
257299
flex-direction: column;
@@ -279,6 +321,10 @@ export const Root = withLoader(styled.div`
279321
width: calc(100vw - 4rem);
280322
}
281323
324+
${Maintenance} + ${Announcement} {
325+
margin-top: 3.5em;
326+
}
327+
282328
${({ empty }) =>
283329
empty &&
284330
`& > ${EmptyWrapper} {

‎app/sources/src/scenes/Payments/view.js

Lines changed: 205 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,7 @@ import {
3232
Separator,
3333
HeaderSecondary,
3434
Logo,
35-
Legend,
36-
LegendItem,
35+
Div,
3736
Message,
3837
PayButton,
3938
Img,
@@ -44,6 +43,7 @@ import {
4443
CloseIcon,
4544
ShareLink,
4645
Maintenance,
46+
Announcement,
4747
Tip,
4848
} from './styles';
4949

@@ -140,7 +140,10 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
140140
<Settings to="/settings" />
141141
<Support unreadCounter={LiveChatUnread} className="openIntercom" />
142142
</Header>
143-
{info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance' && info.get.data.status.message ? (
143+
{info.get.data &&
144+
info.get.data.status &&
145+
info.get.data.status.type === 'maintenance' &&
146+
info.get.data.status.message ? (
144147
<Maintenance>
145148
<Span>{info.get.data.status.message.split('\n')[0]}</Span>
146149
{info.get.data.status.message
@@ -149,12 +152,58 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
149152
.join('\n')}
150153
</Maintenance>
151154
) : null}
155+
{info.get.data &&
156+
info.get.data.announcements &&
157+
info.get.data.announcements.message &&
158+
(!info.getSkippedAnnouncements.data ||
159+
!info.getSkippedAnnouncements.data.includes(info.get.data.announcements.anuid)) ? (
160+
<Announcement>
161+
{info.get.data.announcements.attachements &&
162+
info.get.data.announcements.attachements.imageUrl ? (
163+
<Img src={info.get.data.announcements.attachements.imageUrl} />
164+
) : null}
165+
<Div>
166+
<Span>{info.get.data.announcements.message.split('\n')[0]}</Span>
167+
{info.get.data.announcements.message
168+
.split('\n')
169+
.slice(1)
170+
.join('\n')}
171+
<Div>
172+
{info.get.data.announcements.attachements &&
173+
info.get.data.announcements.attachements.cta ? (
174+
<Button
175+
primary
176+
onClick={() => {
177+
info.engageInAnnouncement.run(info.get.data.announcements.anuid);
178+
window.open(info.get.data.announcements.attachements.ctaLink);
179+
}}
180+
>
181+
{info.get.data.announcements.attachements.cta}
182+
</Button>
183+
) : null}
184+
{info.get.data.announcements.attachements &&
185+
info.get.data.announcements.attachements.skipButton ? (
186+
<Button
187+
link
188+
onClick={() => {
189+
info.skipAnnouncement.run(info.get.data.announcements.anuid);
190+
}}
191+
>
192+
{info.get.data.announcements.attachements.skipButton}
193+
</Button>
194+
) : null}
195+
</Div>
196+
</Div>
197+
</Announcement>
198+
) : null}
152199
<BalanceSummary key="BalanceSummary" accounts={accounts} />
153200
{/* <HeaderSecondary>Payments</HeaderSecondary> */}
154201
<PayButton
155202
id="payButton"
156203
to={totalBalance === 0 ? '/payments/receive/check' : '/payments/check'}
157-
disabled={info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'}
204+
disabled={
205+
info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'
206+
}
158207
>
159208
{/* <Img src={newPaymentIcon} /> */}
160209
<Span>{totalBalance === 0 ? 'Receive funds' : 'Pay'}</Span>
@@ -177,7 +226,10 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
177226
<Settings to="/settings" />
178227
<Support unreadCounter={LiveChatUnread} className="openIntercom" />
179228
</Header>
180-
{info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance' && info.get.data.status.message ? (
229+
{info.get.data &&
230+
info.get.data.status &&
231+
info.get.data.status.type === 'maintenance' &&
232+
info.get.data.status.message ? (
181233
<Maintenance>
182234
<Span>{info.get.data.status.message.split('\n')[0]}</Span>
183235
{info.get.data.status.message
@@ -186,12 +238,58 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
186238
.join('\n')}
187239
</Maintenance>
188240
) : null}
241+
{info.get.data &&
242+
info.get.data.announcements &&
243+
info.get.data.announcements.message &&
244+
(!info.getSkippedAnnouncements.data ||
245+
!info.getSkippedAnnouncements.data.includes(info.get.data.announcements.anuid)) ? (
246+
<Announcement>
247+
{info.get.data.announcements.attachements &&
248+
info.get.data.announcements.attachements.imageUrl ? (
249+
<Img src={info.get.data.announcements.attachements.imageUrl} />
250+
) : null}
251+
<Div>
252+
<Span>{info.get.data.announcements.message.split('\n')[0]}</Span>
253+
{info.get.data.announcements.message
254+
.split('\n')
255+
.slice(1)
256+
.join('\n')}
257+
<Div>
258+
{info.get.data.announcements.attachements &&
259+
info.get.data.announcements.attachements.cta ? (
260+
<Button
261+
primary
262+
onClick={() => {
263+
info.engageInAnnouncement.run(info.get.data.announcements.anuid);
264+
window.open(info.get.data.announcements.attachements.ctaLink);
265+
}}
266+
>
267+
{info.get.data.announcements.attachements.cta}
268+
</Button>
269+
) : null}
270+
{info.get.data.announcements.attachements &&
271+
info.get.data.announcements.attachements.skipButton ? (
272+
<Button
273+
link
274+
onClick={() => {
275+
info.skipAnnouncement.run(info.get.data.announcements.anuid);
276+
}}
277+
>
278+
{info.get.data.announcements.attachements.skipButton}
279+
</Button>
280+
) : null}
281+
</Div>
282+
</Div>
283+
</Announcement>
284+
) : null}
189285
<BalanceSummary key="BalanceSummary" accounts={accounts} />
190286
{/* <HeaderSecondary>Payments</HeaderSecondary> */}
191287
<PayButton
192288
id="payButton"
193289
to={totalBalance === 0 ? '/payments/receive/check' : '/payments/check'}
194-
disabled={info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'}
290+
disabled={
291+
info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'
292+
}
195293
>
196294
{/* <Img src={newPaymentIcon} /> */}
197295
<Span>{totalBalance === 0 ? 'Receive funds' : 'Pay'}</Span>
@@ -214,7 +312,10 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
214312
<Settings to="/settings" />
215313
<Support unreadCounter={LiveChatUnread} className="openIntercom" />
216314
</Header>
217-
{info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance' && info.get.data.status.message ? (
315+
{info.get.data &&
316+
info.get.data.status &&
317+
info.get.data.status.type === 'maintenance' &&
318+
info.get.data.status.message ? (
218319
<Maintenance>
219320
<Span>{info.get.data.status.message.split('\n')[0]}</Span>
220321
{info.get.data.status.message
@@ -223,6 +324,50 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
223324
.join('\n')}
224325
</Maintenance>
225326
) : null}
327+
{info.get.data &&
328+
info.get.data.announcements &&
329+
info.get.data.announcements.message &&
330+
(!info.getSkippedAnnouncements.data ||
331+
!info.getSkippedAnnouncements.data.includes(info.get.data.announcements.anuid)) ? (
332+
<Announcement>
333+
{info.get.data.announcements.attachements &&
334+
info.get.data.announcements.attachements.imageUrl ? (
335+
<Img src={info.get.data.announcements.attachements.imageUrl} />
336+
) : null}
337+
<Div>
338+
<Span>{info.get.data.announcements.message.split('\n')[0]}</Span>
339+
{info.get.data.announcements.message
340+
.split('\n')
341+
.slice(1)
342+
.join('\n')}
343+
<Div>
344+
{info.get.data.announcements.attachements &&
345+
info.get.data.announcements.attachements.cta ? (
346+
<Button
347+
primary
348+
onClick={() => {
349+
info.engageInAnnouncement.run(info.get.data.announcements.anuid);
350+
window.open(info.get.data.announcements.attachements.ctaLink);
351+
}}
352+
>
353+
{info.get.data.announcements.attachements.cta}
354+
</Button>
355+
) : null}
356+
{info.get.data.announcements.attachements &&
357+
info.get.data.announcements.attachements.skipButton ? (
358+
<Button
359+
link
360+
onClick={() => {
361+
info.skipAnnouncement.run(info.get.data.announcements.anuid);
362+
}}
363+
>
364+
{info.get.data.announcements.attachements.skipButton}
365+
</Button>
366+
) : null}
367+
</Div>
368+
</Div>
369+
</Announcement>
370+
) : null}
226371
{accounts.get.data &&
227372
accounts.get.data.restrictions.unconfirmed &&
228373
accounts.get.data.restrictions.unconfirmed.value &&
@@ -245,7 +390,9 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
245390
<PayButton
246391
id="payButton"
247392
to={totalBalance === 0 ? '/payments/receive/check' : '/payments/check'}
248-
disabled={info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'}
393+
disabled={
394+
info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'
395+
}
249396
>
250397
{/* <Img src={newPaymentIcon} /> */}
251398
<Span>{totalBalance === 0 ? 'Receive funds' : 'Pay'}</Span>
@@ -321,7 +468,10 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
321468
<Settings to="/settings" />
322469
<Support unreadCounter={LiveChatUnread} className="openIntercom" />
323470
</Header>
324-
{info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance' && info.get.data.status.message ? (
471+
{info.get.data &&
472+
info.get.data.status &&
473+
info.get.data.status.type === 'maintenance' &&
474+
info.get.data.status.message ? (
325475
<Maintenance>
326476
<Span>{info.get.data.status.message.split('\n')[0]}</Span>
327477
{info.get.data.status.message
@@ -330,6 +480,49 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
330480
.join('\n')}
331481
</Maintenance>
332482
) : null}
483+
{info.get.data &&
484+
info.get.data.announcements &&
485+
info.get.data.announcements.message &&
486+
!info.getSkippedAnnouncements.data.includes(info.get.data.announcements.anuid) ? (
487+
<Announcement>
488+
{info.get.data.announcements.attachements &&
489+
info.get.data.announcements.attachements.imageUrl ? (
490+
<Img src={info.get.data.announcements.attachements.imageUrl} />
491+
) : null}
492+
<Div>
493+
<Span>{info.get.data.announcements.message.split('\n')[0]}</Span>
494+
{info.get.data.announcements.message
495+
.split('\n')
496+
.slice(1)
497+
.join('\n')}
498+
<Div>
499+
{info.get.data.announcements.attachements &&
500+
info.get.data.announcements.attachements.cta ? (
501+
<Button
502+
primary
503+
onClick={async () => {
504+
await info.engageInAnnouncement.run(info.get.data.announcements.anuid);
505+
window.open(info.get.data.announcements.attachements.ctaLink);
506+
}}
507+
>
508+
{info.get.data.announcements.attachements.cta}
509+
</Button>
510+
) : null}
511+
{info.get.data.announcements.attachements &&
512+
info.get.data.announcements.attachements.skipButton ? (
513+
<Button
514+
link
515+
onClick={() => {
516+
info.skipAnnouncement.run(info.get.data.announcements.anuid);
517+
}}
518+
>
519+
{info.get.data.announcements.attachements.skipButton}
520+
</Button>
521+
) : null}
522+
</Div>
523+
</Div>
524+
</Announcement>
525+
) : null}
333526
{accounts.get.data &&
334527
accounts.get.data.restrictions.unconfirmed &&
335528
accounts.get.data.restrictions.unconfirmed.value &&
@@ -389,7 +582,9 @@ const Payments = ({ settings, payments, accounts, ui, info, t }) => {
389582
<PayButton
390583
id="payButton"
391584
to={totalBalance === 0 ? '/payments/receive/check' : '/payments/check'}
392-
disabled={info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'}
585+
disabled={
586+
info.get.data && info.get.data.status && info.get.data.status.type === 'maintenance'
587+
}
393588
>
394589
{window.scrollY === 0 &&
395590
document.querySelector('.intercom-messenger-frame') === null &&

0 commit comments

Comments
 (0)