Merged in feat/SW-1281-ancillaries-add-flow (pull request #1399)

Feat/SW-1281 ancillaries add flow * feat(SW-1546): update design * feat(SW-1546): show points only if logged in * feat(SW-1546): always show points * feat(SW-1281): ancillary add flow initial * feat(SW-1546): add api call * feat(SW-1281): refactor naming and break out components * feat(SW-1281): handle back button * feat(SW-1281): make mobile cards clickable * feat(SW-1281): refactor spread ancillaries * feat(SW-1281): add deliverytimes * feat(SW-1281): rebase master * feat(SW-1281): add design for logged in or not * feat(SW-1281): add design * feat(SW-1281): add mobile design * feat(SW-1281): fix carousel * feat(SW-1281): show deliverytime only if ancillary has not been added * feat(SW-1281): add design * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): base dates on check in date only * feat(SW-1281): fix show correct toast when no valid data * feat(SW-1281): hande logic if deliverytime is not required * feat(SW-1281): fix max width for mobile * feat(SW-1281): refactor after pr comment Approved-by: Niclas Edenvin Approved-by: Linus Flood
2025-02-26 07:20:45 +00:00
parent 341f0c54ed
commit 541b91e34c
32 changed files with 1208 additions and 129 deletions
--- a/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/SelectQuantityStep/index.tsx
+++ b/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/SelectQuantityStep/index.tsx
@@ -0,0 +1,85 @@
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
+
+import { DiamondIcon } from "@/components/Icons"
+import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import Select from "@/components/TempDesignSystem/Form/Select"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./selectQuantityStep.module.css"
+
+import type { SelectQuantityStepProps } from "@/types/components/myPages/myStay/ancillaries"
+
+export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
+  const intl = useIntl()
+  const { selectedAncillary } = useAddAncillaryStore()
+  const { formState } = useFormContext()
+
+  const cardQuantityOptions = Array.from({ length: 7 }, (_, i) => ({
+    label: `${i}`,
+    value: i,
+  }))
+
+  const pointsCost = selectedAncillary?.points ?? 0
+  const currentPoints = user?.membership?.currentPoints ?? 0
+  const maxAffordable =
+    pointsCost > 0 ? Math.min(Math.floor(currentPoints / pointsCost), 7) : 0
+
+  const pointsQuantityOptions = Array.from(
+    { length: maxAffordable + 1 },
+    (_, i) => ({
+      label: `${i}`,
+      value: i,
+    })
+  )
+
+  const insufficientPoints = currentPoints < pointsCost || currentPoints === 0
+
+  const pointsLabel =
+    insufficientPoints && user
+      ? intl.formatMessage({ id: "Insufficient points" })
+      : intl.formatMessage({ id: "Select quantity" })
+
+  return (
+    <div className={styles.selectContainer}>
+      {selectedAncillary?.points && user && (
+        <div className={styles.select}>
+          <Subtitle type="two">
+            {intl.formatMessage({ id: "Pay with points" })}
+          </Subtitle>
+          <div className={styles.totalPointsContainer}>
+            <div className={styles.totalPoints}>
+              <DiamondIcon />
+              <Subtitle textTransform="uppercase" type="two">
+                {intl.formatMessage({ id: "Total points" })}
+              </Subtitle>
+            </div>
+            <Body>{currentPoints}</Body>
+          </div>
+          <Select
+            name="quantityWithPoints"
+            label={pointsLabel}
+            items={pointsQuantityOptions}
+            disabled={!user || insufficientPoints}
+            isNestedInModal
+          />
+        </div>
+      )}
+      <div className={styles.select}>
+        <Subtitle type="two">
+          {intl.formatMessage({ id: "Pay with Card" })}
+        </Subtitle>
+        <Select
+          name="quantityWithCard"
+          label={intl.formatMessage({ id: "Select quantity" })}
+          items={cardQuantityOptions}
+          isNestedInModal
+        />
+      </div>
+      <ErrorMessage errors={formState.errors} name="quantityWithCard" />
+    </div>
+  )
+}