@availity/mui-feedback 0.1.0

package/src/lib/Feedback.test.tsx

@@ -0,0 +1,15 @@
+import { render, fireEvent } from '@testing-library/react';
+import { Feedback } from './Feedback';
+
+describe('Feedback', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<Feedback appName="This App" />);
+    const button = getByText('Give Feedback');
+
+    expect(button).toBeTruthy();
+
+    fireEvent.click(button);
+
+    expect(getByText('Tell us what you think about This App')).toBeTruthy();
+  });
+});

package/src/lib/Feedback.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { Popover } from '@availity/mui-popover';
+import { Button } from '@availity/mui-button';
+import { Container, styled } from '@mui/material';
+import { avLogMessagesApi } from '@availity/api-axios';
+import { FeedbackForm } from './FeedbackForm';
+import { FeedbackHeader } from './FeedbackHeader';
+
+export interface FeedbackProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  analytics?: { info: (entries: any) => any };
+  appName: string;
+}
+
+const FeedbackContainer = styled(Container, { name: 'AvFeedbackContainer', slot: 'root' })({});
+
+export const Feedback = ({ analytics = avLogMessagesApi, appName }: FeedbackProps): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [sent, setSent] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+
+  return (
+    <>
+      <Button onClick={handlePopoverOpen} color="secondary" size="large">
+        Give Feedback
+      </Button>
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        sx={{ marginTop: '4px' }}
+        disableRestoreFocus
+        onClose={handlePopoverClose}
+        open={open}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        <FeedbackContainer>
+          <FeedbackHeader appName={appName} handleClose={handlePopoverClose} loading={loading} sent={sent} />
+          <FeedbackForm
+            analytics={analytics}
+            appName={appName}
+            handleClose={handlePopoverClose}
+            loading={loading}
+            sent={sent}
+            setLoading={setLoading}
+            setSent={setSent}
+          />
+        </FeedbackContainer>
+      </Popover>
+    </>
+  );
+};

package/src/lib/FeedbackForm.test.tsx

@@ -0,0 +1,48 @@
+import { render, fireEvent } from '@testing-library/react';
+import { FeedbackForm } from './FeedbackForm';
+
+const analytics = { info: jest.fn() };
+const handleClose = jest.fn();
+const setLoading = jest.fn();
+const setSent = jest.fn();
+
+describe('Feedback', () => {
+  test('should render Send Feedback button disabled', () => {
+    const { getAllByRole } = render(
+      <FeedbackForm
+        appName="This App"
+        analytics={analytics}
+        handleClose={handleClose}
+        loading={false}
+        sent={false}
+        setLoading={setLoading}
+        setSent={setSent}
+      />
+    );
+    const submitButton = getAllByRole('button')[4];
+
+    expect(submitButton).toHaveAttribute('disabled');
+  });
+
+  test('should not render Send Feedback button disabled if smile is selected', () => {
+    const { getAllByRole } = render(
+      <FeedbackForm
+        appName="This App"
+        analytics={analytics}
+        handleClose={handleClose}
+        loading={false}
+        sent={false}
+        setLoading={setLoading}
+        setSent={setSent}
+      />
+    );
+
+    const smileButton = getAllByRole('button')[0];
+
+    fireEvent.click(smileButton);
+
+    const submitButton = getAllByRole('button')[4];
+
+    expect(submitButton).not.toHaveAttribute('disabled');
+  });
+});

package/src/lib/FeedbackForm.tsx

@@ -0,0 +1,188 @@
+import React, { useEffect } from 'react';
+import { TextField } from '@availity/mui-textfield';
+import { LoadingButton, Button } from '@availity/mui-button';
+import { ToggleButtonGroup, ToggleButton } from '@availity/mui-toggle-button';
+import { Grid, SvgIconProps, ToggleButtonProps, styled } from '@mui/material';
+import { FaceFrownIcon, FaceNeutralIcon, FaceSmileIcon } from '@availity/mui-icon';
+import { FormLabel } from '@availity/mui-form-utils';
+import { avRegionsApi } from '@availity/api-axios';
+import { useForm, SubmitHandler, Controller } from 'react-hook-form';
+
+interface Inputs {
+  feedback: string;
+  smileField: string;
+}
+
+interface SmileButtonProps extends ToggleButtonProps {
+  disabled: boolean;
+  Icon: (props: SvgIconProps) => JSX.Element;
+  label: string;
+  value: string;
+}
+
+interface FeedbackFormProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  analytics: { info: (entries: Record<string, unknown>) => any };
+  appName: string;
+  handleClose: () => void;
+  loading: boolean;
+  sent: boolean;
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  setSent: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const SmileButtons = styled(ToggleButtonGroup, { name: 'AvFeedbackContainer', slot: 'SmileButtons' })({});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const SmileButton = ({ disabled, Icon, label, value, ...props }: SmileButtonProps) => (
+  <div>
+    <ToggleButton aria-label={value} value={value} {...props} disabled={disabled}>
+      <Icon fontSize="large" />
+    </ToggleButton>
+  </div>
+);
+
+export const FeedbackForm = ({
+  analytics,
+  appName,
+  handleClose,
+  loading,
+  sent,
+  setLoading,
+  setSent,
+}: FeedbackFormProps): JSX.Element | null => {
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    register,
+    setValue,
+    watch,
+  } = useForm<Inputs>();
+
+  const onSubmit: SubmitHandler<Inputs> = async ({ smileField, ...values }) => {
+    setLoading(true);
+    try {
+      const response = await avRegionsApi.getCurrentRegion();
+
+      await analytics.info({
+        surveyId: `${appName.replace(/\s/g, '_')}_Smile_Survey`,
+        smileLocation: `${appName}`,
+        smile: `icon-${smileField}`,
+        url: window.location.href,
+        region: response.data.regions[0] && response.data.regions[0].id,
+        userAgent: window.navigator.userAgent,
+        submitTime: new Date(),
+        ...values, // Spread the form values onto the logger
+      });
+      setSent(true);
+      setLoading(false);
+    } catch {
+      setSent(false);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (sent) {
+      setTimeout(() => {
+        handleClose();
+      }, 2000);
+    }
+  }, [sent]);
+
+  const options = [
+    {
+      Icon: FaceSmileIcon,
+      label: 'What do you like?',
+      value: 'smile',
+    },
+    {
+      Icon: FaceNeutralIcon,
+      label: 'What would you improve?',
+      value: 'meh',
+    },
+    { Icon: FaceFrownIcon, label: "What don't you like?", value: 'frown' },
+  ];
+
+  const getFeedbackLabel = () => {
+    const smile = watch('smileField');
+
+    const option = options.find((option) => option.value === smile);
+
+    return option?.label || 'What would you improve?';
+  };
+
+  if (!sent) {
+    return (
+      <Grid
+        component="form"
+        container
+        justifyContent="center"
+        onSubmit={handleSubmit(onSubmit)}
+        aria-label="Feedback Form"
+        aria-describedby="feedback-form-header"
+      >
+        <Controller
+          control={control}
+          name="smileField"
+          render={({ field }) => {
+            return (
+              <SmileButtons
+                children={options.map((props, index) => (
+                  <SmileButton autoFocus={index === 0} disabled={loading} key={props.value} {...props} />
+                ))}
+                {...field}
+                aria-labelledby="feedback-form-header"
+                onChange={(event: React.MouseEvent<HTMLElement>, value: string) => {
+                  setValue(field.name, value);
+                }}
+                size="medium"
+                exclusive
+              />
+            );
+          }}
+        />
+        <TextField
+          {...register('feedback', {
+            required: 'This field is required',
+            maxLength: { value: 200, message: 'This field must not exceed 200 characters' },
+          })}
+          fullWidth
+          multiline
+          minRows={3}
+          maxRows={3}
+          label={getFeedbackLabel()}
+          inputProps={{ 'aria-required': 'true' }}
+          InputLabelProps={{
+            component: FormLabel,
+            required: true,
+          }}
+          helperText={errors.feedback?.message || 'Max 200 characters'}
+          error={!!errors.feedback}
+          disabled={loading}
+        />
+        <Grid container direction="row" marginTop="16px" spacing={1}>
+          <Grid item xs={6}>
+            <Button color="secondary" disabled={loading} fullWidth onClick={handleClose}>
+              Cancel
+            </Button>
+          </Grid>
+          <Grid item xs={6}>
+            <LoadingButton
+              disabled={!watch('smileField')}
+              fullWidth
+              loading={loading}
+              type="submit"
+              variant="contained"
+            >
+              Send Feedback
+            </LoadingButton>
+          </Grid>
+        </Grid>
+      </Grid>
+    );
+  } else {
+    return null;
+  }
+};

package/src/lib/FeedbackHeader.test.tsx

@@ -0,0 +1,28 @@
+import { render, fireEvent } from '@testing-library/react';
+import { FeedbackHeader } from './FeedbackHeader';
+
+describe('FeedbackHeader', () => {
+  test('should render successfully', () => {
+    const handleClose = jest.fn();
+    const { getByText, getByLabelText } = render(
+      <FeedbackHeader appName="This App" handleClose={handleClose} loading={false} sent={false} />
+    );
+
+    expect(getByText('Tell us what you think about This App')).toBeTruthy();
+
+    const closeButton = getByLabelText('Close');
+
+    fireEvent.click(closeButton);
+
+    expect(handleClose).toHaveBeenCalled();
+  });
+
+  test('should render sent text successfully', () => {
+    const handleClose = jest.fn();
+    const { getByText } = render(
+      <FeedbackHeader appName="This App" handleClose={handleClose} loading={false} sent={true} />
+    );
+
+    expect(getByText('Thank you for your feedback.')).toBeTruthy();
+  });
+});

package/src/lib/FeedbackHeader.tsx

@@ -0,0 +1,36 @@
+import { IconButton } from '@availity/mui-button';
+import { CloseIcon } from '@availity/mui-icon';
+import { Typography } from '@availity/mui-typography';
+import { Grid } from '@mui/material';
+
+interface FeedbackHeaderProps {
+  appName: string;
+  handleClose: () => void;
+  loading: boolean;
+  sent: boolean;
+}
+
+export const FeedbackHeader = ({ appName, handleClose, loading, sent }: FeedbackHeaderProps): JSX.Element => {
+  return (
+    <Grid
+      alignItems="center"
+      container
+      direction="row"
+      marginBottom={!sent ? '8px' : '0px'}
+      justifyContent="space-between"
+      flexWrap="nowrap"
+      id="feedback-form-header"
+    >
+      <Grid item whiteSpace="normal">
+        <Typography component="h2" variant="h5">
+          {sent ? 'Thank you for your feedback.' : `Tell us what you think about ${appName}`}
+        </Typography>
+      </Grid>
+      <Grid item marginRight="-8px">
+        <IconButton disabled={loading} title="Close" onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+      </Grid>
+    </Grid>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}