Streamline install and notification signup flow

src/App.vue

@@ -152,6 +152,7 @@ const copiedKey = ref('')
 const memberSigninError = ref('')
 const isMemberSigninLoading = ref(false)
 const isRemoteSignerLoading = ref(false)
+const isCreatingMembership = ref(false)
 const formError = ref('')
 const signatureCanvas = ref(null)
 const signatureHasInk = ref(false)
@@ -372,14 +373,8 @@ const pwaInstallTitle = computed(() => {
   return 'Install L484 on this device'
 })
 const pwaInstallCopy = computed(() => {
-  if (isPwaStandalone.value) return 'You are already using the installed app. Continue signup from here.'
   if (installPlatform.value === 'ios') return 'Use Safari, tap Share, then Add to Home Screen. Reopen L484 from the new app icon to continue signup.'
-  if (installPlatform.value === 'android') return deferredInstallPrompt.value
-    ? 'Install the app when prompted, then continue signup inside L484.'
-    : 'Open Chrome menu, choose Install app or Add to Home screen, then launch L484 from the app icon.'
-  return deferredInstallPrompt.value
-    ? 'Use the browser install prompt to install L484, then continue signup.'
-    : 'Install L484 using the browser install icon in the address bar. The install prompt appears here when the browser makes it available.'
+  return 'Press Install app to open the browser install prompt.'
 })
 const pwaInstallPrimaryLabel = computed(() => {
   if (isPwaStandalone.value) return 'Continue signup'
@@ -819,7 +814,7 @@ const handlePwaInstallPrimary = async () => {
   }
 
   if (installPlatform.value === 'desktop') {
-    formError.value = 'The browser install prompt is not available yet. Use the install icon in the address bar, or refresh once and press Install app again.'
+    formError.value = 'The browser install prompt is not available yet. Refresh once, then press Install app again.'
     return
   }
 
@@ -828,6 +823,22 @@ const handlePwaInstallPrimary = async () => {
     : 'Install L484 from your browser menu or address bar, then reopen the installed app to continue.'
 }
 
+const startSignup = async () => {
+  formError.value = ''
+  refreshPwaStandalone()
+  installPlatform.value = detectInstallPlatform()
+  if (isPwaStandalone.value) {
+    signupStep.value = 2
+    return
+  }
+  if (installPlatform.value === 'desktop' || installPlatform.value === 'android') {
+    signupStep.value = 1
+    await handlePwaInstallPrimary()
+    return
+  }
+  signupStep.value = 1
+}
+
 const openSignup = () => {
   isSignupOpen.value = true
   loadBitcoinPrice()
@@ -885,6 +896,7 @@ const signOutMember = () => {
   isSignupOpen.value = false
   isMemberSigninOpen.value = false
   isRemoteSignerLoading.value = false
+  isCreatingMembership.value = false
   isMemberSigninLoading.value = false
   memberSigninError.value = ''
   localStorage.removeItem(CURRENT_MEMBER_KEY)
@@ -1025,12 +1037,23 @@ const handleSignerCompletion = async () => {
 const createMembership = async () => {
   formError.value = ''
   sanitizeForm()
+  isCreatingMembership.value = true
   if (!validateApplicant()) {
+    isCreatingMembership.value = false
     return
   }
 
   if (!canContinue.value) {
     formError.value = 'Please sign the agreement before creating your membership.'
+    isCreatingMembership.value = false
+    return
+  }
+
+  try {
+    await subscribeToNotifications()
+  } catch (error) {
+    formError.value = error instanceof Error ? error.message : 'Could not enable notifications.'
+    isCreatingMembership.value = false
     return
   }
 
@@ -1083,6 +1106,8 @@ const createMembership = async () => {
     }, 2400)
   } catch (error) {
     formError.value = error instanceof Error ? error.message : 'Could not save membership.'
+  } finally {
+    isCreatingMembership.value = false
   }
 }
 
@@ -3429,7 +3454,7 @@ watch(mobileMenuOpen, (open) => {
                 <p>{{ pwaInstallCopy }}</p>
               </div>
             </div>
-            <div class="signin-options">
+            <div v-if="installPlatform === 'ios'" class="signin-options">
               <div class="pwa-install-card" :class="{ active: installPlatform === 'android' }">
                 <strong>Android</strong>
                 <small>Chrome will show an install prompt when available. Otherwise use menu, Install app.</small>
@@ -3603,7 +3628,7 @@ watch(mobileMenuOpen, (open) => {
               Import
             </button>
           </template>
-          <button v-if="signupStep === 0" class="primary-action" type="button" @click="nextStep">
+          <button v-if="signupStep === 0" class="primary-action" type="button" @click="startSignup">
             Start signup
           </button>
           <button v-else-if="signupStep === 1" class="primary-action" type="button" @click="handlePwaInstallPrimary">
@@ -3612,8 +3637,8 @@ watch(mobileMenuOpen, (open) => {
           <button v-else-if="signupStep < 4" class="primary-action" type="button" @click="nextStep">
             Continue
           </button>
-          <button v-else-if="signupStep === 4" class="primary-action" type="button" @click="createMembership">
-            Create card
+          <button v-else-if="signupStep === 4" class="primary-action" type="button" :disabled="isCreatingMembership" @click="createMembership">
+            {{ isCreatingMembership ? 'Enabling alerts...' : 'Enable alerts & create card' }}
           </button>
         </div>
       </div>