a tool for shared writing and social publishing
Feature/sms rsvps (#116)
* add sms rsvps!
* fix copy
authored by
Jared Pereira
and committed by
GitHub
8f065a54
7706a3a5
+49
-25
+27
-15
actions/phone_auth/request_phone_auth_token.ts
+27
-15
actions/phone_auth/request_phone_auth_token.ts
···
6
6
import { phone_number_auth_tokens } from "drizzle/schema";
7
7
import twilio from "twilio";
8
8
9
-
async function sendAuthCode(phoneNumber: string, code: string) {
10
-
if (process.env.NODE_ENV === "development") {
11
-
console.log(`[auth code for ${phoneNumber}:`, code, "]");
12
-
return;
13
-
}
9
+
async function sendAuthCode({
10
+
country_code,
11
+
phone_number,
12
+
code,
13
+
}: {
14
+
country_code: string;
15
+
phone_number: string;
16
+
code: string;
17
+
}) {
18
+
let phoneNumber = `+${country_code}${phone_number}`;
14
19
const accountSid = process.env.TWILIO_ACCOUNT_SID;
15
20
const authToken = process.env.TWILIO_AUTH_TOKEN;
16
21
const client = twilio(accountSid, authToken);
17
-
18
-
const message = await client.messages.create({
19
-
contentSid: "HX5ebfae4d2a423808486e773e8a22488d",
20
-
contentVariables: JSON.stringify({ 1: code }),
21
-
from: "whatsapp:+18449523391",
22
-
messagingServiceSid: "MGffbf9a66770350b25caf3b80b9aac481",
23
-
to: `whatsapp:${phoneNumber}`,
24
-
});
25
-
console.log(message.body);
22
+
if (country_code === "1") {
23
+
const message = await client.messages.create({
24
+
body: `${code} is your verification code`,
25
+
from: `+18449523391`,
26
+
to: phoneNumber,
27
+
});
28
+
console.log(message);
29
+
} else {
30
+
const message = await client.messages.create({
31
+
contentSid: "HX5ebfae4d2a423808486e773e8a22488d",
32
+
contentVariables: JSON.stringify({ 1: code }),
33
+
from: "whatsapp:+18449523391",
34
+
messagingServiceSid: "MGffbf9a66770350b25caf3b80b9aac481",
35
+
to: `whatsapp:${phoneNumber}`,
36
+
});
37
+
}
26
38
}
27
39
28
40
export async function createPhoneAuthToken({
···
49
61
id: phone_number_auth_tokens.id,
50
62
});
51
63
52
-
await sendAuthCode(`+${country_code}${phone_number}`, code);
64
+
await sendAuthCode({ country_code, phone_number, code });
53
65
54
66
client.end();
55
67
return token.id;
+6
-3
actions/sendUpdateToRSVPS.ts
+6
-3
actions/sendUpdateToRSVPS.ts
···
57
57
const client = twilio(accountSid, authToken);
58
58
59
59
for (let rsvp of rsvps) {
60
-
if (sendto[rsvp.phone_rsvps_to_entity.status])
60
+
if (sendto[rsvp.phone_rsvps_to_entity.status]) {
61
+
let { country_code, phone_number } = rsvp.phone_rsvps_to_entity;
62
+
let number = `+${country_code}${phone_number}`;
61
63
await client.messages.create({
62
64
contentSid: "HX8e1217f791d38fa4cf7b7b24a02fe10c",
63
65
contentVariables: JSON.stringify({
···
65
67
2: message,
66
68
3: `https://leaflet.pub/${publicLeafletID}`,
67
69
}),
68
-
from: "whatsapp:+18449523391",
70
+
from: `${country_code === "1" ? "" : "whatsapp:"}+18449523391`,
69
71
messagingServiceSid: "MGffbf9a66770350b25caf3b80b9aac481",
70
-
to: `whatsapp:${rsvp.phone_rsvps_to_entity.phone_number}`,
72
+
to: country_code === "1" ? number : `whatsapp:${number}`,
71
73
});
74
+
}
72
75
}
73
76
}
+16
-7
components/Blocks/RSVPBlock/ContactDetailsForm.tsx
+16
-7
components/Blocks/RSVPBlock/ContactDetailsForm.tsx
···
137
137
${!!data?.authToken?.phone_number && "bg-border-light border-border-light text-tertiary"}`}
138
138
>
139
139
<div className=" text-xs font-bold italic text-tertiary">
140
-
WhatsApp Number
140
+
Phone Number
141
141
</div>
142
142
<div className="flex gap-2 ">
143
143
<div className="flex items-center gap-1">
···
198
198
</div>
199
199
</label>
200
200
<div className="text-xs italic text-tertiary leading-tight">
201
-
Currently, all communication will be routed through{" "}
202
-
<strong>WhatsApp</strong>. SMS coming soon!
201
+
{formState.country_code !== "1" ? (
202
+
<>
203
+
Messages to non-US/Canada numbers will be sent via{" "}
204
+
<strong>WhatsApp</strong>
205
+
</>
206
+
) : null}
203
207
</div>
204
208
</div>
205
209
<div className="flex flex-row gap-2 w-full sm:w-32 h-fit">
···
222
226
223
227
<hr className="border-border" />
224
228
<div className="flex flex-row gap-2 w-full items-center justify-end">
225
-
<ConsentPopover />
229
+
<ConsentPopover country_code={formState.country_code} />
226
230
<ButtonTertiary
227
231
onMouseDown={() => {
228
232
setState({ state: "default" });
···
251
255
</>
252
256
) : (
253
257
<ConfirmationForm
258
+
country_code={formState.country_code}
254
259
phoneNumber={formState.phone_number}
255
260
token={contactFormState.token}
256
261
value={formState.confirmationCode}
···
264
269
}
265
270
266
271
const ConfirmationForm = (props: {
272
+
country_code: string;
267
273
phoneNumber: string;
268
274
value: string;
269
275
token: string;
···
325
331
onChange={(e) => props.onChange(e.target.value)}
326
332
/>
327
333
<div className="text-sm italic text-tertiary leading-tight">
328
-
Code was sent to your <strong>WhatsApp</strong>!
334
+
Code was sent to your{" "}
335
+
{props.country_code === "1" ? "phone" : <strong>WhatsApp</strong>}{" "}
336
+
number: +{props.country_code} {props.phoneNumber}!
329
337
</div>
330
338
</label>
331
339
···
340
348
);
341
349
};
342
350
343
-
const ConsentPopover = (props: {}) => {
351
+
const ConsentPopover = (props: { country_code: string }) => {
344
352
return (
345
353
<Popover trigger={<InfoSmall className="text-accent-contrast" />}>
346
354
<div className="text-sm text-secondary">
347
-
By RSVPing I to consent to receive WhatsApp messages from the event
355
+
By RSVPing I to consent to receive
356
+
{props.country_code === "1" ? "" : " WhatsApp"} messages from the event
348
357
host, via Leaflet!
349
358
</div>
350
359
</Popover>