Compute state of address modal reactively (fix edge case on first input)

[MAILPOET-2806]

assets/js/src/settings/pages/key_activation/key_activation.tsx

@@ -24,6 +24,10 @@ export default function KeyActivation() {
     await setUnauthorizedAddresses(null);
   };
 
+  const showFromAddressModal = state.fromAddressModalCanBeShown
+    && state.mssStatus === MssStatus.VALID_MSS_ACTIVE
+    && (!senderAddress || unauthorizedAddresses);
+
   const verifyKey = async (event) => {
     if (!state.key) {
       notices.error(<p>{t('premiumTabNoKeyNotice')}</p>, { scroll: true });
@@ -36,14 +40,11 @@ export default function KeyActivation() {
       premiumInstallationStatus: null,
     });
     MailPoet.Modal.loading(true);
-    const mssStatus: MssStatus = (await verifyMssKey(state.key, isUserTriggered)) as any;
+    await verifyMssKey(state.key, isUserTriggered);
     await verifyPremiumKey(state.key);
     MailPoet.Modal.loading(false);
     if (isUserTriggered) {
-      const authorizedAddressNeeded = !senderAddress || unauthorizedAddresses;
+      setState({ fromAddressModalCanBeShown: true });
-      if (mssStatus === MssStatus.VALID_MSS_ACTIVE && authorizedAddressNeeded) {
-        setState({ showFromAddressModal: true });
-      }
     }
   };
 
@@ -96,9 +97,9 @@ export default function KeyActivation() {
           </div>
         )}
       </Inputs>
-      {state.showFromAddressModal && (
+      {showFromAddressModal && (
         <SetFromAddressModal
-          onRequestClose={() => setState({ showFromAddressModal: false })}
+          onRequestClose={() => setState({ fromAddressModalCanBeShown: false })}
           setAuthorizedAddress={setAuthorizedAddress}
         />
       )}

assets/js/src/settings/store/actions.ts

@@ -63,11 +63,10 @@ export function* verifyMssKey(key: string, activateMssIfKeyValid: boolean) {
     data: { key },
   };
   if (!success) {
-    yield updateKeyActivationState({
+    return updateKeyActivationState({
       mssStatus: MssStatus.INVALID,
       mssMessage: error.join(' ') || null,
     });
-    return MssStatus.INVALID;
   }
   const fields: Partial<KeyActivationState> = {
     mssMessage: res.data.message || null,
@@ -92,8 +91,7 @@ export function* verifyMssKey(key: string, activateMssIfKeyValid: boolean) {
   } else {
     fields.mssStatus = MssStatus.VALID_MSS_NOT_ACTIVE;
   }
-  yield updateKeyActivationState(fields);
+  return updateKeyActivationState(fields);
-  return fields.mssStatus;
 }
 
 export function* verifyPremiumKey(key: string) {

assets/js/src/settings/store/make_default_state.ts

@@ -35,7 +35,7 @@ export default function makeDefaultState(window: any): State {
     premiumStatus,
     mssMessage: null,
     premiumMessage: null,
-    showFromAddressModal: false,
+    fromAddressModalCanBeShown: false,
     premiumInstallationStatus: null,
     key: data.premium.premium_key || data.mta.mailpoet_api_key,
   };

assets/js/src/settings/store/types.ts

@@ -222,7 +222,7 @@ export type KeyActivationState = {
   mssStatus: MssStatus
   mssMessage: string
   premiumInstallationStatus: PremiumInstallationStatus
-  showFromAddressModal: boolean
+  fromAddressModalCanBeShown: boolean
 }
 
 export type State = {