Guest User

Untitled

a guest
Aug 4th, 2020
10
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.         </head>
  80.         {fields && professions ? (
  81.           <div className="col pt-0 pr-0 pl-0">
  82.             <Helmet>
  83.               <title>
  84.                 AppName | Nil Savings For Social Groups - AppName
  85.               </title>
  86.               <meta name="description" content="AppName" />
  87.               <meta name="og:image" content={header.hero_image} />
  88.             </Helmet>
  89.             <HeaderDropdown
  90.               heroimg={headerHero}
  91.               title={header.seo_title}
  92.               subtitle={header.headline}
  93.               dropdown={{ btn: header.call_to_action }}
  94.               options={options}
  95.               value={this.state.selectedProf}
  96.               imageTitle={partners_header}
  97.               images={logo_images}
  98.               handleChange={this._handleDropdownChange}
  99.               submitURL={submit_url}
  100.             />
  101.             <div className="quilt-container">
  102.               <div className="container pr-0 pl-0">
  103.                 <div className="quilt_1">
  104.                   <img
  105.                     src="https://cdn.buttercms.com/BV92rshcQqWdwo0mPRK3"
  106.                     alt="small quilt"
  107.                     width="779"
  108.                     height="779"
  109.                   />
  110.                 </div>
  111.                 <div className="quilt_2">
  112.                   <img
  113.                     src="https://cdn.buttercms.com/BV92rshcQqWdwo0mPRK3"
  114.                     alt="small quilt"
  115.                   />
  116.                 </div>
  117.                 <div className="quilt_3">
  118.                   <img
  119.                     src="https://cdn.buttercms.com/efUBMma7TuWSpX4y4igy"
  120.                     alt="small quilt"
  121.                   />
  122.                 </div>
  123.                 <div className="quilt_right">
  124.                   <img
  125.                     src="https://cdn.buttercms.com/9NzVVLkySCympOe2pSan"
  126.                     alt="AppName Nil"
  127.                   />
  128.                 </div>
  129.                 <div className="quilt_left img-hide-mobile">
  130.                   <img
  131.                     src="https://cdn.buttercms.com/8bpICDYSL6BqfUDKBrFe"
  132.                     alt="woman laughing with man"
  133.                   />
  134.                 </div>
  135.                 <div className="row mt-5">
  136.                   <div className="col-md-12 col-lg-8 headline-center">
  137.                     <Headline textAlign="center" title={benefits_header.text} />
  138.                   </div>
  139.                 </div>
  140.                 <div className="row mb-8 d-flex justify-content-center">
  141.                   <div className="col-sm-12 col-md-8">
  142.                     <div className="cardimg-container d-flex flex-wrap">
  143.                       {this.getBenefitsHTML(benefits)}
  144.                     </div>
  145.                   </div>
  146.                 </div>
  147.                 <div className="row mb-5">
  148.                   <div className="row">{this.getCustomerReviews(reviews)}</div>
  149.                 </div>
  150.  
  151.                 {this._getBlogsHTML(blogHeader, blogList)}
  152.               </div>
  153.             </div>
  154.           </div>
  155.         ) : null}
  156.       </React.Fragment>
  157.     );
  158.   }
  159.  
  160.   _handleDropdownChange(selectedProf) {
  161.     this.setState({ selectedProf });
  162.   }
  163.   _handleButtonSubmit(profession) {}
  164.  
  165.   getCustomerReviews(reviews) {
  166.     return (
  167.       <React.Fragment>
  168.         <CustomerReviewsCarousel reviews={reviews} />
  169.       </React.Fragment>
  170.     );
  171.   }
  172.  
  173.   getBenefitsHTML(benefits) {
  174.     let colors = ["primary", "secondary", "info"];
  175.  
  176.     return benefits.map((benefit, key) => {
  177.       return (
  178.         <IconBlock colour={colors[key]} key={`cardimg-${key}`}>
  179.           <IconBlockSmalIcon src={benefit.icon} alt={benefit.alt} />
  180.           <IconBlockWhiteText
  181.             title={benefit.title}
  182.             bodyCopy={benefit.body_copy}
  183.           />
  184.         </IconBlock>
  185.       );
  186.     });
  187.   }
  188.  
  189.   getMostRecentBlogs() {
  190.     BlogPageStore.once(BlogPageStore.GET_BLOGS_SUCCESS, (response) => {
  191.       this.setState({ blogs: response.data });
  192.     });
  193.     BlogPageStore.getBlogsByTag("featured", 3);
  194.     return false;
  195.   }
  196.  
  197.   _getProfessions() {
  198.     HomePageStore.once(HomePageStore.GET_PROFESSIONS_SUCCESS, (response) => {
  199.       if (response && response.data) {
  200.         this.setState({
  201.           professions:
  202.             response && response.data ? response.data.professions : null,
  203.         });
  204.       }
  205.     });
  206.     HomePageStore.getProfessions();
  207.   }
  208.  
  209.   _getBlogsHTML(title, blogs) {
  210.     return (
  211.       <BlogSection
  212.         title={title}
  213.         showCTA={true}
  214.         handleClick={this._handleBlogClick}
  215.         btnText="Read More"
  216.         blogs={blogs}
  217.         allowBlogClick
  218.       />
  219.     );
  220.   }
  221.  
  222.   _handleBlogClick(blog) {
  223.     this.props.history.push("/blog/" + blog.slug);
  224.   }
  225. }
  226.  
  227. HomePage.Constants = {
  228.   PAGE_NAME: "home-page-business",
  229.   CTA_URL: "https://join.AppName.com/application?product=commercial",
  230. };
  231.  
  232.  
  233. let events = [];
  234.  
  235. window.rrweb.record({
  236.   emit(event) {
  237.     // push event into the events array
  238.     events.push(event);
  239.   },
  240. });
  241.  
  242. // // this function will send events to the backend and reset the events array
  243. function save() {
  244.   const body = JSON.stringify({ events });
  245.   events = [];
  246.   fetch('http://YOUR_BACKEND_API', {
  247.     method: 'POST',
  248.     headers: {
  249.       'Content-Type': 'application/json',
  250.     },
  251.     body,
  252.   });
  253. }
  254.  
  255. // // save events every 10 seconds
  256. setInterval(save, 10 * 1000);
  257.  
  258. const eventsT = events;
  259.  
  260. const replayer = new window.rrweb.Replayer(eventsT);
  261. // replayer.play();
  262.  
  263.  
  264. export default HomePage;
  265.  
  266.  
RAW Paste Data