Commit Graph

40 Commits

Author SHA1 Message Date
Chris Hill-Scott
7d1cf2169d Show text message sender in send one-off flow
If you’ve chosen a text message sender then it’s good to see
confirmation of your choice.

This replicates what we do when you choose an email reply-to address.
2017-11-16 16:43:44 +00:00
Chris Hill-Scott
e49693281a Right-align reply link in conversation view
So that it lines up with the outbpund messages.

Also the ‘send’ button is usually right-aligned when using Whatsapp,
iMessage, etc.
2017-10-24 12:00:51 +01:00
Chris Hill-Scott
085f5f9b22 Stick H1 at top of page on conversation view
You’ll quite often be landing half way down this page. So the context
afforded by being able to see the phone number gives you some
reassurance that you’ve landed in the right place.
2017-06-10 12:03:10 +01:00
Chris Hill-Scott
e7ed1c1cfe Line up linked message in viewport
We anchor link to the relevant message in a thread. Which is good, but
it leaves the messages hard against the top edge of the viewport. This
looks sloppy. So this commit:

- makes each message focusable
- shifts the focused message with CSS to sit away from the viewport
2017-06-10 12:03:10 +01:00
Chris Hill-Scott
f6d8e55579 Add two-way messaging view
> Once an inbound message has been received, there should be a way to
> see the other messages in the system from the same service to the same
> number. Both in and outbound. Nice inbox/whatsapp stylee view or some
> such. This way the context of the reply is understood.
>
> Initially will only see the outbound template, not the actual message,
> but we’re going to change this for the rest (soon), so that you can
> always see the full message for all outbound.
2017-06-10 12:03:10 +01:00
Chris Hill-Scott
47c55ccb2b Add tail to SMS message
Because:
- drawing things in CSS is fun
- when we have inbound messages, having a tail pointing the other way
  will help differentiate which messages are inbound
2017-05-24 16:14:02 +01:00
Chris Hill-Scott
217e975ae9 Clean up unused SCSS in SMS message component
Things we don’t do with SMS messages any more:
- put paragraphs in them (we use `<br>` tags instead, to allow for
  multiple linebreaks)
- pick them using radio buttons
- render the template’s name as part of the template
- render the phone number that the message will be sent from as part of
  the template
2017-05-24 14:18:23 +01:00
Chris Hill-Scott
80898e350e More tweaks to width of elements
- SMS message preview gets slightly wider so it lines up with a 4/8
  column
- Edit email box gets wider to match more closely the width of the
  previewed and delivered emails
2017-04-10 10:28:27 +01:00
Chris Hill-Scott
dfcfe6a91e Add multiple ‘edit’ links for letter templates
Letter templates have (or will have) multiple different editable
regions. I think that the most intuitive way for this to work is to have
- an edit link for each of these areas
- positioned next to the thing to be edited

Again, this isn’t fully hooked up, but since no-one is using letters
live yet this is a good way of getting research feedback and pointing
towards where we want the feature to go.

Uses percentages for the positioning so that the alignment is maintained
on mobile.
2017-03-20 11:45:27 +00:00
Chris Hill-Scott
18d11aa013 Move code for rendering messages/templates → utils
Utils is better structured to handle the logic of what thing to show
for what template type, especially now that what we show for different
template types in different contexts has diverged significantly.

See https://github.com/alphagov/notifications-utils/commit/6b39c1a for
an example of this code moving into utils

Depends on and implements:
https://github.com/alphagov/notifications-utils/pull/84

The main reason for doing this is to get Paul’s fix for the misaligned
CSV columns: https://github.com/alphagov/notifications-utils/pull/87
2016-12-05 12:11:54 +00:00
Chris Hill-Scott
225a61ddd3 Add a component for picking the time to send a job
Users need to pick a time in the next 24hrs, or send a file immediately.

Rationale for this is a bit lost in time-before-holiday, but generally:

‘Now’ and ‘later’ as the inital choices makes it really clear what
this feature is about conceptually.

The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-31 16:58:09 +01:00
Chris Hill-Scott
b84d06bd68 Move parameters out of the …_message components
This commit refactors the `email_message` and `sms_message` UI components to
take fewer parameters.

`name`, `edit_link` and anything to do with versions are identical for both
text and email messages so I’ve moved them to the pages where you choose a
template or see the versions.

This commit also tidies up the wording and styling of the template history
stuff.
2016-05-27 11:08:40 +01:00
Chris Hill-Scott
c41944080c Make the tour interactive
_The code for this is quite hacky and light on tests. But I’d really like to get
it in the app for the research tomorrow to see how well the feature works._

This commit changes the tour from being a set of static screens to some help
which guides you through the process of sending your first test message.

The theory behind this is that what users are really struggling with is the
concept of a variable, rather than the relationship between the placeholders and
the column headers. And like learning to program, the best way to learn is by
taking an example and modifying it to your own needs.

This means that when someone adds their first service we set them up an
example email template and an example text message template. Then there is a
guided, three step process where _all_ the user can do is send a test message to
themselves.

Once the message is sent, the user still has the example templates which they
can edit, rather than having to remember what they’re supposed to be doing.
2016-05-25 13:14:09 +01:00
Chris Hill-Scott
45f21e9a10 Hide ‘created at…’ on the templates page
I don’t think that if there’s only one version of the template that it’s
useful to see the created at date.

The auditing stuff only becomes relevant once someone a template has been
changed.
2016-05-24 09:22:12 +01:00
Nicholas Staples
83f25cd89b Beautify the template version links and template link page. 2016-05-20 13:58:16 +01:00
Chris Hill-Scott
6917e11207 Make ‘send emails/text messages’ link bold
It:
- makes this whole block of links slightly more prominent
- reinforces that ‘send’ is the primary action
2016-05-05 08:58:13 +01:00
Chris Hill-Scott
9d37040d49 Add recipient to message previews
When previewing a template on the send page, having the recipient appear
as a placeholder should help reinforce the relationship between the
columns in the CSV and the placeholders.

Then, when previewing a message, having the template populated with the
first recipient’s email address/phone number should reinforce that
relationship again.
2016-05-05 08:45:29 +01:00
Chris Hill-Scott
27ad1532e4 Make the flow of using templates better
For users who:
- want to send messages from a template
- want to edit templates

For developers:
- who need to get the ID of a template

This commit mainly cleans up the choose template page so there are less
options, and the options that are there are less wordy.

This means:
- moving ‘send yourself a test’ onto the send messages page, and making
  it button
- stripping a lot of stuff out of the ‘send from API’ page, so it’s more
  obvious what the template ID is
2016-04-19 15:31:19 +01:00
Chris Hill-Scott
5dfbd267ce Wrap long words in SMS template previews
If you put, for example, a URL in an SMS template it can be very long.
This can cause it to overflow its container. This commit forces it to
wrap instead.

Related: https://github.com/alphagov/notifications-admin/pull/439
2016-04-15 15:11:44 +01:00
Chris Hill-Scott
c81b8c39f6 Add view for a single template
> At the moment, we have an all email templates page, and an edit an
> individual page.
>
> This gets messy when we refer to templates like the dashboard and the
> activity views. We solve this currently by using anchor links to the
> list page, but this is clunky.
>
> So lets add it, then update the links on the dash and activity to the
> new view page.
>
> Should be a link from the view a single template page, to the template
> hub page.

https://www.pivotaltracker.com/story/show/117349227
2016-04-13 13:41:53 +01:00
Chris Hill-Scott
3a5b76ce2a Truncate previews of email messages to ~3 lines
Emails can get very long.

When you’re trying to do other things on the page this results in a lot
of scrolling.

This commit truncates email messages to about 3 lines, and adds a JS
toggle which reveal the full contents of the email.
2016-04-11 17:24:22 +01:00
Chris Hill-Scott
6bfb7914e2 Respect linebreaks in templates
If a user puts a linebreak in an SMS template then the recipient will
see these linebreaks on their phone. So when we show a preview of an SMS
template, it should have linebreaks in it.
2016-04-11 17:20:25 +01:00
Chris Hill-Scott
8e7b0edc4d Add page explaining how to send template using API
Would like to test something like this and see how well it works.

Intention of having this page is so:
- template IDs are discoverable (https://www.pivotaltracker.com/story/show/115404593)
- it’s obvious there’s an ‘automated’ way to send messages, as well as the CSV
  way (we’ve seen people oblivious to this in research)
2016-03-15 07:11:01 +00:00
Chris Hill-Scott
bc1899e8c0 Make email pattern work in new context
The email pattern looked a bit shonky when displayed in a narrower column. This
commit fixes it by making the email’s metadata (eg subject, from) into a table,
which it sort of is. This means that it is more flexible about the size of
container in which it sits.
2016-02-24 09:23:38 +00:00
Chris Hill-Scott
73deae9bff Preview service name when adding a new service
This commit adds a new page, which appears after a user enters the name for
their new service. It shows how the service name will appear in emails and
text messages.

This means that the new service is not created until after they have confirmed
that the name is appropriate in context.

This has also involved:
- visual changes to the ‘email template’ pattern, which wasn’t very refined
  before
- removing a bunch of words from the enter service name page, because most users
  don’t read them, and we reckon that showing a preview is a better way of
  getting them to understand what is meant by service name

Still to do:
- validating the the generated email address for a service is unique (on the
  API) side
- having the API return the generated email address, rather than determining it
  in the admin app
2016-02-19 16:38:46 +00:00
Chris Hill-Scott
eec56c2778 Add flow for sending yourself a text message
This commit adds a shortcut, which (in the background) does the creation and
uploading of a CSV file for you.

This enables users to send themselves a test message without having to fiddle
about with CSV files.
2016-02-18 15:59:57 +00:00
Chris Hill-Scott
3f365058ef Fix problems found by SASS Lint 2016-02-08 12:02:22 +00:00
Chris Hill-Scott
a7d6d85d8b Make first page of ‘send texts’ use links not form
This doesn’t need to be a form—it’s not changing any data.

And having the primary action on the page as ‘Use this template’ it makes it
clear what the page is for.
2016-02-04 14:13:57 +00:00
Chris Hill-Scott
396f8415c6 SKIRMISH MODE 2016-01-22 14:51:01 +00:00
Chris Hill-Scott
482abb97d5 Put message previews on ‘Send SMS’ page
A previous commit removed these to differentiate between this page and the
manage templates page. It turns out that we do want previews on this page
because:
- the users for the two pages might be different—they might only be allowed to
  do one or the other depending what permissions they have
- it’s useful to see what the placeholders in the message are before uploading
  a CSV, to make sure the CSV has the correct column headings

This commit re-adds the message preview with a simpler UI. Discussed with
@antimega and we both agreed that the speech bubble tails on the messages should
go.
2016-01-20 13:12:20 +00:00
Chris Hill-Scott
75c92c12c1 Add a prototype email template
If the templates page contains text messages and emails then there’s two ways it
could be structured:
- into two sections, all text messages first, then all emails
- emails and text messages interleaved, sorted by date

I think the second one is better. Imagine a situation where you mostly do emails
but have a few text messages. You’d have to scroll past the text messages to get
to your emails. Every time.

I reckon that the most commonly accessed templates will be the most recent ones.
2016-01-14 10:59:51 +00:00
Chris Hill-Scott
c7f635be4a Add some SMS messages to the choose template page 2016-01-14 10:55:30 +00:00
Chris Hill-Scott
85b0b4af21 Replace message_status component with banner
Message status was almost identical to banner, visually and semantically.
This consolidates the two into one component.

This means adding an extra parameter which controls whether or not the banner
has a tick (with and without a tick are the only two variations currently).
2016-01-11 14:27:31 +00:00
Chris Hill-Scott
450c7aaeaa Remove log of activity from single notification
Having the full history of the message is more information than is necessary.
We should only show what stage the message is at, and the time that it reached
that stage.

We can do research later on to find out if users understand or care about the
different stages.
2016-01-05 13:31:54 +00:00
Chris Hill-Scott
d4a03a40c8 Add message history 2016-01-05 13:31:54 +00:00
Chris Hill-Scott
aa0663cad8 Add messages to the current job’s history
This mocks out a data structure for a job’s messages, and renders this data:
- on the notification page, as a table, which links through to…
- …the page for an indidivual message
2016-01-05 13:31:53 +00:00
Chris Hill-Scott
d2562889b8 Replace CSV preview with rendered messages
If there are less than 7 messages, show them all.

If there are more than 7, show the first and last three, and a link to the
remaining x.
2015-12-11 14:02:42 +00:00
Chris Hill-Scott
4c14e273c2 Try out previewing messages 2015-12-11 12:02:21 +00:00
Chris Hill-Scott
64f03bed06 Make labels blocks, put next to message templates 2015-12-11 11:39:52 +00:00
Chris Hill-Scott
1f39a0fe61 Hard code some data in the Python
This commit adds some stubbed data for the pages. The structure of the data
is just a proposal, but it gives the templates something to work with for now.
2015-12-11 09:48:59 +00:00