Subscription page #FF-3004

This is composed component made of CMS Media Banner, Subscription Form and hardcoded Copy/CTA (in the corresponding pages these values propagated into window object).

It's presented here for demonstration purposes. For better understanding check out source code of this page.

Subscription page

views/layouts/layout/subscriptionPage.gsp
app/subscriptionPage/subscriptionPageRoot.js
scss/components/_subscription.scss

  • SIGN UP TO ENJOY OUR PERKS ON YOUR FIRST ORDER!

    20% OFF
    PLUS FREE DELIVERY

    Valid for new customers, on full price products only.
    By signing up you accept our Ts and Cs including our Privacy Policy. 
  • 
<div class="subscription-page__banner row">
  <cms:component>
    {
      "visible":true,
      "ctaText": null,
      "title1":null,
      "title2":"SIGN UP TO ENJOY OUR PERKS ON YOUR FIRST ORDER!",
      "media":{  
        "code":"image-style-d_1",
        "altText":null,
        "mediaProvider":"AMPLIENCE_IMAGE",
        "description":null,
        "mediaFormat":"1705Wx1500H",
        "url":"//i8.amplience.net/i/fitflop/image-style-d_1"
      },
      "type":"MediaBannerComponent",
      "copyPadding":{  
        "code":"30px",
        "type":"CMSPadding"
      },
      "copyColor":{
        "code":"#000000",
        "type":"CMSColor"
      },
      "url":"#",
      "external":false,
      "largeSpan":{  
        "code":"100%",
        "type":"CMSSpan"
      },
      "copyJustification":"CENTER",
      "name":"MediaBannerComponent",
      "id":"row4",
      "ctaLink":null,
      "copyPosition":"BOTTOM_CENTER"
    }
  </cms:component>

  <h1 class="subscription-page__offer-heading text-center">
    20% OFF
    PLUS FREE DELIVERY
  </h1>

  <div id="subscriptionPage"></div>

  <div class="subscription-disclamer text-center">
    <span>Valid for new customers, on full price products only.</span><br />
    <span>By signing up you accept our Ts and Cs including our Privacy Policy.</span>
  </div>
</div>

Thank you page

app/cmscomponents/copyCoupon/copyCoupon.js
scss/components/_subscription.scss

  • THANKS FOR
    SIGNING UP WITH US!

    Apply this code in the shopping bag to receive 20% off and free delivery on your first order.

    Shop now 
  • 
<div class="subscription-thankyou__banner row">
  <cms:component>
    {
      "visible":true,
      "ctaText": null,
      "title1":null,
      "title2":"THANKS FOR<br>SIGNING UP WITH US!",
      "media":{  
        "code":"image-style-d_1",
        "altText":null,
        "mediaProvider":"AMPLIENCE_IMAGE",
        "description":null,
        "mediaFormat":"1705Wx1500H",
        "url":"//i8.amplience.net/i/fitflop/image-style-d_1"
      },
      "type":"MediaBannerComponent",
      "copyPadding":{  
        "code":"30px",
        "type":"CMSPadding"
      },
      "copyColor":{
        "code":"#000000",
        "type":"CMSColor"
      },
      "url":"#",
      "external":false,
      "largeSpan":{  
        "code":"100%",
        "type":"CMSSpan"
      },
      "copyJustification":"CENTER",
      "name":"MediaBannerComponent",
      "id":"row4",
      "ctaLink":null,
      "copyPosition":"BOTTOM_CENTER"
    }
  </cms:component>
</div>

<div class="subscription-thankyou__wrapper">
  <p class="subscription-thankyou__notice text-center">
    Apply this code in the shopping bag to receive 20% off and free delivery on your first order.
  </p>

  <div class="copy-coupon__code">
    <input class="copy-coupon__code-input" type="text" name="code" id="code" value="NEWADDICT" disabled>
    <button class="copy-coupon__code-button button no-margin-top no-margin-bottom">
      <span class="copy-coupon__code-button--copy-text">Copy code</span>
      <span class="copy-coupon__code-button--copied-icon icon-tick-filled display-none"></span>

      <span class="copy-coupon__code-button--copied-text display-none">Copied</span>
    </button>
  </div>

  <div class="subscription-thankyou__shopnow">
    <a href="/" class="button expand no-margin-top no-margin-bottom">Shop now</a>
  </div>
</div>