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.

  • 
    <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>