Make the whole content, including buttons, scrollable in card present payment alerts

staskus · staskus · commit a019f601379f · 2025-09-08T18:05:38.000+03:00
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentBluetoothRequiredAlertView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentBluetoothRequiredAlertView.swift
@@ -29,13 +29,13 @@ struct PointOfSaleCardPresentPaymentBluetoothRequiredAlertView: View {
                 .fixedSize(horizontal: false, vertical: true)
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.openSettingsButtonViewModel.title,
                    action: viewModel.openSettingsButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.dismissButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.dismissButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView.swift
@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView: View {
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                               accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedLocationRequiredAlertView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedLocationRequiredAlertView.swift
@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedLocationRequiredAlertView: V
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.primaryButtonViewModel.title,
                    action: viewModel.primaryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView.swift
@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView: View {
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedView.swift
@@ -31,13 +31,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedView: View {
                 .fixedSize(horizontal: false, vertical: true)
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundReaderView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundReaderView.swift
@@ -24,7 +24,6 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {
                 Button(viewModel.connectButton.title,
@@ -37,6 +36,7 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {
             }
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelSearchButton.actionHandler,
                              accessibilityLabel: viewModel.cancelSearchButton.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedView.swift
@@ -23,13 +23,13 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedView: View {
                     .matchedGeometryEffect(id: animation.titleTransitionId, in: animation.namespace, properties: .position)
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalSizing.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalSizing.swift
@@ -47,7 +47,7 @@ private extension POSModalSizing {
     }
 
     var frameHeight: CGFloat {
-        return min(preferredFrameHeight, parentSize.height)
+        return min(preferredFrameHeight, maxAvailableFrameHeight)
     }
 
     var preferredFrameHeight: CGFloat {
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift
@@ -35,6 +35,7 @@ struct POSRootModalViewModifier: ViewModifier {
                             .padding()
                     }
                     .zIndex(1)
+                    // Scale the modal container in and out, fading appropriately.
                     // Unfortunately combined doesn't work on removal.
                     // The extra ZStack prevents changing modalContent from scaling and fading, but the ZIndex needs to be
                     // consistent even when animating out, which it wouldn't be if unspecified.

Original file line number	Diff line number	Diff line change
`@@ -29,13 +29,13 @@ struct PointOfSaleCardPresentPaymentBluetoothRequiredAlertView: View {`
`29`	`29`	`.fixedSize(horizontal: false, vertical: true)`
`30`	`30`	`}`
`31`	`31`	`.frame(maxWidth: .infinity)`
`32`		`- .scrollVerticallyIfNeeded()`
`33`	`32`
`34`	`33`	`Button(viewModel.openSettingsButtonViewModel.title,`
`35`	`34`	`action: viewModel.openSettingsButtonViewModel.actionHandler)`
`36`	`35`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`37`	`36`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`38`	`37`	`}`
	`38`	`+ .scrollVerticallyIfNeeded()`
`39`	`39`	`.posModalCloseButton(action: viewModel.dismissButtonViewModel.actionHandler,`
`40`	`40`	`accessibilityLabel: viewModel.dismissButtonViewModel.title)`
`41`	`41`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView: View {`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`.frame(maxWidth: .infinity)`
`27`		`- .scrollVerticallyIfNeeded()`
`28`	`27`
`29`	`28`	`Button(viewModel.retryButtonViewModel.title,`
`30`	`29`	`action: viewModel.retryButtonViewModel.actionHandler)`
`31`	`30`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`32`	`31`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`33`	`32`	`}`
	`33`	`+ .scrollVerticallyIfNeeded()`
`34`	`34`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
`35`	`35`	`accessibilityLabel: viewModel.cancelButtonViewModel.title)`
`36`	`36`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -31,13 +31,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedView: View {`
`31`	`31`	`.fixedSize(horizontal: false, vertical: true)`
`32`	`32`	`}`
`33`	`33`	`.frame(maxWidth: .infinity)`
`34`		`- .scrollVerticallyIfNeeded()`
`35`	`34`
`36`	`35`	`Button(viewModel.retryButtonViewModel.title,`
`37`	`36`	`action: viewModel.retryButtonViewModel.actionHandler)`
`38`	`37`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`39`	`38`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`40`	`39`	`}`
	`40`	`+ .scrollVerticallyIfNeeded()`
`41`	`41`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
`42`	`42`	`accessibilityLabel: viewModel.cancelButtonViewModel.title)`
`43`	`43`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,6 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`.frame(maxWidth: .infinity)`
`27`		`- .scrollVerticallyIfNeeded()`
`28`	`27`
`29`	`28`	`VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {`
`30`	`29`	`Button(viewModel.connectButton.title,`
`@@ -37,6 +36,7 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {`
`37`	`36`	`}`
`38`	`37`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`39`	`38`	`}`
	`39`	`+ .scrollVerticallyIfNeeded()`
`40`	`40`	`.posModalCloseButton(action: viewModel.cancelSearchButton.actionHandler,`
`41`	`41`	`accessibilityLabel: viewModel.cancelSearchButton.title)`
`42`	`42`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -23,13 +23,13 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedView: View {`
`23`	`23`	`.matchedGeometryEffect(id: animation.titleTransitionId, in: animation.namespace, properties: .position)`
`24`	`24`	`}`
`25`	`25`	`.frame(maxWidth: .infinity)`
`26`		`- .scrollVerticallyIfNeeded()`
`27`	`26`
`28`	`27`	`Button(viewModel.retryButtonViewModel.title,`
`29`	`28`	`action: viewModel.retryButtonViewModel.actionHandler)`
`30`	`29`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`31`	`30`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`32`	`31`	`}`
	`32`	`+ .scrollVerticallyIfNeeded()`
`33`	`33`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
`34`	`34`	`accessibilityLabel: viewModel.cancelButtonViewModel.title)`
`35`	`35`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ private extension POSModalSizing {`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`var frameHeight: CGFloat {`
`50`		`- return min(preferredFrameHeight, parentSize.height)`
	`50`	`+ return min(preferredFrameHeight, maxAvailableFrameHeight)`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`var preferredFrameHeight: CGFloat {`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ struct POSRootModalViewModifier: ViewModifier {`
`35`	`35`	`.padding()`
`36`	`36`	`}`
`37`	`37`	`.zIndex(1)`
	`38`	`+ // Scale the modal container in and out, fading appropriately.`
`38`	`39`	`// Unfortunately combined doesn't work on removal.`
`39`	`40`	`// The extra ZStack prevents changing modalContent from scaling and fading, but the ZIndex needs to be`
`40`	`41`	`// consistent even when animating out, which it wouldn't be if unspecified.`