@availity/feedback 0.0.0-t325224b2 → 1.0.0

package/src/FeedbackForm.js

@@ -0,0 +1,306 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button, ModalBody, ModalHeader, ModalFooter, FormGroup } from 'reactstrap';
+import { avLogMessagesApiV2, avRegionsApi } from '@availity/api-axios';
+import { Form, Field } from '@availity/form';
+import { SelectField } from '@availity/select';
+import * as yup from 'yup';
+
+import SmileField from './SmileField';
+
+yup.addMethod(yup.string, 'isRequired', function format(isRequired, msg) {
+  return this.test({
+    name: 'dateRange',
+    exclusive: true,
+    message: msg || 'This field is required.',
+    test(value) {
+      if (isRequired) {
+        return value !== undefined;
+      }
+      return true;
+    },
+  });
+});
+
+const fieldStyles = { resize: 'none' };
+const inlineStyles = { display: 'inline-block', margin: 0 };
+
+const FeedbackForm = ({
+  name,
+  onClose,
+  faceOptions,
+  aboutOptions = [],
+  aboutLabel = 'This is about',
+  onFeedbackSent,
+  prompt,
+  additionalComments = false,
+  staticFields,
+  analytics = avLogMessagesApiV2,
+  modalHeaderProps,
+  showSupport = false,
+  setSupportIsActive,
+  autoFocusFeedbackButton,
+  modal = true,
+  ...formProps
+}) => {
+  const [active, setActive] = useState(null);
+  const [sent, setSent] = useState(null);
+  const [loading, setLoading] = useState(null);
+  const ref = useRef();
+
+  const sendFeedback = async ({ smileField, ...values }) => {
+    setLoading(true);
+    const response = await avRegionsApi.getCurrentRegion();
+
+    await analytics.info({
+      surveyId: `${name.replaceAll(/\s/g, '_')}_Smile_Survey`,
+      smileLocation: `${name}`,
+      smile: `icon-${smileField.icon}`,
+      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
+      ...staticFields, // Spread the static key value pairs onto the logger
+    });
+
+    setSent(values);
+    setLoading(false);
+  };
+
+  // Close the Modal once sent after 2 seconds
+  useEffect(() => {
+    if (sent) {
+      setTimeout(() => {
+        if (onClose) {
+          onClose(); // Mostly for Screen Reader use but a nice to have for all
+        }
+        if (onFeedbackSent) {
+          for (const key of Object.keys(sent)) {
+            if (sent[key] === undefined) {
+              delete sent[key];
+            }
+          }
+
+          onFeedbackSent({
+            active: active.icon,
+            ...sent,
+          });
+        }
+      }, 2000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sent]);
+
+  return sent ? (
+    <ModalHeader
+      role="status"
+      id="feedback-form-header"
+      tabIndex="0"
+      className="d-flex justify-content-center"
+      {...modalHeaderProps}
+    >
+      Thank you for your feedback.
+    </ModalHeader>
+  ) : (
+    <>
+      <ModalHeader
+        id="feedback-form-header"
+        role="heading"
+        aria-level="2"
+        className="h5"
+        tag="div"
+        {...modalHeaderProps}
+      >
+        {prompt || `Tell us what you think about ${name}`}
+      </ModalHeader>
+      <Form
+        innerRef={ref}
+        aria-label="Feedback Form"
+        aria-describedby="feedback-form-header"
+        role="form"
+        onKeyDown={({ key }) => key === 'Escape' && onClose()}
+        data-testid="feedback-form"
+        initialValues={{
+          'face-options': undefined,
+          additionalFeedback: undefined,
+          feedback: undefined,
+          feedbackApp: undefined,
+          smileField: undefined,
+        }}
+        validationSchema={yup.object().shape({
+          feedback: yup.string().max(200, 'Feedback cannot exceed 200 characters.').required('This field is required.'),
+          additionalFeedback: yup.string().max(200, 'Additional Feedback cannot exceed 200 characters.'),
+          smileField: yup
+            .object()
+            .shape({
+              icon: yup.string().required(),
+              description: yup.string(),
+              label: yup.string(),
+            })
+            .required('This field is required.'),
+          feedbackApp: yup.string().isRequired(aboutOptions.length > 0, 'This field is required.'),
+        })}
+        {...formProps}
+        onSubmit={(values) => sendFeedback(values)}
+      >
+        <ModalBody>
+          <FormGroup
+            size="lg"
+            id="face-options"
+            role="group"
+            aria-labelledby="feedback-form-header"
+            data-testid="face-options"
+            className="d-flex flex-row justify-content-between"
+          >
+            <SmileField
+              options={faceOptions}
+              name="smileField"
+              onChange={(option) => setActive(option)}
+              onClose={onClose}
+              autoFocusFeedbackButton={autoFocusFeedbackButton}
+              modal={modal}
+            />
+          </FormGroup>
+
+          {active ? (
+            <>
+              {aboutOptions.length > 0 && (
+                <SelectField
+                  name="feedbackApp"
+                  id="about-options"
+                  data-testid="about-options"
+                  label={aboutLabel}
+                  options={aboutOptions}
+                />
+              )}
+
+              <Field
+                type="textarea"
+                name="feedback"
+                label={(active && active.label) || 'Feedback? Requests? Defects?'}
+                style={fieldStyles}
+                rows="2"
+              />
+              {additionalComments && (
+                <Field
+                  type="textarea"
+                  name="additionalFeedback"
+                  label="Additional Comments... (Optional)"
+                  style={fieldStyles}
+                  rows="2"
+                />
+              )}
+            </>
+          ) : null}
+        </ModalBody>
+
+        <ModalFooter>
+          {showSupport ? (
+            <>
+              <span className="d-none d-md-block" style={inlineStyles}>
+                Need Help?
+              </span>
+              <Button
+                className="pl-0"
+                onClick={() => setSupportIsActive(true)}
+                color="link"
+                type="button"
+                onKeyDown={({ key }) => key === 'Enter' && setSupportIsActive(true)}
+              >
+                Open a support ticket
+              </Button>
+            </>
+          ) : null}
+
+          {onClose ? (
+            <Button
+              type="button"
+              onClick={onClose}
+              color="secondary"
+              onKeyDown={({ key, shiftKey }) => {
+                if (key === 'Enter') {
+                  onClose();
+                }
+                if (key === 'Tab' && !active && !shiftKey && !modal) {
+                  onClose();
+                }
+              }}
+            >
+              Close
+            </Button>
+          ) : null}
+
+          <Button
+            onKeyDown={({ key, shiftKey }) => {
+              if (key === 'Enter') {
+                ref.current.submitForm();
+              }
+              if (key === 'Tab' && !shiftKey && !modal) {
+                onClose();
+              }
+            }}
+            type="submit"
+            color="primary"
+            disabled={Boolean(!active || loading)}
+          >
+            Send Feedback
+          </Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+FeedbackForm.propTypes = {
+  /** The name of the application this feedback is for. It is used in the API request to indicate where the feedback came from. */
+  name: PropTypes.string.isRequired,
+  /** Callback for when the feedback is submitted. It is called with the feedback object. */
+  onFeedbackSent: PropTypes.func,
+  /** Array of Objects containing icon (String), description (String), and label (String) properties.
+   * Allows you to override the smiley face options which appear.
+   * Default: Smiley Face, Meh Face, and Frowny Face.
+   * Previous placeholder property removed as of v6.0.0. Use label instead. */
+  faceOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.string,
+      description: PropTypes.string,
+      label: PropTypes.string,
+    })
+  ),
+  /** Array of Objects containing value (String,Number) and label (String) properties.
+   * Allows a dropdown displaying the options provided to let the user indicate what the feedback is about. */
+  aboutOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    })
+  ),
+  /** Label text for the dropdown created via the aboutOptions prop. Default: "This is about".
+   *Previously aboutPlaceholder. All placeholders replaced with labels starting v6.0.0. */
+  aboutLabel: PropTypes.node,
+  /** When provided, a "Close" button is rendered and onClose is excuted when it's clicked. */
+  onClose: PropTypes.func,
+  /** Text that prompts the user to provider feedback. Default: "Tell us what you think about ${appName}.". */
+  prompt: PropTypes.string,
+  /** If true, shows an optional comments field below. */
+  additionalComments: PropTypes.bool,
+  /** Static (non-user-entered) key/value pairs to be sent in feedback submission. */
+  staticFields: PropTypes.object,
+  /** Props to be spread onto the <ModalHeader /> rendered inside of the <FeedbackForm />. See ModalHeader
+   *For accessibility use className instead of tag to adjust size and style of header. */
+  modalHeaderProps: PropTypes.shape({ ...ModalHeader.propTypes }),
+  /** Override the analytics instance that is passed in. Default avLogMessagesApiV2 */
+  analytics: PropTypes.shape({
+    info: PropTypes.func.isRequired,
+  }),
+  /** Toggle whether or not to show the "Open a Support ticket" link in the FeedbackForm */
+  showSupport: PropTypes.bool,
+  setSupportIsActive: PropTypes.func,
+  /** Default: true. When set to false, the first feedback button is not focused.
+   * This is to avoid issues with focus causing other elements to close (e.g. dropdowns) */
+  autoFocusFeedbackButton: PropTypes.bool,
+  modal: PropTypes.bool,
+};
+
+export default FeedbackForm;

package/src/FeedbackModal.d.ts

@@ -0,0 +1,9 @@
+export interface FeedbackModalProps {
+  isOpen: boolean;
+  toggle: Function;
+  zIndex?: number | string;
+}
+
+declare const FeedbackModal: React.FC<FeedbackModalProps>;
+
+export default FeedbackModal;

package/src/FeedbackModal.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'reactstrap';
+
+import FeedbackForm from './FeedbackForm';
+import SupportModal from './SupportModal';
+
+const FeedbackModal = ({ isOpen, toggle, zIndex, showSupport, supportZIndex, feedbackToggle, ...formOptions }) => {
+  const [supportIsActive, setSupportIsActive] = React.useState(false);
+
+  return supportIsActive ? (
+    <SupportModal
+      supportIsActive={supportIsActive}
+      setSupportIsActive={setSupportIsActive}
+      zIndex={supportZIndex}
+      toggle={toggle}
+      feedbackToggle={feedbackToggle}
+    />
+  ) : (
+    <Modal
+      fade
+      id="feedbackModal"
+      data-testid="feedbackModal"
+      size="lg"
+      aria-labelledby="feedback-form-header"
+      isOpen={isOpen && !supportIsActive}
+      toggle={toggle}
+      zIndex={zIndex}
+    >
+      <FeedbackForm
+        onClose={toggle}
+        showSupport={showSupport}
+        setSupportIsActive={setSupportIsActive}
+        {...formOptions}
+      />
+    </Modal>
+  );
+};
+
+FeedbackModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  showSupport: PropTypes.bool,
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  supportZIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  feedbackToggle: PropTypes.func,
+};
+
+export default FeedbackModal;

package/src/SmileField.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useField, useFormikContext } from 'formik';
+
+import FeedbackButton from './FeedbackButton';
+
+const btnStyles = { flex: 1, margin: '0 2% 0 2%' };
+const defaultOptions = [
+  {
+    icon: 'smile',
+    description: 'Smiley face',
+    label: 'What do you like?',
+  },
+  {
+    icon: 'meh',
+    description: 'Meh face',
+    label: 'What would you improve?',
+  },
+  {
+    icon: 'frown',
+    description: 'Frowny face',
+    label: "What don't you like?",
+  },
+];
+
+const SmileField = ({ name, options = defaultOptions, onChange, autoFocusFeedbackButton = true, onClose, modal }) => {
+  const [{ value }] = useField(name);
+  const { setFieldValue } = useFormikContext();
+
+  return options.map((option, i) => (
+    <FeedbackButton
+      autoFocus={i === 0 && autoFocusFeedbackButton}
+      onKeyDown={(e) => {
+        if (e.shiftKey && e.keyCode === 9 && i === 0 && !modal) {
+          onClose();
+        }
+        if (e.keyCode === 13) {
+          setFieldValue(name, option);
+          if (onChange) {
+            onChange(option);
+          }
+        }
+      }}
+      style={btnStyles}
+      key={option.icon}
+      icon={option.icon}
+      iconSize="2x"
+      value={option}
+      active={value && value.icon}
+      onClick={() => {
+        setFieldValue(name, option);
+        if (onChange) {
+          onChange(option);
+        }
+      }}
+    >
+      {option.description}
+    </FeedbackButton>
+  ));
+};
+
+SmileField.propTypes = {
+  name: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.string,
+      description: PropTypes.string,
+      label: PropTypes.string,
+    })
+  ),
+  onChange: PropTypes.func,
+  autoFocusFeedbackButton: PropTypes.bool,
+  modal: PropTypes.bool,
+};
+
+export default SmileField;

package/src/SupportDropdown.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { DropdownMenu } from 'reactstrap';
+import BlockUi from '@availity/block-ui';
+
+import SupportForm from './SupportForm';
+
+const dropdownStyles = { width: '550px', maxWidth: '90vw', padding: 0 };
+
+const SupportDropdown = ({ setSupportIsActive, feedbackToggle }) => {
+  const [blocking, setBlocking] = useState(false);
+
+  return (
+    <DropdownMenu
+      right
+      style={dropdownStyles}
+      positionFixed="false"
+      role="dialog"
+      aria-labelledby="support-form-header"
+    >
+      <BlockUi tag="div" keepInView blocking={blocking}>
+        <SupportForm
+          setSupportIsActive={setSupportIsActive}
+          setBlocking={setBlocking}
+          feedbackToggle={feedbackToggle}
+        />
+      </BlockUi>
+    </DropdownMenu>
+  );
+};
+
+SupportDropdown.propTypes = {
+  setSupportIsActive: PropTypes.func,
+  feedbackToggle: PropTypes.func,
+};
+
+export default SupportDropdown;

package/src/SupportForm.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, ModalBody, ModalHeader, ModalFooter } from 'reactstrap';
+import { Form } from '@availity/form';
+import { AvOrganizationSelect } from '@availity/select';
+import * as yup from 'yup';
+import nativeForm from '@availity/native-form';
+import { avOrganizationsApi, avWebQLApi } from '@availity/api-axios';
+import '@availity/yup';
+
+const SUPPORT_PERMISSION_ID = '7205';
+
+const ORG_VALIDATION_MESSAGE = 'Please select an organization from the dropdown.';
+
+const getToken = () => document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$)|^.*$/, '$1');
+
+const openSupport = async (values, setBlocking, setSupportIsActive, feedbackToggle) => {
+  setBlocking(true);
+  const orgsResp = await avOrganizationsApi.getOrganizations(SUPPORT_PERMISSION_ID);
+  let salesforceResponse;
+  if (orgsResp.data.organizations.some((org) => org.id === values.organization.id)) {
+    salesforceResponse = await avWebQLApi.create({
+      query: `
+        query salesforceUser($organizationId: ID!) {
+          salesforceUser(organizationId: $organizationId) {
+            id
+            accountId
+            newCommunity
+          }
+        }
+      `,
+      variables: {
+        organizationId: values.organization.id,
+      },
+    });
+  }
+
+  let href = 'mailto:support@availity.com';
+  const target = '_top';
+
+  if (!salesforceResponse || !salesforceResponse.data) {
+    window.open(href, target);
+  }
+
+  const salesforceData = salesforceResponse.data.data.salesforceUser;
+  const ssoId = 'BJx3fqX3BH';
+  const newCommutySsoId = 'E-t_s_JQ0P';
+
+  if (salesforceData) {
+    const attributes = {
+      orgGenKey: values.organization.customerId,
+      organizationName: values.organization.name,
+      partyId: values.organization.id,
+      payerId: 'AVAILITY',
+      X_Client_ID: '5430d59f-c5cc-4be7-be5a-34472ec30fe9',
+      X_XSRF_TOKEN: getToken(),
+    };
+
+    if (salesforceData.id && salesforceData.accountId) {
+      attributes.avSalesForceContactId = salesforceData.id;
+      attributes.avSalesForceContactAccId = salesforceData.accountId;
+    }
+
+    href = `/ms/api/availity/internal/spc/magneto/sso/v1/saml/${salesforceData.newCommunity ? newCommutySsoId : ssoId}`;
+
+    await nativeForm(ssoId, attributes, { action: href, target: '_blank' }, 'saml');
+    setBlocking(false);
+  } else {
+    window.open(href, target);
+  }
+  setSupportIsActive(false);
+  feedbackToggle(false);
+};
+
+function orgSelectTest(msg) {
+  const orgSelectSchema = yup.object().shape({
+    id: yup.string().isRequired(true, ORG_VALIDATION_MESSAGE),
+    name: yup.string().isRequired(true, ORG_VALIDATION_MESSAGE),
+  });
+
+  return this.test({
+    name: 'orgSelectTest',
+    exclusive: true,
+    message: msg || 'This field is invalid.',
+    async test(componentValue) {
+      if (!componentValue) return true;
+
+      const valid = await orgSelectSchema.isValid(componentValue);
+      return valid;
+    },
+  });
+}
+
+yup.addMethod(yup.object, 'orgSelectTest', orgSelectTest);
+
+const SupportForm = ({ setSupportIsActive, setBlocking, feedbackToggle }) => (
+  <>
+    <ModalHeader id="support-form-header" role="heading" aria-level="2" className="h5" tag="div">
+      Open Support Ticket
+    </ModalHeader>
+    <Form
+      aria-label="Support Form"
+      aria-describedby="support-form-header"
+      role="form"
+      data-testid="support-form"
+      initialValues={{
+        organization: undefined,
+      }}
+      validationSchema={yup.object({
+        organization: yup
+          .object()
+          .orgSelectTest(ORG_VALIDATION_MESSAGE)
+          .isRequired(ORG_VALIDATION_MESSAGE)
+          .typeError(ORG_VALIDATION_MESSAGE),
+      })}
+      onSubmit={(values) => openSupport(values, setBlocking, setSupportIsActive, feedbackToggle)}
+    >
+      <ModalBody>
+        <AvOrganizationSelect
+          name="organization"
+          label="Select an Organization"
+          data-testid="org-dropdown"
+          getResult={(data) => data.organizations}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          onClick={() => setSupportIsActive(false)}
+          color="secondary"
+          type="button"
+          onKeyDown={({ keyCode }) => keyCode === 13 && setSupportIsActive(false)}
+        >
+          Close
+        </Button>
+        <Button data-testid="submit-btn" type="submit" color="primary">
+          Continue
+        </Button>
+      </ModalFooter>
+    </Form>
+  </>
+);
+
+SupportForm.propTypes = {
+  setSupportIsActive: PropTypes.func,
+  setBlocking: PropTypes.func,
+  feedbackToggle: PropTypes.func,
+};
+
+export default SupportForm;

package/src/SupportModal.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'reactstrap';
+import BlockUi from '@availity/block-ui';
+
+import SupportForm from './SupportForm';
+
+const SupportModal = ({ supportIsActive, toggle, supportZIndex, setSupportIsActive, feedbackToggle }) => {
+  const [blocking, setBlocking] = useState(false);
+
+  return (
+    <Modal
+      fade
+      id="supportModal"
+      data-testid="supportModal"
+      aria-labelledby="support-form-header"
+      isOpen={supportIsActive}
+      toggle={toggle}
+      zIndex={supportZIndex}
+    >
+      <BlockUi tag="div" blocking={blocking}>
+        <SupportForm
+          setSupportIsActive={setSupportIsActive}
+          setBlocking={setBlocking}
+          feedbackToggle={feedbackToggle}
+        />
+      </BlockUi>
+    </Modal>
+  );
+};
+
+SupportModal.propTypes = {
+  supportIsActive: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  supportZIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  setSupportIsActive: PropTypes.func,
+  feedbackToggle: PropTypes.func,
+};
+
+export default SupportModal;

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.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"]
+}