Small fix: Make the surname particles case insensitive when checking …

…whether or not to shorten the word
eisbuk · Jul 11, 2023 · 242c052 · 242c052
1 parent 244985e
commit 242c052
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 12 deletions.
diff --git a/packages/client/src/pages/self_register/index.tsx b/packages/client/src/pages/self_register/index.tsx
@@ -54,7 +54,7 @@ const SelfRegisterPage: React.FC = () => {
   // to more correctly control the 'isSubmitting' state
   const submitForm: Parameters<
     typeof CustomerForm.SelfReg
-  >[0]["onSave"] = async (values, { setErrors }) => {
+  >[0]["onSave"] = async (values, { setErrors, setSubmitting }) => {
     const { secretKey, codeOk } = await customerSelfRegister(values)(
       dispatch,
       getState,
@@ -68,6 +68,7 @@ const SelfRegisterPage: React.FC = () => {
       setErrors({
         registrationCode: t(ValidationMessage.InvalidRegistrationCode),
       });
+      setSubmitting(false);
     }
 
     if (secretKey) {

diff --git a/packages/e2e/integration/athlete_self_register.ts b/packages/e2e/integration/athlete_self_register.ts
@@ -91,4 +91,39 @@ describe("Athlete self registration", () => {
       t(Alerts.ContactEmail, { email: __emailFrom__ }).replace(/<\/?a.*>/g, "")
     );
   });
+
+  it("checks for a spinner on the submit button while the submit request is processing", () => {
+    cy.getAttrWith("aria-label", t(AuthTitle.SignInWithEmail)).click();
+
+    const randomString = uuid().slice(0, 10);
+    const newEmail = `${randomString}@email.com`;
+
+    cy.getAttrWith("type", "email").type(newEmail);
+    cy.clickButton(t(ActionButton.Next));
+    cy.contains(t(AuthTitle.CreateAccount));
+
+    cy.getAttrWith("type", "password").type("non-relevant-password");
+    cy.clickButton(t(ActionButton.Save));
+
+    cy.intercept(
+      {
+        method: "POST",
+        url: "**/customerSelfRegister",
+      },
+      (req) => {
+        req.on("response", (res) => {
+          console.log("waiting");
+          res.setDelay(3000);
+        });
+      }
+    );
+
+    cy.getAttrWith("name", "name").type(saul.name);
+    cy.getAttrWith("name", "surname").type(saul.surname);
+    cy.getAttrWith("name", "birthday").type(saul.birthday);
+
+    cy.getAttrWith("name", "registrationCode").type(__registrationCode__);
+    cy.clickButton(t(ActionButton.Save));
+    cy.contains(t(ActionButton.Loading));
+  });
 });
diff --git a/packages/translations/src/dict/en.json b/packages/translations/src/dict/en.json
@@ -230,7 +230,8 @@
     "Verify": "Verify",
     "Add": "Add",
     "Edit": "Edit",
-    "Delete": "Delete"
+    "Delete": "Delete",
+    "Loading": "Loading"
   },
 
   "Notification": {

diff --git a/packages/translations/src/dict/it.json b/packages/translations/src/dict/it.json
@@ -230,7 +230,8 @@
     "Verify": "Verifica",
     "Edit": "Modifica",
     "Add": "Aggiungi",
-    "Delete": "Elimina"
+    "Delete": "Elimina",
+    "Loading": "Caricamento"
   },
 
   "Notification": {

diff --git a/packages/translations/src/translations.ts b/packages/translations/src/translations.ts
@@ -245,6 +245,7 @@ export enum ActionButton {
   Add = "ActionButton.Add",
   Edit = "ActionButton.Edit",
   Delete = "ActionButton.Delete",
+  Loading = "ActionButton.Loading",
 }
 // #endregion dialog
 

diff --git a/packages/ui/src/Forms/CustomerForm/FormSelfReg.tsx b/packages/ui/src/Forms/CustomerForm/FormSelfReg.tsx
@@ -62,7 +62,6 @@ const FormSelfReg: React.FC<FormSelfRegProps> = ({
       initialValues={initialValues}
       onSubmit={(values, formikHelpers) => {
         onSave(values, formikHelpers);
-        formikHelpers.setSubmitting(false);
       }}
     >
       {({ isSubmitting, resetForm }) => (
@@ -92,7 +91,14 @@ const FormSelfReg: React.FC<FormSelfRegProps> = ({
                 color={FormButtonColor.Green}
                 disabled={isSubmitting}
               >
-                {t(ActionButton.Save)}
+                {isSubmitting ? (
+                  <>
+                    <div className="w-4 h-4 border-t-2 border-blue-500 rounded-full animate-spin" />
+                    {t(ActionButton.Loading)}
+                  </>
+                ) : (
+                  t(ActionButton.Save)
+                )}
               </FormButton>
             </div>
           </div>

diff --git a/packages/ui/src/utils/__tests__/helpers.test.ts b/packages/ui/src/utils/__tests__/helpers.test.ts
@@ -40,34 +40,38 @@ describe("Test helpers", () => {
     test("should not shorten if there's only one name and one surname", () => {
       const name = "John";
       const surname = "Doe";
-      expect(shortName(name, surname)).toBe(["John", "Doe"]);
+      expect(shortName(name, surname)).toEqual(["John", "Doe"]);
     });
 
     test("should shorten the name and surname and return a string containing full first name and last name with all other names shortened", () => {
       const name = "John Ronald Reuel";
       const surname = "Tolkien";
-      expect(shortName(name, surname)).toBe(["John R. R.", "Tolkien"]);
+      expect(shortName(name, surname)).toEqual(["John R. R.", "Tolkien"]);
 
       const name2 = "Thomas";
       const surname2 = "Tailor Thomas";
-      expect(shortName(name2, surname2)).toBe(["Thomas", "T. Thomas"]);
+      expect(shortName(name2, surname2)).toEqual(["Thomas", "T. Thomas"]);
     });
 
     test("should leave the surname particles (common in a lot of languages) intact", () => {
       const name = "John";
       const surname = "de la Cruz";
-      expect(shortName(name, surname)).toBe(["John", "de la Cruz"]);
+      expect(shortName(name, surname)).toEqual(["John", "de la Cruz"]);
 
       const name2 = "Ludwig";
       const surname2 = "van Beethoven";
-      expect(shortName(name2, surname2)).toBe(["Ludwig", "van Beethoven"]);
+      expect(shortName(name2, surname2)).toEqual(["Ludwig", "van Beethoven"]);
+
+      const name3 = "Robert";
+      const surname3 = "De Niro";
+      expect(shortName(name3, surname3)).toEqual(["Robert", "De Niro"]);
     });
 
     test("should shorten the last names even if there prepended with a particle", () => {
       const name = "Pablo Diego José Francisco";
       const surname =
         "de Paula Juan Nepomuceno María de los Remedios Cipriano de la Santísima Trinidad Ruiz y Picasso";
-      expect(shortName(name, surname)).toBe([
+      expect(shortName(name, surname)).toEqual([
         "Pablo D. J. F.",
         "de P. J. N. M. de los R. C. de la S. T. R. y Picasso",
       ]);

diff --git a/packages/ui/src/utils/helpers.ts b/packages/ui/src/utils/helpers.ts
@@ -46,7 +46,7 @@ export const shortName = (name: string, surname: string) => {
     .map((word, i, o) =>
       i === o.length - 1
         ? word
-        : surnameParticles.includes(word)
+        : surnameParticles.includes(word.toLowerCase())
         ? word
         : `${word[0]}.`
     )