@availity/feedback 0.0.0-t325224b2 → 1.0.0

package/Feedback.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { UncontrolledDropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
-import FeedbackForm from './FeedbackForm';
-
-const Feedback = ({
-  appName,
-  formProps,
-  children,
-  className,
-  color,
-  outline,
-  prompt,
-  onFeedbackSent,
-  ...props
-}) => (
-  <UncontrolledDropdown className={`${className} hidden-print`} {...props}>
-    <DropdownToggle color={color} outline={outline}>
-      {children || 'Give Feedback'}
-    </DropdownToggle>
-    <DropdownMenu right className="p-3" style={{ width: '400px' }}>
-      <FeedbackForm
-        name={appName}
-        onFeedbackSent={onFeedbackSent}
-        prompt={prompt}
-        {...formProps}
-      />
-    </DropdownMenu>
-  </UncontrolledDropdown>
-);
-
-Feedback.propTypes = {
-  appName: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  prompt: PropTypes.string,
-  color: PropTypes.string,
-  outline: PropTypes.bool,
-  formProps: PropTypes.object,
-  children: PropTypes.node,
-  onFeedbackSent: PropTypes.func,
-};
-
-Feedback.defaultProps = {
-  className: '',
-  color: 'light',
-};
-
-export default Feedback;

package/FeedbackButton.js

@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-import { Button } from 'reactstrap';
-
-const btnStyles = { fontSize: '1.4em', padding: '.2em .4em' };
-
-class FeedbackButton extends Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-    icon: PropTypes.string,
-    active: PropTypes.string,
-    children: PropTypes.node,
-  };
-
-  onClickHandler = () => {
-    const { onClick, icon } = this.props;
-
-    onClick(icon);
-  };
-
-  render() {
-    const { icon, active, children } = this.props;
-    return (
-      <Button
-        style={btnStyles}
-        color={active === icon ? 'primary' : 'light'}
-        onClick={this.onClickHandler}
-      >
-        <span className={`icon icon-${icon}`} />
-        <span className="sr-only">{children}</span>
-      </Button>
-    );
-  }
-}
-
-export default FeedbackButton;

package/FeedbackForm.d.ts

@@ -1,21 +0,0 @@
-type FaceOption = {
-    icon?: string;
-    description?: string;
-};
-
-type AboutOption = {
-    icon?: string;
-    label?: string;
-};
-
-export interface FeedBackFormProps {
-    name: string;
-    onFeedbackSent?: Function;
-    faceOptions?: Array<FaceOption>;
-    aboutOptions?: Array<AboutOption>;
-    prompt?: string;
-}
-
-declare const FeedBackForm: React.ComponentType<FeedBackFormProps>;
-
-export default FeedBackForm;

package/FeedbackForm.js

@@ -1,137 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Input, FormFeedback } from 'reactstrap';
-import { avLogMessagesApi, avRegionsApi } from '@availity/api-axios';
-import FeedbackButton from './FeedbackButton';
-
-class FeedbackForm extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    onFeedbackSent: PropTypes.func,
-    faceOptions: PropTypes.arrayOf(
-      PropTypes.shape({
-        icon: PropTypes.string,
-        description: PropTypes.string,
-      })
-    ),
-    aboutOptions: PropTypes.arrayOf(
-      PropTypes.shape({
-        value: PropTypes.string,
-        label: PropTypes.string,
-      })
-    ),
-    prompt: PropTypes.string,
-  };
-
-  static defaultProps = {
-    faceOptions: [
-      {
-        icon: 'smile',
-        description: 'Smiley face',
-      },
-      {
-        icon: 'meh',
-        description: 'Meh face',
-      },
-      {
-        icon: 'frown',
-        description: 'Frowny face',
-      },
-    ],
-    aboutOptions: [],
-  };
-
-  state = {};
-
-  setActive = icon => {
-    this.setState({ active: icon, invalid: null });
-  };
-
-  setTextFeedback = e => {
-    this.setState({ textFeedback: e.target.value });
-  };
-
-  componentWillReceiveProps() {
-    const { sent } = this.state;
-
-    if (sent) {
-      this.state = {};
-    }
-  }
-
-  sendFeedback = async () => {
-    const { active, textFeedback } = this.state;
-    const { name, onFeedbackSent } = this.props;
-    if (!active) {
-      this.setState({ invalid: true });
-      return;
-    }
-    const response = await avRegionsApi.getCurrentRegion();
-    await avLogMessagesApi.info({
-      surveyId: `${name.replace(/\s/g, '_')}_Smile_Survey`,
-      smileLocation: `${name}`,
-      smile: `icon-${active}`,
-      feedback: textFeedback,
-      url: window.location.href,
-      region: response.data.regions[0] && response.data.regions[0].id,
-      userAgent: window.navigator.userAgent,
-      submitTime: new Date(),
-    });
-
-    if (onFeedbackSent) {
-      onFeedbackSent(this.state);
-    }
-    this.setState({ sent: true, invalid: false });
-  };
-
-  render() {
-    const { sent, active, invalid } = this.state;
-    const { name, prompt, faceOptions, aboutOptions } = this.props;
-
-    return sent ? (
-      <div className="text-center">Thank you for your feedback.</div>
-    ) : (
-      <div className="text-center">
-        <p>{prompt || `Tell us what you think about ${name}.`}</p>
-        <ButtonGroup>
-          {faceOptions.map(option => (
-            <FeedbackButton
-              key={option.icon}
-              icon={option.icon}
-              active={active}
-              onClick={this.setActive}
-            >
-              {option.description}
-            </FeedbackButton>
-          ))}
-        </ButtonGroup>
-        <FormFeedback className={invalid ? 'd-block' : undefined}>
-          Please select one of the faces above
-        </FormFeedback>
-        {aboutOptions.length > 0 && (
-          <select className="custom-select" type="select">
-            {aboutOptions.map(option => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        )}
-        <Input
-          className="mt-3"
-          type="textarea"
-          placeholder="Feedback? Requests? Defects? (optional)"
-          onChange={this.setTextFeedback}
-          aria-label="Please provide any feedback, requests, and/or defects."
-        />
-        <div className="mt-3 text-right">
-          <Button onClick={this.sendFeedback} color="primary">
-            Send
-          </Button>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default FeedbackForm;

package/LICENSE

@@ -1,20 +0,0 @@
-Copyright (c) 2017-present Availity, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/tests/Feedback.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render } from 'react-testing-library';
-import Feedback from '..';
-
-describe('Feedback', () => {
-  test('should render', () => {
-    const { container } = render(<Feedback appName="Payer Space" />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should render custom button text', () => {
-    const { container } = render(
-      <Feedback appName="Payer Space">Provide Valuable Feedback</Feedback>
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should render custom button color', () => {
-    const { container } = render(
-      <Feedback appName="Payer Space" color="success" />
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should render custom prompt text', () => {
-    const { container } = render(
-      <Feedback appName="Payer Space" prompt="Provide same feedback" />
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should render custom form props', () => {
-    const { container } = render(
-      <Feedback
-        appName="Payer Space"
-        formProps={{
-          aboutOptions: [
-            { value: 'payerSpace', label: 'Payer Space' },
-            { value: 'wholeSite', label: 'Whole Site' },
-          ],
-        }}
-      />
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should render custom className', () => {
-    const { container } = render(
-      <Feedback appName="Payer Space" className="junk and-stuff" />
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-});

package/tests/FeedbackForm.test.js

@@ -1,99 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from 'react-testing-library';
-import { FeedbackForm } from '..';
-
-describe('Feedback', () => {
-  test('should render', () => {
-    const { container } = render(<FeedbackForm name="Payer Space" />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should indicate active smiley', () => {
-    const { container, getByText } = render(
-      <FeedbackForm name="Payer Space" />
-    );
-
-    // Get the Option with the smiley face
-    const smileyFeedbackField = getByText('Smiley face');
-
-    // Simulate the Click
-    fireEvent.click(smileyFeedbackField);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should set the feedback text value', () => {
-    const { container, getByPlaceholderText } = render(
-      <FeedbackForm name="Payer Space" />
-    );
-
-    // Get the Input Node for the Feedback
-    const feedbackNode = getByPlaceholderText(
-      'Feedback? Requests? Defects? (optional)'
-    );
-
-    // Simulate a user typing the value below into the field
-    fireEvent.change(feedbackNode, {
-      target: { value: 'some good text here' },
-    });
-
-    // Check if the Input Got Updated
-    expect(feedbackNode.value).toEqual('some good text here');
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should render custom face icons', () => {
-    const faceOptions = [
-      {
-        icon: 'happy',
-        description: 'Happy face',
-      },
-      {
-        icon: 'okay',
-        description: 'Okay face',
-      },
-      {
-        icon: 'sad',
-        description: 'Sad face',
-      },
-      {
-        icon: 'confused',
-        description: 'Confused face',
-      },
-    ];
-
-    const { container } = render(
-      <FeedbackForm name="Payer Space" faceOptions={faceOptions} />
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should render custom button color', () => {
-    const aboutOptions = [
-      {
-        value: 'this space',
-        label: 'This Payer Space',
-      },
-      {
-        value: 'that space',
-        label: 'That Payer Space',
-      },
-      {
-        value: 'portal',
-        label: 'Portal as a whole',
-      },
-      {
-        value: 'availity',
-        label: 'Availity as a whole',
-      },
-    ];
-    const { container } = render(
-      <FeedbackForm name="Payer Space" aboutOptions={aboutOptions} />
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-});