Merge branch 'bose/2433' into staging

web/common/helpers/compare.ts

@@ -0,0 +1,6 @@
+export const localeCompareUndefined = (a: any, b: any) => {
+  if (a === undefined && b === undefined) return 0
+  else if (a === undefined) return -1
+  else if (b === undefined) return 1
+  else return b - a
+}

web/core/SimplePagination/SimplePagination.tsx

@@ -0,0 +1,67 @@
+import envisTwMerge from '../../twMerge'
+import { useIntl } from 'react-intl'
+import { MediaButton } from '@core/MediaButton/MediaButton'
+import { useContext } from 'react'
+import { PaginationContext } from '../../common/contexts/PaginationContext'
+import { usePrefersReducedMotion } from '../../common/hooks/usePrefersReducedMotion'
+
+export type SimplePaginationProps = {
+  className?: string
+  onNextPage: () => void
+  onPreviousPage: () => void
+  isFirstPage: boolean
+  isLastPage: boolean
+}
+
+export const SimplePagination = ({
+  className = '',
+  onNextPage,
+  onPreviousPage,
+  isFirstPage = false,
+  isLastPage = false,
+  ...rest
+}: SimplePaginationProps) => {
+  const intl = useIntl()
+  const { resultsRef } = useContext(PaginationContext)
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  const handleNextPagination = () => {
+    if (!prefersReducedMotion && resultsRef?.current) {
+      resultsRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+    onNextPage()
+  }
+  const handlePrevPagination = () => {
+    if (!prefersReducedMotion && resultsRef?.current) {
+      resultsRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+    onPreviousPage()
+  }
+
+  return (
+    <ul className={envisTwMerge(`max-w-viewport flex flex-wrap gap-2 my-2`, className)} {...rest}>
+      <div className="flex gap-3 items-center">
+        <MediaButton
+          title={intl.formatMessage({
+            id: 'previous',
+            defaultMessage: 'Previous',
+          })}
+          mode="previous"
+          disabled={isFirstPage}
+          onClick={handlePrevPagination}
+          className=""
+        />
+        <MediaButton
+          title={intl.formatMessage({
+            id: 'next',
+            defaultMessage: 'Next',
+          })}
+          mode="next"
+          disabled={isLastPage}
+          onClick={handleNextPagination}
+          className=""
+        />
+      </div>
+    </ul>
+  )
+}