@asd20/ui 3.2.977 → 3.2.978

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.977",
+  "version": "3.2.978",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20Icon/index.stories.js

@@ -108,8 +108,7 @@ storiesOf('Atoms - Asd20Icon', module)
           'youtube',
           'twitter',
           'facebook',
-
-          'accessiblity',
+          'accessibility',
           'alert',
           'award',
           'bell',

package/src/components/organisms/Asd20AccessibilityIssueModal/index.stories.js

@@ -0,0 +1,20 @@
+import { storiesOf } from '@storybook/vue'
+import Asd20AccessibilityIssueModal from '.'
+
+const info = {
+  summary: 'Asd20AccessibilityIssueModal',
+}
+
+const wrapper = {
+  components: { Asd20AccessibilityIssueModal },
+  data: () => ({}),
+}
+
+storiesOf('Organisms - Asd20AccessibilityIssueModal', module).add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `<Asd20AccessibilityIssueModal :open="true" recipient-id="14776"></Asd20AccessibilityIssueModal>`,
+  }),
+  { info }
+)

package/src/components/organisms/Asd20AccessibilityIssueModal/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <asd20-modal
+    :open="open"
+    title="Report an Accessibility Issue"
+    icon="accessibility"
+    dismissable
+    windowed
+    class="asd20-accessibility-issue-modal"
+    @dismiss="$emit('dismiss')"
+  >
+    <Asd20Viewport scrollable>
+      <div v-if="submissionSuccess" class="submission-success">
+        <p style="text-align: center; font-weight: bold; font-size: 1.1rem;">
+          Thank you! Your issue has been submitted.
+        </p>
+      </div>
+
+      <template v-else>
+        <asd20-text-input
+          id="firstName"
+          label="First Name"
+          required
+          v-model="form.firstName"
+          @validated="validationErrors.firstName = $event"
+        />
+        <asd20-text-input
+          id="lastName"
+          label="Last Name"
+          required
+          v-model="form.lastName"
+          @validated="validationErrors.lastName = $event"
+        />
+        <asd20-text-input
+          id="email"
+          label="Email Address"
+          type="email"
+          required
+          :validator="validateEmailAddress"
+          v-model="form.email"
+          @validated="validationErrors.email = $event"
+        />
+        <asd20-text-input
+          id="phone"
+          label="Phone Number"
+          v-model="form.phone"
+        />
+        <asd20-text-input
+          id="address"
+          label="Mailing Address"
+          v-model="form.address"
+        />
+        <asd20-text-input
+          id="organization"
+          label="Organization"
+          v-model="form.organization"
+        />
+        <asd20-text-area-input
+          id="issue"
+          label="Describe the Issue"
+          help-text="<ul style='margin: 0 0 0.5rem 1rem; font-size: 0.75rem !important;'>
+          <li>Please specify the exact URL, program, service, or digital asset you had a problem with.</li>
+          <li>Please provide as much detail as possible, including the nature of the accessibility barrier, the date and time it occurred, any assistive technology you were using, or the nature of the program or service being denied.</li>
+          <li>Please describe what you believe should be done to resolve the issue.</li>
+          </ul>"
+          required
+          v-model="form.issue"
+          @validated="validationErrors.issue = $event"
+        />
+        <asd20-button
+          label="Submit Issue"
+          :disabled="!isValid || sending"
+          @click="sendAccessibilityIssue"
+          horizontal
+          centered
+          bordered
+        />
+        <!-- <vue-recaptcha
+          sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
+          :loadRecaptchaScript="true"
+          size="invisible"
+          @verify="captchaVerified"
+        >
+          <asd20-button
+            v-show="isValid && !sending"
+            label="Submit Issue"
+            horizontal
+          />
+        </vue-recaptcha> -->
+        <asd20-spinner size="sm" v-if="sending" />
+      </template>
+    </Asd20Viewport>
+  </asd20-modal>
+</template>
+
+<script>
+import Asd20Modal from '../../molecules/Asd20Modal'
+import Asd20TextInput from '../../molecules/Asd20TextInput'
+import Asd20TextAreaInput from '../../molecules/Asd20TextAreaInput'
+import Asd20Viewport from '../../atoms/Asd20Viewport'
+import Asd20Spinner from '../../atoms/Asd20Spinner'
+import VueRecaptcha from 'vue-recaptcha'
+import Asd20Button from '../../atoms/Asd20Button'
+
+// import sendAccessibilityIssue from '../../../helpers/sendAccessibilityIssue.js'
+
+export default {
+  name: 'Asd20AccessibilityIssueModal',
+  components: {
+    Asd20Modal,
+    Asd20TextInput,
+    Asd20TextAreaInput,
+    Asd20Viewport,
+    Asd20Spinner,
+    VueRecaptcha,
+    Asd20Button,
+  },
+  props: {
+    open: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      sending: false,
+      submissionSuccess: false,
+      form: {
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        address: '',
+        organization: '',
+        issue: '',
+      },
+      validationErrors: {
+        firstName: [],
+        lastName: [],
+        email: [],
+        issue: [],
+      },
+    }
+  },
+  computed: {
+    isValid() {
+      return Object.values(this.validationErrors).every(e => e.length === 0)
+    },
+  },
+  methods: {
+    validateEmailAddress({ value, validationErrors }) {
+      const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+      if (!pattern.test(value)) {
+        validationErrors.push('A valid email address is required')
+      }
+      return validationErrors
+    },
+    captchaVerified(token) {
+      // Placeholder: reCAPTCHA not functional yet
+      this.submitIssue()
+    },
+    async sendAccessibilityIssue() {
+      if (!this.isValid || !this.$sendAccessibilityIssue) return
+      this.sending = true
+
+      try {
+        await this.$sendAccessibilityIssue(
+          this.form,
+          this.$config.happyfoxEndpoint,
+          this.$config.happyfoxApiKey,
+          this.$config.happyfoxAuthCode
+        )
+        this.submissionSuccess = true
+
+        // Wait 2 seconds, then close the modal
+        setTimeout(() => {
+          this.submissionSuccess = false
+          this.$emit('dismiss')
+        }, 2000)
+      } catch (e) {
+        console.error('Accessibility issue submission failed:', e.message || e)
+        alert(
+          'Something went wrong while submitting the form. Please try again later.'
+        )
+      } finally {
+        this.sending = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../design/_mixins.scss';
+@import '../../../design/_variables.scss';
+
+.asd20-accessibility-issue-modal {
+  &::v-deep .asd20-modal__content .asd20-viewport {
+    padding: space(1);
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-accessibility-issue-modal {
+    &::v-deep .asd20-modal__content .asd20-viewport {
+      padding: space(1);
+    }
+    &::v-deep .asd20-modal {
+      margin-top: auto;
+      margin-bottom: auto;
+      max-width: 40vw;
+    }
+  }
+}
+</style>

package/src/components/organisms/Asd20PageContent/index.vue

@@ -240,6 +240,7 @@ export default {
           // flex: 1 1 var(--minimum-column-width);
           // margin: var(--gutter) !important;
           max-width: 45%;
+          flex-grow: 1;
         }
       }
     }

package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.stories.js

@@ -0,0 +1,68 @@
+import { storiesOf } from '@storybook/vue'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import mockPageMixin from '../../../mixins/mockPageMixin'
+
+import Asd20WayfindingAccessibilityTemplate from '.'
+import pageQueryResult from '../../../data/page-queries/landing-page-query-result.json'
+import notifications from '../../../data/messages/notifications'
+
+const info = {
+  summary: 'Wayfinding Accessibility Page Template',
+}
+
+const wrapper = {
+  mixins: [mockPageMixin],
+  components: {
+    Asd20WayfindingAccessibilityTemplate,
+  },
+  watch: {
+    languageCode(newValue, oldValue) {
+      console.log(newValue, oldValue)
+    },
+  },
+
+  data: () => ({ pageQueryResult, languageCode: 'es' }),
+
+  computed: {
+    activeNotificationsByType() {
+      const empty = {
+        inline: [],
+        banner: [],
+        floating: [],
+        status: [],
+      }
+      return boolean('Show Notifications', true)
+        ? notifications || empty
+        : empty
+    },
+  },
+
+}
+
+const stories = storiesOf(
+  'Templates - Asd20WayfindingAccessibilityTemplate',
+  module
+)
+stories.addDecorator(withKnobs)
+
+stories.add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `
+    <Asd20WayfindingAccessibilityTemplate
+      v-bind="templateProps"
+      :menu-open.sync="menuOpen"
+      :search-open.sync="searchOpen"
+
+      @announcements-in-view="loadAnnouncements"
+      @stories-in-view="loadStories"
+      @events-in-view="loadEvents"
+      @files-in-view="loadFiles"
+      @people-in-view="loadPeople"
+      :languageCode.sync="languageCode"
+    />`,
+  }),
+  { info }
+)

package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="asd20-template-wayfinding-accessibility">
+    <!-- Skip Nav -->
+    <asd20-skip-to></asd20-skip-to>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
+    <!-- Banner Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.banner"
+        group-type="banner"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
+    <!-- Page Header -->
+    <asd20-page-header
+      id="page-header"
+      v-show="pageHeaderContent"
+      v-bind="pageHeaderContent"
+      :organization="organization"
+      :organization-options="organizationOptions"
+      :languageCode="languageCode"
+      v-on="$listeners"
+      :breadcrumb-links="breadcrumbLinks"
+    >
+      <!-- Floating Notifications -->
+      <template slot="top">
+        <client-only>
+          <asd20-notification-group
+            class="asd20-notification-group--floating"
+            :notifications="activeNotificationsByType.floating"
+            :total-dismissed-notifications="totalDismissedNotifications"
+            group-type="floating"
+            @dismiss="$emit('dismiss-notification', $event)"
+            @toggle-all="$emit('toggle-all')"
+          ></asd20-notification-group>
+        </client-only>
+      </template>
+      <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
+    </asd20-page-header>
+
+    <!-- Inline-Notifications -->
+    <template>
+      <client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--inline"
+          :notifications="activeNotificationsByType.inline"
+          group-type="inline"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
+      </client-only>
+    </template>
+
+    <!-- Page Content -->
+    <asd20-page-content
+      class="intro-message"
+      :primary-messages="primaryMessage"
+      omit-detail-links
+      omit-calls-to-action
+    />
+    <asd20-page-content
+      :class="wayFindingPrimaryMessages.length > 3 ? 'limit-message-width' : ''"
+      :primary-messages="wayFindingPrimaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-body-content
+      omit-calls-to-action
+      grid
+    />
+
+    <!-- Feed Section -->
+    <asd20-feeds-section
+      :announcements="announcements"
+      :announcements-feed-props="announcementsFeedProps"
+      @announcements-in-view="$emit('announcements-in-view')"
+      :stories="stories"
+      :stories-feed-props="storiesFeedProps"
+      @stories-in-view="$emit('stories-in-view')"
+      :events="events"
+      :events-feed-props="eventsFeedProps"
+      @events-in-view="$emit('events-in-view')"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    ></asd20-feeds-section>
+
+    <!-- Photos & Videos -->
+    <asd20-media-section
+      v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :images="this.firstMessage.images || []"
+      :videos="this.firstMessage.videos || []"
+    >
+    </asd20-media-section>
+
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      v-if="
+        widgetsSectionProps.footer ||
+          widgetsSectionProps.sidebar ||
+          $slots.widgets
+      "
+      :related-links="relatedLinks"
+      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
+      @events-in-view="$emit('events-in-view')"
+      @files-in-view="$emit('files-in-view')"
+      @people-in-view="$emit('people-in-view')"
+      full
+      ><slot name="widgets"
+    /></asd20-widgets-section>
+
+    <slot name="before-footer" />
+
+    <!-- Quick Links -->
+    <asd20-quicklinks-menu slot="before-footer" :quick-links="quickLinks">
+      <slot name="quicklinks-menu" />
+    </asd20-quicklinks-menu>
+
+    <!-- Footer -->
+    <asd20-page-footer
+      :organization="organization"
+      :socialLinks="socialLinks"
+      :disclosureLinks="disclosureLinks"
+      :websiteLogoProps="websiteLogoProps"
+      :websiteLogoProps2="websiteLogoProps2"
+    >
+      <slot name="page-footer" />
+    </asd20-page-footer>
+    <Asd20AccessibilityIssueModal
+      v-show="modalVisible"
+      :open="modalOpen"
+      @dismiss="modalOpen = false"
+    />
+  </div>
+</template>
+
+<script>
+// Components
+import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
+import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
+
+import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
+import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
+
+import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
+import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
+import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
+import Asd20AccessibilityIssueModal from '../../../components/organisms/Asd20AccessibilityIssueModal'
+import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
+import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
+import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
+
+// import Intersect from 'vue-intersect'
+
+// Mixins
+import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+
+export default {
+  name: 'Asd20WayfindingAccessibilityTemplate',
+  mixins: [pageTemplateMixin],
+  components: {
+    Asd20PageContent,
+    Asd20SkipTo,
+    Asd20PageHeader,
+    Asd20PageFooter,
+    Asd20SiteNavigation,
+    Asd20WidgetsSection,
+    Asd20FeedsSection,
+    Asd20NotificationGroup,
+    Asd20QuicklinksMenu,
+    Asd20MediaSection,
+    Asd20AccessibilityIssueModal,
+  },
+  data() {
+    return {
+      modalVisible: false,
+      modalOpen: false,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const btn = document.querySelector('[data-trigger-accessibility-modal]')
+      if (btn) {
+        btn.addEventListener('click', () => {
+          this.modalVisible = true
+          this.$nextTick(() => {
+            this.modalOpen = true
+          })
+        })
+      }
+    })
+  },
+  computed: {
+    wayFindingPrimaryMessages() {
+      // wayfinding page
+      return (
+        this.messages
+          // Remove the first message, limit
+          .slice(
+            1,
+            Math.min(this.messages.length, this.primaryMessageLimit + 1)
+          )
+      )
+    },
+    primaryMessage() {
+      const introMessage = this.primaryMessages.slice(0, 1)
+      if (introMessage[0].bodyHtml === '' || null) return
+      return introMessage
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
+@import '../../../design/_typography.scss';
+@import '../../../design/_template.scss';
+@import '../../../design/_print.scss';
+@import '../../../design/tokens.css';
+
+.asd20-template-wayfinding-accessibility {
+  @include typography;
+  @include template;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2.0375);
+    // .bell {
+    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
+    //   svg {
+    //     fill: var(--color__accent) !important;
+    //   }
+    //   span {
+    //     background: var(--color__accent) !important;
+    //     top: inherit !important;
+    //     right: inherit !important;
+    //     width: 1.2rem !important;
+    //     height: 1.2rem !important;
+    //     font-size: 0.75rem !important;
+    //   }
+    // }
+  }
+  .asd20-notification-group--inline {
+    margin-top: space(2) !important;
+  }
+
+  .intro-message {
+    .primary-messaging-section {
+      justify-content: center;
+      margin-top: space(1) !important;
+      padding: space(1) space(2) !important;
+      .asd20-messaging {
+        border-top: space(0.25) solid var(--color__tertiary);
+        border-bottom: space(0.25) solid var(--color__tertiary);
+        padding: space(1) 0;
+      }
+    }
+
+    p {
+      // font-family: var(--website-typography__font-family-headlines);
+      font-size: 1rem !important;
+      line-height: 1.5;
+      font-family: var(--website-typography__font-family-headlines);
+    }
+    h2 {
+      @include asd20-font(
+        1.5,
+        var(--website-typography__font-family-headlines),
+        1.2,
+        700
+      );
+      font-family: var(--website-typography__font-family-headlines);
+      // font-size: 36px !important;
+    }
+  }
+  // .asd20-messaging {
+  //   padding-bottom: space(2);
+  //   border-bottom: 10px solid var(--color__tertiary);
+  // }
+}
+
+@media (min-width: 1024px) {
+  .asd20-template-wayfinding-accessibility {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      // .bell {
+      //   span {
+      //     background: var(--color__accent);
+      //     top: -0.6em !important;
+      //     right: -0.6em !important;
+      //   }
+      // }
+    }
+    @include template-desktop;
+    margin-left: space(3);
+    margin-top: 0;
+    .asd20-page-content {
+      margin-top: space(0);
+    }
+    // .intro-message {
+    //   width: 90%;
+    // }
+  }
+}
+
+@media (min-width: 1790px) {
+  .limit-message-width {
+    .primary-messaging-section,
+    .secondary-messaging-section {
+      .asd20-messaging {
+        flex: 1 1 var(--minimum-column-width);
+        margin: var(--gutter) !important;
+        max-width: 30% !important;
+      }
+    }
+  }
+}
+</style>

package/src/data/page-queries/landing-page-query-result.json

@@ -80,7 +80,7 @@
           "id": "4fe4dc65-0d61-497f-8596-e4c5d156bf71",
           "title": "Supports for Academic Success",
           "summary": "Academy District 20 provides a host of services so all students have the tools they need to achieve academic success.",
-          "bodyHtml": "<h2>Overview</h2><p>Each Academy District 20 school has at least one special education teacher and speech/language pathologist. Students may also receive supports from school social workers, school psychologists, school nurses and occupational and physical therapists.&nbsp;</p><p>Our special education staff members work with students and their families in a variety of ways such as: completing assessments, participating in the development of Individual Education Plans (IEPs) and providing specialized support services.&nbsp;</p><p>Special Education staff&nbsp;meet the state standards for licensed teachers and/or special service providers through the Colorado Department of Education.&nbsp;</p><h2>Inclusion at Academy District 20</h2><p>Inclusion is a child-centered, collaborative process that focuses on the unique needs of each student as an equally valued member of the school community. Inclusion gives each student authentic access to the standards driven curriculum and social community through meaningful instruction and interaction supported by the intentional allocation of time and resources.</p><p>This includes the practice of educating all students together to the maximum extent appropriate with the long -range goal of independence, and participation in and contribution to the community.</p>",
+          "bodyHtml": "<h2>Overview</h2><p>Each Academy District 20 school has at least one special education teacher and speech/language pathologist. Students may also receive supports from school social workers, school psychologists, school nurses and occupational and physical therapists.&nbsp;</p><p>Our special education staff members work with students and their families in a variety of ways such as: completing assessments, participating in the development of Individual Education Plans (IEPs) and providing specialized support services.&nbsp;</p><p>Special Education staff&nbsp;meet the state standards for licensed teachers and/or special service providers through the Colorado Department of Education.&nbsp;</p><h2>Inclusion at Academy District 20</h2><p>Inclusion is a child-centered, collaborative process that focuses on the unique needs of each student as an equally valued member of the school community. Inclusion gives each student authentic access to the standards driven curriculum and social community through meaningful instruction and interaction supported by the intentional allocation of time and resources.</p><p>This includes the practice of educating all students together to the maximum extent appropriate with the long -range goal of independence, and participation in and contribution to the community.</p><button class='asd20-button' data-trigger-accessibility-modal style='margin: 1rem auto; padding: var(--space-1, 1em); background-color: var(--website-page__background-color, #f5f5f5); color: var(--website-page__title-color, #333); font-family: var(--website-typography__font-family-headlines; font-size: 1rem; font-weight: bold; border: 2px solid var(--color__primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;'>Notify Us of an Accessibility Issue</button>",
           "status": "Published",
           "publishDateTime": "2019-07-02T20:42:12.000Z",
           "expireDateTime": null,

package/src/helpers/sendAccessibilityIssue.js

@@ -0,0 +1,47 @@
+import axios from 'axios'
+
+function issueIsValid(issue) {
+  return !!issue.firstName && !!issue.lastName && !!issue.email && !!issue.issue
+}
+
+export default async function sendAccessibilityIssue(issue, endpoint, apiKey, authCode) {
+  if (!issueIsValid(issue)) {
+    throw new Error('The issue object is incomplete or invalid.')
+  }
+
+  const payload = {
+    name: `${issue.firstName} ${issue.lastName}`,
+    email: issue.email,
+    phone: issue.phone || '',
+    subject: 'Accessibility Issue Reported via External ASD20 Website',
+    html: `
+      <p><strong>Issue Details:</strong></p>
+      <p>${issue.issue}</p>
+      <p><strong>Mailing Address:</strong> ${issue.address || 'Not provided'}</p>
+      <p><strong>Organization:</strong> ${issue.organization || 'Not provided'}</p>
+    `,
+    category: Number(process.env.HAPPYFOX_CATEGORY_ID),
+  }
+
+  try {
+    const response = await axios.post(endpoint, payload, {
+      headers: {
+        Authorization: `Basic ${btoa(`${apiKey}:${authCode}`)}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      }
+    })
+
+    return response.data
+  } catch (error) {
+    if (error.response) {
+      throw new Error(
+        `HappyFox error ${error.response.status}: ${JSON.stringify(
+          error.response.data
+        )}`
+      )
+    } else {
+      throw new Error(`Request error: ${error.message}`)
+    }
+  }
+}