Untitled

import React, { Component } from "react";
import "../../styles/HomePage.scss";
import CustomerReviewsCarousel from "../../components/Carousel/CustomerReviewsCarousel";
import HeaderDropdown from "../../components/Header/HeaderDropdown";
import Headline from "../../components/Headline";
import BlogSection from "../../components/Blog/BlogSection";
import ButterStore from "../../stores/ButterStore";
import BlogPageStore from "../../stores/BlogPageStore";
import HomePageStore from "../../stores/HomePageStore";
import IconBlock, {
  IconBlockSmalIcon,
  IconBlockWhiteText,
} from "../../components/IconBlock/IconBlock";
import { Helmet } from "react-helmet";

class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: null,
      blogs: null,
      professions: null,
      selectedProf: null,
    };
    this._handleDropdownChange = this._handleDropdownChange.bind(this);
    this._handleBlogClick = this._handleBlogClick.bind(this);
    this._handleButtonSubmit = this._handleButtonSubmit.bind(this);
  }
  componentDidMount() {
    ButterStore.once(
      ButterStore.GET_PAGE_CONTENT_SUCCESS + "_" + HomePage.Constants.PAGE_NAME,
      (response) => {
        this.setState({ content: response.content.data.data });
      }
    );
    ButterStore.getPageContent(HomePage.Constants.PAGE_NAME);
    this.getMostRecentBlogs();
    this._getProfessions();
  }

  render() {
    let fields =
      this.state.content && this.state.content.fields
        ? this.state.content.fields
        : null;
    let header = fields ? fields.header : null;
    let headerHero = fields ? header.hero_image : null;
    let submit_url =
      fields && this.state.selectedProf
        ? this.state.selectedProf.url
        : HomePage.Constants.CTA_URL;
    let partners_header = fields ? fields.call_out_header_with_subtitle : null;
    let logo_images = fields ? fields.image_block : null;
    let benefits = fields ? fields.call_out_with_icon : null;
    let benefits_header = fields ? fields.call_out_header : null;
    let reviews = fields ? fields.customer_reviews : null;
    let blogHeader =
      fields && fields.blog_header ? fields.blog_header.title : null;
    let blogList = this.state.blogs;
    let professions = this.state.professions ? this.state.professions : null;
    let options = professions
      ? professions.map((p) => {
          let o = {};
          o["value"] = p.name_of_profession;
          o["label"] = p.name_of_profession;
          o["url"] = p.submission_url;
          return o;
        })
      : null;

    return (
      <React.Fragment>
        <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"/>
            <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/rrweb@0.7.0/dist/rrweb.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"/>
        </head>
        {fields && professions ? (
          <div className="col pt-0 pr-0 pl-0">
            <Helmet>
              <title>
                AppName | Nil Savings For Social Groups - AppName
              </title>
              <meta name="description" content="AppName" />
              <meta name="og:image" content={header.hero_image} />
            </Helmet>
            <HeaderDropdown
              heroimg={headerHero}
              title={header.seo_title}
              subtitle={header.headline}
              dropdown={{ btn: header.call_to_action }}
              options={options}
              value={this.state.selectedProf}
              imageTitle={partners_header}
              images={logo_images}
              handleChange={this._handleDropdownChange}
              submitURL={submit_url}
            />
            <div className="quilt-container">
              <div className="container pr-0 pl-0">
                <div className="quilt_1">
                  <img
                    src="https://cdn.buttercms.com/BV92rshcQqWdwo0mPRK3"
                    alt="small quilt"
                    width="779"
                    height="779"
                  />
                </div>
                <div className="quilt_2">
                  <img
                    src="https://cdn.buttercms.com/BV92rshcQqWdwo0mPRK3"
                    alt="small quilt"
                  />
                </div>
                <div className="quilt_3">
                  <img
                    src="https://cdn.buttercms.com/efUBMma7TuWSpX4y4igy"
                    alt="small quilt"
                  />
                </div>
                <div className="quilt_right">
                  <img
                    src="https://cdn.buttercms.com/9NzVVLkySCympOe2pSan"
                    alt="AppName Nil"
                  />
                </div>
                <div className="quilt_left img-hide-mobile">
                  <img
                    src="https://cdn.buttercms.com/8bpICDYSL6BqfUDKBrFe"
                    alt="woman laughing with man"
                  />
                </div>
                <div className="row mt-5">
                  <div className="col-md-12 col-lg-8 headline-center">
                    <Headline textAlign="center" title={benefits_header.text} />
                  </div>
                </div>
                <div className="row mb-8 d-flex justify-content-center">
                  <div className="col-sm-12 col-md-8">
                    <div className="cardimg-container d-flex flex-wrap">
                      {this.getBenefitsHTML(benefits)}
                    </div>
                  </div>
                </div>
                <div className="row mb-5">
                  <div className="row">{this.getCustomerReviews(reviews)}</div>
                </div>

                {this._getBlogsHTML(blogHeader, blogList)}
              </div>
            </div>
          </div>
        ) : null}
      </React.Fragment>
    );
  }

  _handleDropdownChange(selectedProf) {
    this.setState({ selectedProf });
  }
  _handleButtonSubmit(profession) {}

  getCustomerReviews(reviews) {
    return (
      <React.Fragment>
        <CustomerReviewsCarousel reviews={reviews} />
      </React.Fragment>
    );
  }

  getBenefitsHTML(benefits) {
    let colors = ["primary", "secondary", "info"];

    return benefits.map((benefit, key) => {
      return (
        <IconBlock colour={colors[key]} key={`cardimg-${key}`}>
          <IconBlockSmalIcon src={benefit.icon} alt={benefit.alt} />
          <IconBlockWhiteText
            title={benefit.title}
            bodyCopy={benefit.body_copy}
          />
        </IconBlock>
      );
    });
  }

  getMostRecentBlogs() {
    BlogPageStore.once(BlogPageStore.GET_BLOGS_SUCCESS, (response) => {
      this.setState({ blogs: response.data });
    });
    BlogPageStore.getBlogsByTag("featured", 3);
    return false;
  }

  _getProfessions() {
    HomePageStore.once(HomePageStore.GET_PROFESSIONS_SUCCESS, (response) => {
      if (response && response.data) {
        this.setState({
          professions:
            response && response.data ? response.data.professions : null,
        });
      }
    });
    HomePageStore.getProfessions();
  }

  _getBlogsHTML(title, blogs) {
    return (
      <BlogSection
        title={title}
        showCTA={true}
        handleClick={this._handleBlogClick}
        btnText="Read More"
        blogs={blogs}
        allowBlogClick
      />
    );
  }

  _handleBlogClick(blog) {
    this.props.history.push("/blog/" + blog.slug);
  }
}

HomePage.Constants = {
  PAGE_NAME: "home-page-business",
  CTA_URL: "https://join.AppName.com/application?product=commercial",
};


let events = [];

window.rrweb.record({
  emit(event) {
    // push event into the events array
    events.push(event);
  },
});

// // this function will send events to the backend and reset the events array
function save() {
  const body = JSON.stringify({ events });
  events = [];
  fetch('http://YOUR_BACKEND_API', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body,
  });
}

// // save events every 10 seconds
setInterval(save, 10 * 1000);

const eventsT = events;

const replayer = new window.rrweb.Replayer(eventsT);
// replayer.play();


export default HomePage;