feat(SW-817): hide apple pay if not supported

components/HotelReservation/EnterDetails/Payment/index.tsx

@@ -81,6 +81,8 @@ export default function Payment({
   const { toDate, fromDate, rooms: rooms, hotel } = roomData
 
   const [confirmationNumber, setConfirmationNumber] = useState<string>("")
+  const [availablePaymentOptions, setAvailablePaymentOptions] =
+    useState(otherPaymentOptions)
 
   const methods = useForm<PaymentFormData>({
     defaultValues: {
@@ -118,6 +120,18 @@ export default function Payment({
     retryInterval
   )
 
+  useEffect(() => {
+    if (window.ApplePaySession) {
+      setAvailablePaymentOptions(otherPaymentOptions)
+    } else {
+      setAvailablePaymentOptions(
+        otherPaymentOptions.filter(
+          (option) => option !== PaymentMethodEnum.applePay
+        )
+      )
+    }
+  }, [otherPaymentOptions, setAvailablePaymentOptions])
+
   useEffect(() => {
     if (bookingStatus?.data?.paymentUrl) {
       router.push(bookingStatus.data.paymentUrl)
@@ -260,7 +274,7 @@ export default function Payment({
               value={PaymentMethodEnum.card}
               label={intl.formatMessage({ id: "Credit card" })}
             />
-            {otherPaymentOptions.map((paymentMethod) => (
+            {availablePaymentOptions.map((paymentMethod) => (
               <PaymentOption
                 key={paymentMethod}
                 name="paymentMethod"

types/window.d.ts

@@ -13,4 +13,5 @@ interface Window {
     }
   }
   Cookiebot: { changed: boolean; consented: boolean }
+  ApplePaySession: (() => void) | undefined
 }