Merge branch 'main' into native-ios

packages/extension/package.json

@@ -22,7 +22,7 @@
     "@tanstack/react-query-devtools": "^5.59.16",
     "classnames": "^2.5.1",
     "date-fns": "^2.25.0",
-    "date-fns-tz": "1.0.0",
+    "date-fns-tz": "1.2.2",
     "dompurify": "^2.5.4",
     "focus-visible": "^5.2.1",
     "graphql": "^16.9.0",

packages/shared/package.json

@@ -16,7 +16,7 @@
     "@tanstack/react-query-devtools": "^4.35.3",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "date-fns-tz": "1.0.0",
+    "date-fns-tz": "1.2.2",
     "dompurify": "^2.3.0",
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
@@ -57,7 +57,7 @@
     "babel-jest": "^26.6.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "date-fns": "^2.25.0",
-    "date-fns-tz": "1.0.0",
+    "date-fns-tz": "1.2.2",
     "dompurify": "^2.5.4",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",

packages/shared/src/components/Icon.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactElement } from 'react';
-import React from 'react';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import React, { Children } from 'react';
 import classNames from 'classnames';
 
 export enum IconSize {
@@ -62,4 +62,38 @@ const Icon = ({
   );
 };
 
+export /**
+ * Icon wrapper so we can use more then single element inside the icon
+ * prop on different components. Wrapper automatically applies icon
+ * props as size to all children.
+ */
+const IconWrapper = ({
+  size,
+  wrapperClassName,
+  children,
+  ...rest
+}: Omit<IconProps, 'className'> & {
+  wrapperClassName?: string;
+  children: ReactNode;
+}): ReactElement => {
+  return (
+    <div className={wrapperClassName}>
+      {Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          // so that className is no exposed from outside since components
+          // like Button override it for icons
+          const { className } = rest as { className: string };
+
+          return React.cloneElement<Props>(child as ReactElement, {
+            size,
+            className: classNames(child.props.className, className),
+          });
+        }
+
+        return child;
+      })}
+    </div>
+  );
+};
+
 export default Icon;

packages/shared/src/components/modals/Prompt.tsx

@@ -34,6 +34,7 @@ export function PromptElement(props: Partial<ModalProps>): ReactElement {
       cancelButton = {},
       okButton = {},
       className = {},
+      shouldCloseOnOverlayClick,
     },
   } = prompt;
   return (
@@ -46,6 +47,7 @@ export function PromptElement(props: Partial<ModalProps>): ReactElement {
       overlayClassName="!z-max"
       isDrawerOnMobile
       drawerProps={{ displayCloseButton: false, appendOnRoot: true }}
+      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       {...props}
     >
       <Modal.Body>

packages/shared/src/components/streak/ReadingStreakButton.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { ReadingStreakPopup } from './popup';
 import type { ButtonIconPosition } from '../buttons/Button';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
-import { ReadingStreakIcon } from '../icons';
+import { ReadingStreakIcon, WarningIcon } from '../icons';
 import { SimpleTooltip } from '../tooltips';
 import type { UserStreak } from '../../graphql/users';
 import { useViewSize, ViewSize } from '../../hooks';
@@ -15,6 +15,10 @@ import { RootPortal } from '../tooltips/Portal';
 import { Drawer } from '../drawers';
 import ConditionalWrapper from '../ConditionalWrapper';
 import type { TooltipPosition } from '../tooltips/BaseTooltipContainer';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { isSameDayInTimezone } from '../../lib/timezones';
+import { IconWrapper } from '../Icon';
+import { useStreakTimezoneOk } from '../../hooks/streaks/useStreakTimezoneOk';
 
 interface ReadingStreakButtonProps {
   streak: UserStreak;
@@ -68,12 +72,14 @@ export function ReadingStreakButton({
   className,
 }: ReadingStreakButtonProps): ReactElement {
   const { logEvent } = useLogContext();
+  const { user } = useAuthContext();
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isMobile = useViewSize(ViewSize.MobileL);
   const [shouldShowStreaks, setShouldShowStreaks] = useState(false);
   const hasReadToday =
-    streak?.lastViewAtTz &&
-    new Date(streak.lastViewAtTz).getDate() === new Date().getDate();
+    streak?.lastViewAt &&
+    isSameDayInTimezone(new Date(streak.lastViewAt), new Date(), user.timezone);
+  const isTimezoneOk = useStreakTimezoneOk();
 
   const handleToggle = useCallback(() => {
     setShouldShowStreaks((state) => !state);
@@ -115,7 +121,14 @@ export function ReadingStreakButton({
           id="reading-streak-header-button"
           type="button"
           iconPosition={iconPosition}
-          icon={<ReadingStreakIcon secondary={hasReadToday} />}
+          icon={
+            <IconWrapper wrapperClassName="relative flex items-center gap-2">
+              <ReadingStreakIcon secondary={hasReadToday} />
+              {!isTimezoneOk && (
+                <WarningIcon className="!mr-0 text-raw-cheese-40" secondary />
+              )}
+            </IconWrapper>
+          }
           variant={
             isLaptop || isMobile ? ButtonVariant.Tertiary : ButtonVariant.Float
           }

packages/shared/src/components/streak/popup/DayStreak.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import { ReadingStreakIcon, TriangleArrowIcon, EditIcon } from '../../icons';
 import classed from '../../../lib/classed';
 import { IconSize, iconSizeToClassName } from '../../Icon';
-import { isNullOrUndefined } from '../../../lib/func';
 import { SimpleTooltip } from '../../tooltips';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { dateFormatInTimezone } from '../../../lib/timezones';
 
 export enum Streak {
   Completed = 'completed',
@@ -16,27 +17,28 @@ export enum Streak {
 
 interface DayStreakProps {
   streak: Streak;
-  day?: number;
+  date: Date;
   size?: IconSize;
   className?: string;
   shouldShowArrow?: boolean;
   onClick?: () => void;
 }
 
-const dayInitial = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 const Circle = classed(
   'div',
   'rounded-full border border-border-subtlest-tertiary',
 );
 
 export function DayStreak({
   streak,
-  day,
+  date,
   size = IconSize.Medium,
   className,
   shouldShowArrow,
   onClick,
 }: DayStreakProps): ReactElement {
+  const { user } = useAuthContext();
+
   const renderIcon = () => {
     if (streak === Streak.Completed || streak === Streak.Pending) {
       return (
@@ -69,8 +71,6 @@ export function DayStreak({
     );
   };
 
-  const finalDay = day < 7 ? day : day % 7;
-
   return (
     <SimpleTooltip
       show={streak === Streak.Freeze}
@@ -89,7 +89,7 @@ export function DayStreak({
           />
         )}
         {renderIcon()}
-        {!isNullOrUndefined(day) ? dayInitial[finalDay] : null}
+        {dateFormatInTimezone(date, 'iiiii', user.timezone)}
       </div>
     </SimpleTooltip>
   );