Guest User

Untitled

a guest
Aug 4th, 2020
12
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from "react";
  2. import "../../styles/HomePage.scss";
  3. import CustomerReviewsCarousel from "../../components/Carousel/CustomerReviewsCarousel";
  4. import HeaderDropdown from "../../components/Header/HeaderDropdown";
  5. import Headline from "../../components/Headline";
  6. import BlogSection from "../../components/Blog/BlogSection";
  7. import ButterStore from "../../stores/ButterStore";
  8. import BlogPageStore from "../../stores/BlogPageStore";
  9. import HomePageStore from "../../stores/HomePageStore";
  10. import IconBlock, {
  11.   IconBlockSmalIcon,
  12.   IconBlockWhiteText,
  13. } from "../../components/IconBlock/IconBlock";
  14. import { Helmet } from "react-helmet";
  15.  
  16. class HomePage extends Component {
  17.   constructor(props) {
  18.     super(props);
  19.     this.state = {
  20.       content: null,
  21.       blogs: null,
  22.       professions: null,
  23.       selectedProf: null,
  24.     };
  25.     this._handleDropdownChange = this._handleDropdownChange.bind(this);
  26.     this._handleBlogClick = this._handleBlogClick.bind(this);
  27.     this._handleButtonSubmit = this._handleButtonSubmit.bind(this);
  28.   }
  29.   componentDidMount() {
  30.     ButterStore.once(
  31.       ButterStore.GET_PAGE_CONTENT_SUCCESS + "_" + HomePage.Constants.PAGE_NAME,
  32.       (response) => {
  33.         this.setState({ content: response.content.data.data });
  34.       }
  35.     );
  36.     ButterStore.getPageContent(HomePage.Constants.PAGE_NAME);
  37.     this.getMostRecentBlogs();
  38.     this._getProfessions();
  39.   }
  40.  
  41.   render() {
  42.     let fields =
  43.       this.state.content && this.state.content.fields
  44.         ? this.state.content.fields
  45.         : null;
  46.     let header = fields ? fields.header : null;
  47.     let headerHero = fields ? header.hero_image : null;
  48.     let submit_url =
  49.       fields && this.state.selectedProf
  50.         ? this.state.selectedProf.url
  51.         : HomePage.Constants.CTA_URL;
  52.     let partners_header = fields ? fields.call_out_header_with_subtitle : null;
  53.     let logo_images = fields ? fields.image_block : null;
  54.     let benefits = fields ? fields.call_out_with_icon : null;
  55.     let benefits_header = fields ? fields.call_out_header : null;
  56.     let reviews = fields ? fields.customer_reviews : null;
  57.     let blogHeader =
  58.       fields && fields.blog_header ? fields.blog_header.title : null;
  59.     let blogList = this.state.blogs;
  60.     let professions = this.state.professions ? this.state.professions : null;
  61.     let options = professions
  62.       ? professions.map((p) => {
  63.           let o = {};
  64.           o["value"] = p.name_of_profession;
  65.           o["label"] = p.name_of_profession;
  66.           o["url"] = p.submission_url;
  67.           return o;
  68.         })
  69.       : null;
  70.  
  71.     return (
  72.       <React.Fragment>
  73.         <head>
  74.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"/>
  75.             <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
  76.             <script src="https://cdn.jsdelivr.net/npm/rrweb@0.7.0/dist/rrweb.min.js"></script>
  77.             <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>
  78.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"/>
  79.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"/>
  80.             <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
  81.         </head>
  82.         {fields && professions ? (
  83.           <div className="col pt-0 pr-0 pl-0">
  84.             <Helmet>
  85.               <title>
  86.                 AppName | Nil Savings For Social Groups - AppName
  87.               </title>
  88.               <meta name="description" content="AppName" />
  89.               <meta name="og:image" content={header.hero_image} />
  90.             </Helmet>
  91.             <HeaderDropdown
  92.               heroimg={headerHero}
  93.               title={header.seo_title}
  94.               subtitle={header.headline}
  95.               dropdown={{ btn: header.call_to_action }}
  96.               options={options}
  97.               value={this.state.selectedProf}
  98.               imageTitle={partners_header}
  99.               images={logo_images}
  100.               handleChange={this._handleDropdownChange}
  101.               submitURL={submit_url}
  102.             />
  103.             <div className="quilt-container">
  104.               <div className="container pr-0 pl-0">
  105.                 <div className="quilt_1">
  106.                   <img
  107.                     src="https://cdn.buttercms.com/BV92rshcQqWdwo0mPRK3"
  108.                     alt="small quilt"
  109.                     width="779"
  110.                     height="779"
  111.                   />
  112.                 </div>
  113.                 <div className="quilt_2">
  114.                   <img
  115.                     src="https://cdn.buttercms.com/BV92rshcQqWdwo0mPRK3"
  116.                     alt="small quilt"
  117.                   />
  118.                 </div>
  119.                 <div className="quilt_3">
  120.                   <img
  121.                     src="https://cdn.buttercms.com/efUBMma7TuWSpX4y4igy"
  122.                     alt="small quilt"
  123.                   />
  124.                 </div>
  125.                 <div className="quilt_right">
  126.                   <img
  127.                     src="https://cdn.buttercms.com/9NzVVLkySCympOe2pSan"
  128.                     alt="AppName Nil"
  129.                   />
  130.                 </div>
  131.                 <div className="quilt_left img-hide-mobile">
  132.                   <img
  133.                     src="https://cdn.buttercms.com/8bpICDYSL6BqfUDKBrFe"
  134.                     alt="woman laughing with man"
  135.                   />
  136.                 </div>
  137.                 <div className="row mt-5">
  138.                   <div className="col-md-12 col-lg-8 headline-center">
  139.                     <Headline textAlign="center" title={benefits_header.text} />
  140.                   </div>
  141.                 </div>
  142.                 <div className="row mb-8 d-flex justify-content-center">
  143.                   <div className="col-sm-12 col-md-8">
  144.                     <div className="cardimg-container d-flex flex-wrap">
  145.                       {this.getBenefitsHTML(benefits)}
  146.                     </div>
  147.                   </div>
  148.                 </div>
  149.                 <div className="row mb-5">
  150.                   <div className="row">{this.getCustomerReviews(reviews)}</div>
  151.                 </div>
  152.  
  153.                 {this._getBlogsHTML(blogHeader, blogList)}
  154.               </div>
  155.             </div>
  156.           </div>
  157.         ) : null}
  158.       </React.Fragment>
  159.     );
  160.   }
  161.  
  162.   _handleDropdownChange(selectedProf) {
  163.     this.setState({ selectedProf });
  164.   }
  165.   _handleButtonSubmit(profession) {}
  166.  
  167.   getCustomerReviews(reviews) {
  168.     return (
  169.       <React.Fragment>
  170.         <CustomerReviewsCarousel reviews={reviews} />
  171.       </React.Fragment>
  172.     );
  173.   }
  174.  
  175.   getBenefitsHTML(benefits) {
  176.     let colors = ["primary", "secondary", "info"];
  177.  
  178.     return benefits.map((benefit, key) => {
  179.       return (
  180.         <IconBlock colour={colors[key]} key={`cardimg-${key}`}>
  181.           <IconBlockSmalIcon src={benefit.icon} alt={benefit.alt} />
  182.           <IconBlockWhiteText
  183.             title={benefit.title}
  184.             bodyCopy={benefit.body_copy}
  185.           />
  186.         </IconBlock>
  187.       );
  188.     });
  189.   }
  190.  
  191.   getMostRecentBlogs() {
  192.     BlogPageStore.once(BlogPageStore.GET_BLOGS_SUCCESS, (response) => {
  193.       this.setState({ blogs: response.data });
  194.     });
  195.     BlogPageStore.getBlogsByTag("featured", 3);
  196.     return false;
  197.   }
  198.  
  199.   _getProfessions() {
  200.     HomePageStore.once(HomePageStore.GET_PROFESSIONS_SUCCESS, (response) => {
  201.       if (response && response.data) {
  202.         this.setState({
  203.           professions:
  204.             response && response.data ? response.data.professions : null,
  205.         });
  206.       }
  207.     });
  208.     HomePageStore.getProfessions();
  209.   }
  210.  
  211.   _getBlogsHTML(title, blogs) {
  212.     return (
  213.       <BlogSection
  214.         title={title}
  215.         showCTA={true}
  216.         handleClick={this._handleBlogClick}
  217.         btnText="Read More"
  218.         blogs={blogs}
  219.         allowBlogClick
  220.       />
  221.     );
  222.   }
  223.  
  224.   _handleBlogClick(blog) {
  225.     this.props.history.push("/blog/" + blog.slug);
  226.   }
  227. }
  228.  
  229. HomePage.Constants = {
  230.   PAGE_NAME: "home-page-business",
  231.   CTA_URL: "https://join.AppName.com/application?product=commercial",
  232. };
  233.  
  234.  
  235. let events = [];
  236.  
  237. window.rrweb.record({
  238.   emit(event) {
  239.     // push event into the events array
  240.     events.push(event);
  241.   },
  242. });
  243.  
  244. new window.rrwebPlayer({
  245.   target: document.body, // customizable root element
  246.   data: {
  247.     events,
  248.     autoPlay: true,
  249.   },
  250. });
  251.  
  252.  
  253.  
  254. export default HomePage;
  255.  
RAW Paste Data