a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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>