Ajoute une estimation visible de la longueur des messages en nombre d…

…e segment SMS

package.json

@@ -19,7 +19,8 @@
     "node-sass": "^9.0.0",
     "react": "^18",
     "react-dom": "^18",
-    "sass": "^1.78.0"
+    "sass": "^1.78.0",
+    "sms-segments-calculator": "^1.2.0"
   },
   "devDependencies": {
     "eslint": "^8",

src/components/message-input-control.js

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { SegmentedMessage } from "sms-segments-calculator";
+
+export function MessageInputControl({ value, onChange, onCtrlEnter }) {
+  function SmsSegmentHelpText() {
+    const v = new SegmentedMessage(value || "");
+    const maxBitsInSegment = 1120; // max size of a SMS is 140 octets -> 140 * 8bits = 1120 bits
+    return (
+      <p className="help">
+        <div className="messageSegments">
+          {v.segments.map((segment) => (
+            <progress
+              className="progress"
+              value={segment.sizeInBits()}
+              max={maxBitsInSegment}
+            >
+              {segment.sizeInBits()}/{maxBitsInSegment}
+            </progress>
+          ))}
+        </div>
+        {v.segments.length > 1
+          ? `Ce message sera réparti sur ${v.segments.length} segments SMS.`
+          : ""}
+      </p>
+    );
+  }
+
+  return (
+    <div className="control">
+      <textarea
+        className="textarea"
+        id="message"
+        rows="5"
+        value={value}
+        onChange={onChange}
+        onKeyUp={(e) => {
+          if (e.ctrlKey && e.keyCode == 13 && onCtrlEnter) {
+            onCtrlEnter(e);
+          }
+        }}
+      />
+      <SmsSegmentHelpText />
+    </div>
+  );
+}

src/components/sms-form.js

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { createCampaign } from "@/lib/create-campaign.js";
 import { cleanPhoneNumber } from "@/lib/clean-phone-number.js";
+import { MessageInputControl } from "./message-input-control.js";
 import { send } from "@/lib/send.js";
 
 export function SMSForm({ supabase, onSent, showSimpleOnly }) {
@@ -76,20 +77,11 @@ export function SMSForm({ supabase, onSent, showSimpleOnly }) {
         <label htmlFor="message" className="label">
           Message
         </label>
-        <div className="control">
-          <textarea
-            className="textarea"
-            id="message"
-            rows="5"
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            onKeyUp={(e) => {
-              if (e.ctrlKey && e.keyCode == 13) {
-                sendMessage();
-              }
-            }}
-          />
-        </div>
+        <MessageInputControl
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onCtrlEnter={(e) => sendMessage()}
+        />
       </div>
       {showSimpleOnly ? (
         <></>

src/pages/espace-personnel/campagne.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { createClient } from "@supabase/supabase-js";
 import { OnboardingFlow } from "@/components/onboarding/flow.js";
 import { LoggedInView } from "@/components/logged-in-view.js";
+import { MessageInputControl } from "@/components/message-input-control.js";
 import { createCampaign } from "@/lib/create-campaign.js";
 import { send } from "@/lib/send.js";
 import bluebird from "bluebird";
@@ -160,15 +161,10 @@ export default function Campagne() {
                       <label htmlFor="template" className="label">
                         Message
                       </label>
-                      <div className="control">
-                        <textarea
-                          className="textarea"
-                          id="template"
-                          rows="5"
-                          value={messageTemplate}
-                          onChange={(e) => updateTemplate(e.target.value)}
-                        />
-                      </div>
+                      <MessageInputControl
+                        value={messageTemplate}
+                        onChange={(e) => updateTemplate(e.target.value)}
+                      />
                     </div>
                   </div>
                 </div>

src/pages/grist.js

@@ -3,6 +3,7 @@ import Script from "next/script";
 import { createClient } from "@supabase/supabase-js";
 import { OnboardingFlow } from "../components/onboarding/flow.js";
 import { LoggedInView } from "../components/logged-in-view.js";
+import { MessageInputControl } from "../components/message-input-control.js";
 import { createCampaign } from "@/lib/create-campaign.js";
 import { send } from "../lib/send.js";
 import bluebird from "bluebird";
@@ -147,15 +148,10 @@ export default function Grist() {
                   <label htmlFor="template" className="label">
                     Template du message
                   </label>
-                  <div className="control">
-                    <textarea
-                      className="textarea"
-                      id="template"
-                      rows="5"
-                      value={messageTemplate}
-                      onChange={(e) => updateTemplate(e.target.value)}
-                    />
-                  </div>
+                  <MessageInputControl
+                    value={messageTemplate}
+                    onChange={(e) => updateTemplate(e.target.value)}
+                  />
                 </div>
                 {records?.length ? (
                   <div className="field">

src/styles/globals.scss

@@ -65,3 +65,15 @@ button.card-header {
 textarea {
   rows: 30;
 }
+
+.messageSegments {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 0.2em;
+}
+
+.messageSegments progress {
+  max-width: 19%;
+  height: 1em;
+  margin: 3px;
+}