@verifiedinc-public/shared-ui-elements 0.14.3 → 0.14.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "0.14.3",
+  "version": "0.14.5-beta.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "keywords": [],

package/src/components/Banners/Banner.tsx

@@ -0,0 +1,42 @@
+import {
+  AlertTitle,
+  Box,
+  type SxProps,
+  useTheme,
+  type AlertColor,
+} from '@mui/material';
+
+import { type ReactNode } from 'react';
+import { FullWidthAlert } from '../Alert/FullWidthAlert';
+import { Typography } from '../Typography';
+
+interface BannerProps {
+  title: string;
+  severity: AlertColor;
+  children: ReactNode;
+  sx?: SxProps;
+}
+
+export function Banner({
+  title,
+  severity,
+  children,
+  sx,
+}: BannerProps): React.JSX.Element {
+  const theme = useTheme();
+  return (
+    <Box sx={{ mt: 3, ...sx }}>
+      <FullWidthAlert severity={severity} sx={{ alignItems: 'start' }}>
+        <AlertTitle>
+          <Typography
+            sx={{ color: theme.palette.info.contrastText }}
+            fontWeight='bold'
+          >
+            {title}
+          </Typography>
+        </AlertTitle>
+        {children}
+      </FullWidthAlert>
+    </Box>
+  );
+}

package/src/components/Banners/ExactBirthdayBanner.tsx

@@ -0,0 +1,18 @@
+import { type SxProps } from '@mui/material';
+import { Banner } from './Banner';
+
+/**
+ * "Enter your exact Birthday" Banner
+ */
+export function ExactBirthdayBanner({
+  sx,
+}: {
+  sx?: SxProps;
+}): React.JSX.Element {
+  return (
+    <Banner title='Enter your exact Birthday' severity='info' sx={sx}>
+      We need this to verify your identity with your phone carrier and pre-fill
+      your signup info.
+    </Banner>
+  );
+}

package/src/components/Banners/ResendPhoneBanner.tsx

@@ -0,0 +1,55 @@
+import { type SxProps, useTheme } from '@mui/material';
+import { FullWidthAlert } from '../Alert/FullWidthAlert';
+import { Button } from '../Button';
+import { parseToPhoneNational } from '../../utils';
+
+interface ResendPhoneBannerProps {
+  phone: string;
+  onClick: () => void;
+  disabled?: boolean;
+  sx?: SxProps;
+}
+
+/**
+ * Banner to verify and resend the phone verification code.
+ * @param phone
+ * @param onClick
+ * @constructor
+ */
+export function ResendPhoneBanner({
+  phone,
+  onClick,
+  disabled = false,
+  sx,
+}: ResendPhoneBannerProps): React.JSX.Element {
+  const theme = useTheme();
+  return (
+    <>
+      <FullWidthAlert
+        action={
+          <Button
+            onClick={onClick}
+            disabled={disabled}
+            sx={{
+              color: theme.palette.info.contrastText,
+              fontWeight: 800,
+              fontSize: '13px',
+              padding: '0',
+              '&:hover': {
+                backgroundColor: 'initial',
+              },
+              ...sx,
+            }}
+            size='small'
+            variant='text'
+            color='info'
+          >
+            Resend
+          </Button>
+        }
+      >
+        Use the text we sent to <strong>{parseToPhoneNational(phone)}</strong>{' '}
+      </FullWidthAlert>
+    </>
+  );
+}

package/src/components/Banners/TestPhoneNumbersBanner.tsx

@@ -0,0 +1,25 @@
+import { Box, type SxProps } from '@mui/material';
+import { Banner } from './Banner';
+
+/**
+ * Banner to inform about the test phone numbers
+ */
+export function TestPhoneNumbersBanner({
+  sx,
+}: {
+  sx?: SxProps;
+}): React.JSX.Element {
+  return (
+    <Banner title='Test Phone Numbers' severity='info' sx={sx}>
+      <Box
+        component='ul'
+        sx={{
+          listStyle: 'inside',
+        }}
+      >
+        <li>Phone Only Input: +10123456789</li>
+        <li>Phone and Birth Date Inputs: +10019999999</li>
+      </Box>
+    </Banner>
+  );
+}

package/src/components/Snackbar/index.tsx

@@ -71,6 +71,7 @@ export function useSnackbar(): {
     _enqueueSnackbar(message, {
       severity,
       variant: 'customAlertComponent',
+      persist: true,
       ...options,
     });
   };

package/src/components/form/DateInput.tsx

@@ -1,64 +1,46 @@
-import { Box, TextField } from '@mui/material';
-import {
-  forwardRef,
-  useEffect,
-  useState,
-  type ChangeEventHandler,
-} from 'react';
-import {
-  formatDateMMDDYYYY,
-  getMaxDateInstance,
-  getMinDateInstance,
-} from '../../utils/date';
+import { Box, TextField, type TextFieldProps } from '@mui/material';
+import { forwardRef, useState, type ChangeEventHandler } from 'react';
 import { masks } from '../../utils/masks';
-import { USDateSchema } from '../../validations';
-import { type TextFieldProps } from '../TextField';
 import { InputMask } from './InputMask';
 import { inputStyle } from './styles/input';
 
-interface DateInputProps {
-  name?: string;
-  value?: string;
+interface DateInputProps extends Omit<TextFieldProps, 'onBlur' | 'onChange'> {
   label?: string;
-  error?: boolean;
+  value?: string;
   helperText?: string;
-  onChange?: (event: { target: { value: string } }) => void;
+  onChange?: (value: string) => void;
   onBlur?: ChangeEventHandler<HTMLInputElement>;
-  disabled?: boolean;
-  allowFutureDates?: boolean;
 }
 
-/**
- * The input with date format.
- * @constructor
- */
 function DateInputComponent(
   {
-    label = 'Date of Birth',
-    value = '',
+    label = 'Date',
+    value: controlledValue,
     error,
     helperText,
     onChange,
     onBlur,
     disabled,
-    allowFutureDates = true,
     ...rest
   }: Readonly<DateInputProps>,
   ref: any,
 ): React.JSX.Element {
-  // Arbitrary value to format the timestamp into human-readable date.
-  const [localValue, setLocalValue] = useState<string>(
-    value ? formatDateMMDDYYYY(value) : '',
-  );
+  const [internalValue, setInternalValue] = useState<string>('');
 
-  useEffect(() => {
-    if (value === '') {
-      setLocalValue('');
+  // Determine the value to display
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleChange = (e: any): void => {
+    const date = e.target.value;
+    if (!isControlled) {
+      setInternalValue(date); // Update internal state only if uncontrolled
     }
-  }, [value]);
 
-  const minDateInstance = getMinDateInstance();
-  const maxDateInstance = getMaxDateInstance(allowFutureDates);
+    if (onChange) {
+      onChange(date);
+    }
+  };
 
   const textFieldStyle: TextFieldProps = {
     ...inputStyle,
@@ -74,6 +56,7 @@ function DateInputComponent(
       mask: masks.DOB_MASK,
     },
     fullWidth: true,
+    ...rest,
   };
 
   return (
@@ -82,33 +65,11 @@ function DateInputComponent(
         mask={masks.DOB_MASK}
         maskPlaceholder={null}
         disabled={disabled}
-        value={localValue}
+        value={value}
         onBlur={onBlur}
-        onChange={(e) => {
-          const value = e.target.value;
-          const valid = USDateSchema.safeParse(value);
-
-          // Update the facade input value, so it let user input wrong/right values.
-          setLocalValue(value);
-
-          if (!valid.success) {
-            // A way to make sure the data field state is invalid is to empty the value.
-            return onChange?.({ target: { value: '' } });
-          }
-
-          const date = new Date(value);
-          if (date < minDateInstance || date > maxDateInstance) {
-            // A way to make sure the data field state is invalid is to empty the value.
-            return onChange?.({ target: { value: '' } });
-          }
-
-          date.setUTCHours(12);
-
-          // The date is valid in the US date format and is in between the valid min-max date range.
-          onChange?.({ target: { value: String(+date) } });
-        }}
+        onChange={handleChange}
       >
-        <TextField {...textFieldStyle} inputRef={ref} {...rest} />
+        <TextField {...textFieldStyle} inputRef={ref} />
       </InputMask>
     </Box>
   );

package/src/components/form/OTPInput.tsx

@@ -20,6 +20,7 @@ import {
   type InputBaseProps,
   Typography,
   useTheme,
+  FormControl,
 } from '@mui/material';
 import { v4 as uuid } from 'uuid';
 
@@ -192,22 +193,24 @@ function OTPInputComponent(
     (startIndex: number) => {
       return new Array(3).fill(undefined).map((_, index) => {
         return (
-          <InputBase
-            key={ids.current[index + startIndex]}
-            inputRef={(input) =>
-              ((inputsRef.current[index + startIndex] as any) = input)
-            }
-            autoComplete='one-time-code'
-            autoFocus={index + startIndex === 0}
-            value={values[index + startIndex] || ''}
-            disabled={props.disabled}
-            onChange={handleChange}
-            onKeyUp={handleKeyUp}
-            onFocus={handleFocus}
-            onBlur={() => setIsFocused(false)}
-            {...inputProps}
-            data-testid={`otp-input-${index + startIndex}`}
-          />
+          // FormControl is required for InputBase to avoid bad setState in handleBlur event, and it is one per input.
+          <FormControl key={ids.current[index + startIndex]}>
+            <InputBase
+              inputRef={(input) =>
+                ((inputsRef.current[index + startIndex] as any) = input)
+              }
+              autoComplete='one-time-code'
+              autoFocus={index + startIndex === 0}
+              value={values[index + startIndex] || ''}
+              disabled={props.disabled}
+              onChange={handleChange}
+              onKeyUp={handleKeyUp}
+              onFocus={handleFocus}
+              onBlur={() => setIsFocused(false)}
+              {...inputProps}
+              data-testid={`otp-input-${index + startIndex}`}
+            />
+          </FormControl>
         );
       });
     },

package/src/stories/components/form/DateInput.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { fn } from '@storybook/test';
 import { DateInput } from '../../../components/form/DateInput';
 
@@ -13,6 +12,10 @@ const meta = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium'] },
+    value: { control: 'date' },
+  },
 } satisfies Meta<typeof DateInput>;
 
 export default meta;
@@ -26,14 +29,8 @@ export const Default: Story = {
     onChange: fn(),
     disabled: false,
     error: false,
+    size: 'small',
     helperText: 'Helper text',
-    allowFutureDates: true,
-  },
-  argTypes: {
-    allowFutureDates: {
-      control: 'boolean',
-      description:
-        'Allow future dates. If false and the limit is reached, onChange will return an empty string.',
-    },
   },
+  argTypes: {},
 };