Как создать пользовательскую форму вместо виджета FreshDesk в React? - PullRequest
Новая
       43

Как создать пользовательскую форму вместо виджета FreshDesk в React?

0 голосов
/ 17 октября 2019

Я пытаюсь выяснить, как написать этот виджет Freshdesk как пользовательский компонент. Я думал, что форма будет работать, но я понятия не имею, как «подключить» форму к тому, что происходит с iframe. Должен ли я использовать вызов AJAX? Так работают эти виджеты iframe? 

const buildCustomQuery = (customText, prepopulatedFields) => {
  const customizerQueries = [
    ...Object.entries(customText).map(([key, value]) => `${key}=${value}`),
    ...Object.entries(prepopulatedFields)
      .filter(([, value]) => value)
      .map(([key, value]) => `helpdesk_ticket[${key}]=${value}`),
  ]
  return customizerQueries.length ? `&${customizerQueries.join(';')}` : ''
}


function FreshdeskWidget({ subject, error, sentryId, description }) {
  const profile = getProfile()
  const sentry = sentryId && `Sentry ID: ${sentryId}`
  const joinedDescription = [sentry, description, error]
    .filter(item => item)
    .join(' \u2014 ')

  const customText = {
    widgetType: 'embedded',
    formTitle: 'Report+an+Issue',
    submitTitle: 'Request+Support',
    submitThanks:
      '//SUBMIT MESSAGE',
    screenshot: 'No',
    captcha: 'yes',
  }
  const prepopulatedFields = {
    requester: profile && profile.email,
    subject,
    description: joinedDescription,
  }
  return (
    <>
      <script
        type="text/javascript"
        src="// FRESHDESK JAVASCRIPT LINK"
      />
      <style type="text/css" media="screen, projection">
        {
          '@import url(//FRESHDESK CSS LINK); '
        }
      </style>
      <iframe
        title="Feedback Form"
        className="freshwidget-embedded-form"
        id="freshwidget-embedded-form"
        src={
          config.support.url + buildCustomQuery(customText, prepopulatedFields)
        }
        scrolling="no"
        height="500px"
        width="100%"
        frameBorder="0"
      />
    </>
  )
}
...