@icij/murmur-next 4.0.0

package/lib/components/DonateForm.vue

@@ -0,0 +1,367 @@
+<script>
+import keys from 'lodash/keys'
+import map from 'lodash/map'
+import sortBy from 'lodash/sortBy'
+import forEach from 'lodash/forEach'
+
+import config from '../config'
+import {useI18n} from "vue-i18n";
+import {computed, ref, watch} from "vue";
+
+/**
+ * A form to encourage donations. We usually put this form inside a modal
+ */
+export default {
+name: 'DonateForm',
+  props: {
+    /**
+     * Title of the form.
+     */
+    noTitle: {
+      type: Boolean
+    }
+  },
+  setup(){
+    const {t, locale, messages} = useI18n()
+    const amount = ref(10)
+    // True if the amount wasn't changed by the user yet
+    const amountIsPristine = ref(true)
+    const installmentPeriod = ref('monthly')
+    const level = ref('conversation')
+    const campaign = ref(config.get('donate-form.tracker'))
+    const labelForChange = ref({
+      monthly: {
+        1: t('donate-form.result.conversation'),
+        15: t('donate-form.result.rules'),
+        50: t('donate-form.result.world')
+      },
+      yearly: {
+        1: t('donate-form.result.conversation'),
+        180: t('donate-form.result.rules'),
+        600: t('donate-form.result.world')
+      }
+    })
+
+    const suggestedAmount = ref(messages.value[locale.value]['donate-form']["suggesteddonation"])
+    const listBenefits = ref(messages.value[locale.value]['donate-form']["benefits"]["list"])
+    const ranges = computed(()=> {
+      if(installmentPeriod.value==='onetime'){
+        return labelForChange.value['yearly']
+      }
+      return labelForChange.value[installmentPeriod.value]
+    })
+    const firstRange = computed(()=> {
+      const key = keys(ranges.value)[0]
+      return ranges.value[key]
+    })
+    const changeThe = computed(()=> {
+          // Final label
+          let label = null
+          forEach(sortBy(map(keys(ranges.value), Number)), (amountV) => {
+            label = amount.value >= amountV ? ranges.value[amountV] : label
+          })
+          return label
+        }
+
+    )
+    watch(installmentPeriod,() => {
+      if (!amountIsPristine.value) {
+        return
+      }
+
+      // Set suggested amount
+      amount.value = getSuggestedAmount()
+    })
+    watch(()=>amount.value,(v) => {
+          level.value = changeThe.value
+
+          // Set manual amount
+          return (amount.value = v)
+        }
+    )
+    function getSuggestedAmount() {
+      if (!amountIsPristine.value) {
+        return
+      }
+
+      if (!level.value) {
+        level.value = firstRange.value
+      }
+
+      // Return suggested amount
+      return suggestedAmount.value[level.value][installmentPeriod.value]
+    }
+    function selectLevel(levelSelected) {
+      // Set chose level
+      level.value = levelSelected
+
+      // Set suggested amount
+      amount.value = getSuggestedAmount()
+    }
+    function amountIsNotPristine(){
+      amountIsPristine.value = false
+    }
+
+    return {
+      t,
+      amount,
+      level,
+      campaign,
+      labelForChange,
+      installmentPeriod,
+      changeThe,
+      listBenefits,
+      selectLevel,
+      amountIsNotPristine
+    }
+
+  },
+
+}
+</script>
+
+<template>
+  <div class="donate-form container-fluid py-2">
+    <h2 v-if="!noTitle" class="donate-form__title text-uppercase fw-bold text-primary h5">
+      {{ t('donate-form.support') }}
+    </h2>
+    <!-- @slot Description of the form (bellow the title). -->
+    <slot name="introduction">
+      <!-- eslint-disable vue/no-v-html -->
+      <p class="donate-form__introduction" v-html="t('donate-form.introduction')" />
+      <!-- eslint-enable -->
+    </slot>
+
+    <div class="donate-form__payment mb-4 text-center">
+      <form
+          action="//checkout.fundjournalism.org/memberform"
+          method="get"
+          target="_blank"
+          class="donate-form__payment__form bg-light p-4"
+      >
+        <div class="donate-form__payment__levels row">
+          <div
+              class="col donate-form__payment__level"
+              :class="{ active: level === 'conversation' }"
+              @click="selectLevel('conversation')"
+          >
+            <h3 class="donate-form__payment__heading text-uppercase fw-bold text-primary h5">
+              {{ t('donate-form.benefits.impacts.conversation.heading') }}
+            </h3>
+            <div class="Article">
+              <div>
+                <!-- eslint-disable vue/no-v-html -->
+                <p
+                    class="donate-form__payment__highlight text-icij fw-bold"
+                    v-html="t('donate-form.benefits.impacts.conversation.highlight')"
+                />
+                <!-- eslint-enable -->
+              </div>
+            </div>
+          </div>
+          <div
+              class="col donate-form__payment__level"
+              :class="{ active: level === 'rules' }"
+              @click="selectLevel('rules')"
+          >
+            <h3 class="donate-form__payment__heading text-uppercase fw-bold text-primary h5">
+              {{ t('donate-form.benefits.impacts.rules.heading') }}
+            </h3>
+            <div class="Article">
+              <div>
+                <!-- eslint-disable vue/no-v-html -->
+                <p
+                    class="donate-form__payment__highlight text-icij fw-bold"
+                    v-html="t('donate-form.benefits.impacts.rules.highlight')"
+                />
+                <!-- eslint-enable -->
+              </div>
+            </div>
+          </div>
+          <div
+              class="col donate-form__payment__level"
+              :class="{ active: level === 'world' }"
+              @click="selectLevel('world')"
+          >
+            <h3 class="donate-form__payment__heading text-uppercase fw-bold text-primary h5">
+              {{ t('donate-form.benefits.impacts.world.heading') }}
+            </h3>
+            <div class="Article">
+              <div>
+                <!-- eslint-disable vue/no-v-html -->
+                <p
+                    class="donate-form__payment__highlight text-icij fw-bold"
+                    v-html="t('donate-form.benefits.impacts.world.highlight')"
+                />
+                <!-- eslint-enable -->
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div class="mt-5">
+            <span class="donate-form__payment__buttons">
+              <button
+                  type="button"
+                  class="btn btn-sm frequency-monthly"
+                  :class="{ 'btn-primary': installmentPeriod === 'monthly' }"
+                  @click="installmentPeriod = 'monthly'"
+              >
+                {{ t('donate-form.frequency.monthly') }}
+              </button>
+              <button
+                  type="button"
+                  class="btn btn-sm frequency-yearly"
+                  :class="{ 'btn-primary': installmentPeriod === 'yearly' }"
+                  @click="installmentPeriod = 'yearly'"
+              >
+                {{ t('donate-form.frequency.yearly') }}
+              </button>
+              <button
+                  type="button"
+                  class="btn btn-sm frequency-onetime"
+                  :class="{ 'btn-primary': installmentPeriod === null }"
+                  @click="installmentPeriod = 'onetime'"
+              >
+                {{ t('donate-form.frequency.onetime') }}
+              </button>
+            </span>
+          </div>
+          <div class="mt-4">
+            <span>{{ t('donate-form.label') }}&nbsp;</span>
+            <label class="donate-form__payment__unit input-group input-group-sm d-inline-flex">
+              <span class="input-group-prepend">
+                <span class="input-group-text">$</span>
+              </span>
+              <input
+                  v-model="amount"
+                  class="donate-form__payment__input form-control"
+                  name="amount"
+                  type="number"
+                  min="0"
+                  @change="amountIsNotPristine"
+              />
+            </label>
+          </div>
+          <div class="mt-4">
+            <input name="org_id" value="icij" type="hidden" />
+            <input v-model="campaign" name="campaign" type="hidden" />
+            <input v-model="installmentPeriod" name="installmentPeriod" type="hidden" />
+            <button type="submit" class="btn btn-primary rounded-pill text-uppercase fw-bold">
+              {{ t('donate-form.submit') }}
+            </button>
+            <a target="_blank" href="https://icij.org/donate" class="donate-form__payment__image" />
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div class="donate-form__insider">
+      <h2 class="donate-form__insider__title">
+        {{ t('donate-form.benefits.heading') }}
+      </h2>
+      <p>
+        {{ t('donate-form.benefits.introduction') }}
+      </p>
+      <div>
+        <ul class="donate-form__insider__list">
+          <li
+              v-for="(benefit, index) in listBenefits"
+              :key="index"
+              class="donate-form__insider__list-item"
+              v-html="benefit"
+          />
+        </ul>
+      </div>
+      <div>
+        <hr class="donate-form__insider__separator" />
+        <div class="donate-form__insider__more text-center">
+          <a
+              target="_blank"
+              href="https://icij.org/donate"
+              class="btn btn-primary rounded-pill text-uppercase fw-bold py-2"
+          >
+            {{ t('donate-form.benefits.more') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '../styles/lib';
+
+.donate-form {
+  font-size: 0.9rem;
+
+  &__payment {
+    & &__unit {
+      width: 120px;
+      margin-right: $spacer;
+
+      @media screen and (max-width: $modal-lg) {
+        width: 100%;
+        flex: 0 0 100%;
+      }
+    }
+
+    &__buttons {
+      button {
+        margin: 0 5px;
+        border: solid 1px var(--primary);
+      }
+    }
+
+    &__level {
+      border-bottom: solid 3px $light;
+      cursor: pointer;
+
+      &.active {
+        border-bottom: solid 3px var(--primary);
+      }
+    }
+
+    &__highlight {
+      font-size: 17px;
+
+      .monthly {
+        display: block;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  &__insider {
+    &__list {
+      padding-left: 20px;
+
+      &-item {
+        position: relative;
+        margin: 3px 0;
+        font-size: 15px;
+        list-style: none;
+
+        &:before {
+          content: '\2713';
+          position: absolute;
+          left: -16px;
+          font-size: 14px;
+          font-weight: 700;
+          color: #333;
+          font-family: $font-family-sans-serif;
+        }
+      }
+    }
+
+    &__modal__container .col {
+      @media screen and (max-width: $modal-lg) {
+        width: 100%;
+        flex: 0 0 100%;
+      }
+    }
+  }
+}
+</style>

package/lib/components/EmbedForm.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="embed-form">
+    <div class="container-fluid">
+      <h4 v-if="!noTitle" class="embed-form__heading">
+        {{ t('embed-form.heading') }}
+      </h4>
+      <div class="row">
+        <div class="col">
+          <p>
+            {{ t('embed-form.introduction') }}
+          </p>
+          <textarea ref='embed-form__code' class="form-control embed-form__code mb-2" readonly :value="embedCode()" @click="selectCode" />
+
+          <div class="d-flex justify-content-between">
+          <div class="form-check align-self-end">
+            <input type="checkbox" class="form-check-input" id="responsiveOptin" v-model="responsiveCheck" />
+            <label class="form-check-label fw-bold" for="responsiveOptin">
+              {{ t('embed-form.responsive-optin') }}
+            </label>
+          </div>
+
+            <haptic-copy
+              class="btn-link btn-sm text-uppercase fw-bold"
+              :text="embedCode()"
+              :label="t('embed-form.copy').toString()"
+              @attempt="selectCode()"
+            />
+          </div>
+        </div>
+        <div v-if="!noPreview" class="col-7 d-none d-lg-block embed-form__preview">
+          <!-- eslint-disable vue/no-v-html -->
+          <span v-html="embedCode(false)" />
+          <!-- eslint-enable -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, ref} from 'vue'
+
+import {useI18n} from "vue-i18n";
+import HapticCopy from '@/components/HapticCopy.vue'
+import IframeResizer from '@/utils/iframe-resizer'
+
+interface ComponentInterface {
+  currentUrl: string
+  responsiveCheck: boolean
+  width: string
+  minWidth: number
+  height: number
+  minHeight: number
+  iframeCodeFor: Function
+  pymCodeFor: Function
+}
+/**
+ * Embed Form
+ */
+export default defineComponent({
+name: 'EmbedForm',
+  components: {
+    HapticCopy
+  },
+  props: {
+    /**
+     * Hide the form title
+     */
+    noTitle: {
+      type: Boolean
+    },
+    /**
+     * Hide the preview panel
+     */
+    noPreview: {
+      type: Boolean
+    },
+    /**
+     * Default width of the iframe code
+     */
+    width: {
+      type: [Number, String],
+      default: '100%'
+    },
+    /**
+     * Default height of the iframe code
+     */
+    height: {
+      type: Number,
+      default: () => window.innerHeight
+    },
+    /**
+     * Default minimal width of the iframe code (if extract from window\'s size)
+     */
+    minWidth: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Default minimal height of the iframe code (if extract from window\'s size)
+     */
+    minHeight: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * URL of the iframe code
+     */
+    url: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props)
+  {
+    const {t} = useI18n()
+
+    const responsiveCheck = ref(false)
+    const embedFormCode = ref<HTMLTextAreaElement|null>(null)
+    const currentUrl = computed(()=> {
+      return props.url || window.location.href
+    })
+    function iframeCodeFor(_url = currentUrl, width: string, height: string) {
+      return `<iframe width="${width}" height="${height}" src="${IframeResizer.deletePymParams(
+          props.url
+      )}" frameborder="0" allowfullscreen></iframe>`
+    }
+    function pymCodeFor(url = currentUrl): string {
+      return IframeResizer.template(url.value)
+    }
+    function selectCode(): void {
+      embedFormCode.value?.select()
+    }
+    function embedCode(withPym = responsiveCheck.value): string {
+      const width = typeof props.width === 'string' ? props.width : Math.max(props.width, props.minWidth).toString()
+      const height = Math.max(props.height, props.minHeight).toString()
+      return withPym ? pymCodeFor(currentUrl) : iframeCodeFor(currentUrl, width, height)
+    }
+
+    return {
+      t,
+      responsiveCheck,
+      embedFormCode,
+      selectCode,
+      embedCode
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/lib';
+
+.embed-form {
+  font-size: 0.9rem;
+  overflow: auto;
+
+
+
+  &__heading {
+    font-size: 1.1em;
+    text-transform: uppercase;
+  }
+
+  &__code {
+    height: 80px;
+  }
+
+  &__preview {
+    border-left: 1px $gray-400 dashed;
+  }
+}
+</style>