Fix message displayed when a new segment is created

There was a bug and the code was displaying `Segment succesfully
updated!` instead of `Segment succesfull added!` when the user created a
new segment.

This commit fixes this problem. The issue was that
Number(match.params.id) returns `NaN` instead of `undefined` when there
is no segment ID. So the check inside handleSave() was always calling
messages.onUpdate().

Since the segment ID was never used. I replaced it with a boolean and
renamed the variable from `segmentId` to `isNewSegment` to better
indicate how it is used.

[MAILPOET-5615]

mailpoet/assets/js/src/segments/dynamic/editor.tsx

@@ -27,6 +27,9 @@ export function Editor(): JSX.Element {
     };
   }, [match.params.id, pageLoaded, pageUnloaded]);
 
+  const isNewSegment =
+    match.params.id === undefined || Number.isNaN(Number(match.params.id));
+
   return (
     <>
       <Background color="#fff" />
@@ -42,7 +45,7 @@ export function Editor(): JSX.Element {
         </Link>
       </Heading>
 
-      <Form segmentId={Number(match.params.id)} />
+      <Form isNewSegment={isNewSegment} />
     </>
   );
 }

mailpoet/assets/js/src/segments/dynamic/form.tsx

@@ -27,7 +27,7 @@ import {
 } from './types';
 
 interface Props {
-  segmentId?: number;
+  isNewSegment: boolean;
 }
 
 const FiltersBefore = Hooks.applyFilters(
@@ -43,7 +43,7 @@ const FilterAfter = Hooks.applyFilters(
   (): JSX.Element => <div className="mailpoet-gap" />,
 );
 
-export function Form({ segmentId }: Props): JSX.Element {
+export function Form({ isNewSegment }: Props): JSX.Element {
   const segment: Segment = useSelect(
     (select) => select(storeName).getSegment(),
     [],
@@ -194,7 +194,7 @@ export function Form({ segmentId }: Props): JSX.Element {
             type="submit"
             onClick={(e): void => {
               e.preventDefault();
-              void handleSave(segmentId);
+              void handleSave(isNewSegment);
             }}
             isDisabled={
               !isFormValid(segment.filters) ||

mailpoet/assets/js/src/segments/dynamic/store/actions.ts

@@ -131,7 +131,7 @@ const messages = {
   },
 };
 
-export function* handleSave(segmentId?: number): Generator<{
+export function* handleSave(isNewSegment: boolean): Generator<{
   type: string;
   segment?: AnyFormItem;
 }> {
@@ -147,10 +147,10 @@ export function* handleSave(segmentId?: number): Generator<{
   if (success) {
     window.location.href = 'admin.php?page=mailpoet-segments#/segments';
 
-    if (segmentId !== undefined) {
-      messages.onUpdate();
-    } else {
+    if (isNewSegment) {
       messages.onCreate(segment);
+    } else {
+      messages.onUpdate();
     }
   } else {
     yield setErrors(error as string[]);

mailpoet/tests/acceptance/Segments/CreateSegmentEmailAbsoluteCountCest.php

@@ -64,7 +64,7 @@ class CreateSegmentEmailAbsoluteCountCest {
     $i->fillField('[data-automation-id="segment-number-of-days"]', 3);
     $i->waitForText('This segment has 2 subscribers');
     $i->click('Save');
-    $i->waitForNoticeAndClose('Segment successfully updated!');
+    $i->waitForNoticeAndClose('Segment successfully added!');
 
     $i->wantTo('Edit the segment');
     $i->amOnMailpoetPage('Segments');

mailpoet/tests/acceptance/Segments/ManageSegmentsCest.php

@@ -92,7 +92,7 @@ class ManageSegmentsCest {
     $i->waitForText('This segment has 3 subscribers');
     $i->waitForElementClickable('button[type="submit"]');
     $i->click('Save');
-    $i->waitForNoticeAndClose('Segment successfully updated!');
+    $i->waitForNoticeAndClose('Segment successfully added!');
     $i->waitForText($segmentTitle);
 
     $i->wantTo('Edit existing segment');