Fixes bookingwidget skeleton and memoize fetching of creditcards

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -245,7 +245,7 @@ export function SearchSkeleton() {
         </Caption>
       </div>
       <div className={styles.input}>
-        <SkeletonShimmer />
+        <SkeletonShimmer width={"100%"} />
       </div>
     </div>
   )

components/Forms/BookingWidget/FormContent/index.tsx

@@ -104,13 +104,13 @@ export function BookingWidgetFormContentSkeleton() {
           <Caption color="red" type="bold">
             {intl.formatMessage({ id: "booking.nights" }, { totalNights: 0 })}
           </Caption>
-          <SkeletonShimmer />
+          <SkeletonShimmer width={"100%"} />
         </div>
         <div className={styles.rooms}>
           <Caption color="red" type="bold" asChild>
             <span>{intl.formatMessage({ id: "Guests & Rooms" })}</span>
           </Caption>
-          <SkeletonShimmer />
+          <SkeletonShimmer width={"100%"} />
         </div>
       </div>
       <div className={styles.voucherContainer}>

server/routers/user/query.ts

@@ -214,73 +214,75 @@ export function parsedUser(data: User, isMFA: boolean) {
   return user
 }
 
-async function getCreditCards({
-  session,
-  onlyNonExpired,
-}: {
-  session: Session
-  onlyNonExpired?: boolean
-}) {
-  getCreditCardsCounter.add(1)
-  console.info("api.profile.creditCards start", JSON.stringify({}))
-  const apiResponse = await api.get(api.endpoints.v1.Profile.creditCards, {
-    headers: {
-      Authorization: `Bearer ${session.token.access_token}`,
-    },
-  })
-
-  if (!apiResponse.ok) {
-    const text = await apiResponse.text()
-    getCreditCardsFailCounter.add(1, {
-      error_type: "http_error",
-      error: JSON.stringify({
-        status: apiResponse.status,
-        statusText: apiResponse.statusText,
-        text,
-      }),
+const getCreditCards = cache(
+  async ({
+    session,
+    onlyNonExpired,
+  }: {
+    session: Session
+    onlyNonExpired?: boolean
+  }) => {
+    getCreditCardsCounter.add(1)
+    console.info("api.profile.creditCards start", JSON.stringify({}))
+    const apiResponse = await api.get(api.endpoints.v1.Profile.creditCards, {
+      headers: {
+        Authorization: `Bearer ${session.token.access_token}`,
+      },
     })
-    console.error(
-      "api.profile.creditCards error ",
-      JSON.stringify({
-        error: {
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      getCreditCardsFailCounter.add(1, {
+        error_type: "http_error",
+        error: JSON.stringify({
           status: apiResponse.status,
           statusText: apiResponse.statusText,
           text,
-        },
+        }),
       })
-    )
-    return null
-  }
-
-  const apiJson = await apiResponse.json()
-  const verifiedData = creditCardsSchema.safeParse(apiJson)
-  if (!verifiedData.success) {
-    getCreditCardsFailCounter.add(1, {
-      error_type: "validation_error",
-      error: JSON.stringify(verifiedData.error),
-    })
-    console.error(
-      "api.profile.creditCards validation error ",
-      JSON.stringify({ error: verifiedData.error })
-    )
-    return null
-  }
-  getCreditCardsSuccessCounter.add(1)
-  console.info("api.profile.creditCards success", JSON.stringify({}))
-
-  return verifiedData.data.data.filter((card) => {
-    if (onlyNonExpired) {
-      try {
-        const expirationDate = dt(card.expirationDate).startOf("day")
-        const currentDate = dt().startOf("day")
-        return expirationDate > currentDate
-      } catch (error) {
-        return false
-      }
+      console.error(
+        "api.profile.creditCards error ",
+        JSON.stringify({
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text,
+          },
+        })
+      )
+      return null
     }
-    return true
-  })
-}
+
+    const apiJson = await apiResponse.json()
+    const verifiedData = creditCardsSchema.safeParse(apiJson)
+    if (!verifiedData.success) {
+      getCreditCardsFailCounter.add(1, {
+        error_type: "validation_error",
+        error: JSON.stringify(verifiedData.error),
+      })
+      console.error(
+        "api.profile.creditCards validation error ",
+        JSON.stringify({ error: verifiedData.error })
+      )
+      return null
+    }
+    getCreditCardsSuccessCounter.add(1)
+    console.info("api.profile.creditCards success", JSON.stringify({}))
+
+    return verifiedData.data.data.filter((card) => {
+      if (onlyNonExpired) {
+        try {
+          const expirationDate = dt(card.expirationDate).startOf("day")
+          const currentDate = dt().startOf("day")
+          return expirationDate > currentDate
+        } catch (error) {
+          return false
+        }
+      }
+      return true
+    })
+  }
+)
 
 export const userQueryRouter = router({
   get: protectedProcedure