England Football

Efl Bundle Quiz Completion: Completed First Time 

<section class="efl-bundle-quiz-completion" data-fan-id="4354" data-bundle-id="7867678" data-behavior="efl-bundle-quiz-completion">
    <div class="efl-bundle-quiz-completion__wrapper completed ">
        <div class="efl-bundle-quiz-completion__wrapper--img">
            <img src="/assets/example-content/bundle-trophy-completed-firsttime.svg" alt="">
            <canvas class="completed-canvas" width="342px" height="246px"></canvas>
        </div>
        <div class="efl-bundle-quiz-completion__wrapper--info">
            <div class="heading">Congratulations!</div>
            <p>You just completed the &lt;bundle name&gt;</p>
        </div>
    </div>
</section>

No notes defined.

{
  "heading": "Congratulations!",
  "copy": "You just completed the <bundle name>",
  "img": "/assets/example-content/bundle-trophy-completed-firsttime.svg",
  "isCompletedFirst": true
}
  • Content: 
    import { Rive, Fit, Layout } from '@rive-app/canvas';

export default parentElement => {
  const canvasElement = parentElement.querySelector('.completed-canvas');
  const { fanId, bundleId } = parentElement.dataset;

  async function updateCompletedFirstTimeCallback(updateData) {
    const url = `/Bundling/UpdateBundledLearning`;

    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache',
        Pragma: 'no-cache',
        Expires: '0',
      },
      body: updateData,
    });

    return response.json();
  }

  function updateCompletedFirstTime(updateData) {
    try {
      // isAjaxRuning = true;
      updateCompletedFirstTimeCallback(updateData).then(response => {
        if (response) {
          console.log(response);
        }
      });
    } catch (e) {
      throw new Error('Unable to update onboarding details ::', e);
    }
  }

  if (canvasElement) {
    // Rive
    const lyout = new Layout({
      fit: Fit.Cover,
    });

    const riveAnimation = new Rive({
      src: '/assets/example-content/bundle_complete.riv',
      canvas: canvasElement,
      layout: lyout,
      onLoad: () => {
        riveAnimation.resizeDrawingSurfaceToCanvas();
      },
    });

    riveAnimation.play('Tick');
    riveAnimation.play('Loop 2');

    window.addEventListener('DOMContentLoaded', () => {
      const updateData = `{
        "id": "${fanId}",
        "bundles": [
          {
            "bundleId": "${bundleId}",
            "isCompletedFirstTime": false,
            "bundleArticles": null
          }
        ]
      }`;

      updateCompletedFirstTime(updateData);
    });
  }
};
  • URL: /components/raw/efl-bundle-quiz-completion/efl-bundle-quiz-completion.js
  • Filesystem Path: src/library/components/efl-bundle-quiz-completion/efl-bundle-quiz-completion.js
  • Size: 1.8 KB
  • Content: 
    .efl-bundle-quiz-completion {
  width: 100%;
  max-width: 70.6rem;
  background: $white;
  border-radius: 0.8rem;
  padding: 2.4rem 2.4rem 3.1rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  &__wrapper {
    display: flex;
    gap: 1.1rem;
    &--img {
      display: flex;
      justify-content: center;
      img {
        width: 7.2rem;
        height: 7.2rem;
        max-width: 7.2rem;
        object-fit: cover;
      }
      canvas {
        position: absolute;
        top: 0;
        width: 34.2rem;
        height: 24.6rem;
      }
    }
    &--info {
      .heading {
        @extend .efl-p-medium;

        font-weight: 700;
        color: $blue;
      }
      p {
        @extend .efl-p-medium;

        color: $color-interface-light;
      }
    }
    &.completed {
      flex-direction: column;
      max-width: 40rem;
      margin: 0 auto;
      text-align: center;
      .efl-bundle-quiz-completion__wrapper--img {
        img {
          width: 11.6rem;
          height: 11.6rem;
          max-width: 11.56rem;
        }
      }
      .efl-bundle-quiz-completion__wrapper--info {
        .heading {
          font-size: 3.2rem;
          line-height: 3.6rem;
          font-weight: 400;
          margin-bottom: 0.4rem;
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    padding: 2.7rem 4rem 3.2rem;
    &__wrapper {
      gap: 3.2rem;
      &--img {
        img {
          width: 10.8rem;
          height: 10.8rem;
          max-width: 10.8rem;
          object-fit: cover;
        }
      }
      &--info {
        .heading {
          font-weight: 500;
          font-size: 2.4rem;
          line-height: 3rem;
          margin-top: 2.3rem;
        }
        p {
          font-size: 2rem;
          line-height: 3.2rem;
        }
      }
      &.completed {
        gap: 1.1rem !important;
        .heading {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }
      }
    }
  }
}
  • URL: /components/raw/efl-bundle-quiz-completion/efl-bundle-quiz-completion.scss
  • Filesystem Path: src/library/components/efl-bundle-quiz-completion/efl-bundle-quiz-completion.scss
  • Size: 2 KB 
<section class="efl-bundle-quiz-completion" data-fan-id="4354" data-bundle-id="7867678" data-behavior="efl-bundle-quiz-completion">
    <div class="efl-bundle-quiz-completion__wrapper {{#if isCompletedFirst}}completed {{/if}}">
        <div class="efl-bundle-quiz-completion__wrapper--img">
            <img src="{{img}}" alt="">
            {{#if isCompletedFirst}}
            <canvas class="completed-canvas" width="342px" height="246px"></canvas>
            {{/if}}
        </div>
        <div class="efl-bundle-quiz-completion__wrapper--info">
            <div class="heading">{{heading}}</div>
            <p>{{copy}}</p>
        </div>
    </div>
</section>