Bayonia-Code-Snippet.js

// React Section

import React, {memo} from "react";
import {Provider} from "react-redux";
import configureStore from "~/store/configureStore";
import Notification from "~/components/Notification";
const store = configureStore();

const RoomRateAvailabilityTableHeader = memo(({dates, name, isFamily}) => {
  const renderElements = () => {
    const headers = [];
    headers.push(
      <RoomRateAvailabilityFrozenHeader
        key="empty"
        title={name}
        isFamily={isFamily}
      />
    );

    dates.map(date => {
      headers.push(<RoomRateAvailabilityHeader date={date} key={date.value} />);
    });

    return headers;
  };

  return (
    <thead>
      <tr>{renderElements()}</tr>
    </thead>
  );
});

const RoomRateAvailabilityTableBody = ({data}) => {
  const {isFamily, name, availabilities, ratePlans, id} = data;
  const renderElements = () => {
    const rows = [];
    rows.push(
      <RoomRateAvailabilityRoomRow
        isFamily={isFamily}
        name={name}
        availabilities={availabilities}
        key={name}
      />
    );
    ratePlans.map(ratePlan => {
      const target = "room-" + id + "-rate-plan-" + ratePlan.id;
      ratePlan.rateFields.map((rateField, index) => {
        const {fieldName, display} = rateField;
        if (fieldName === "price_per_night" && display) {
          rows.push(
            <RoomRateAvailabilityRow
              rateField={rateField}
              collapseTarget={target}
              key={ratePlan.name + "-" + index}
            />
          );
        } else if (display) {
          rows.push(
            <RoomRateAvailabilityCollapseRow
              rateField={rateField}
              collapseTarget={target}
              key={ratePlan.name + "-" + index}
            />
          );
        }
      });
    });
    return rows;
  };
  return <tbody>{renderElements()}</tbody>;
};

const RoomRateAvailabilityTable = ({item}) => {
  return (
    <table className="table table-bayonia">
      <RoomRateAvailabilityTableHeader
        dates={dates}
        name={item.name}
        isFamily={item.isFamily}
      />
      <RoomRateAvailabilityTableBody data={item} />
    </table>
  );
};

const RoomRateAvailabilityTablesList = memo(({data = []}) => {
  return data.map(room => (
    <RoomRateAvailabilityTable item={room} key={room.id} />
  ));
});

const Layout = ({rooms}) => {
  return (
    <Provider store={store}>
      <RoomRateAvailabilityTablesList data={rooms} />
      <Notification />
    </Provider>
  );
};

// Pure JS

import Base from "~/core/base";
import {validateNumber} from "~/core/utils";

class Booking extends Base {
  constructor(action) {
    super(action);
  }

  index() {
    this.validatePhoneNumber();
  }

  validatePhoneNumber = () => {
    const telInput = $("#guest_phone_number");
    telInput.intlTelInput({
      initialCountry: "kh",
      onlyCountries: ["kh"],
      utilsScript:
        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.12/js/utils.js"
    });

    telInput.on("keypress", e => validateNumber(e));
    telInput.on("keyup", e => {
      if (telInput.intlTelInput("isValidNumber")) {
        $(".intl-tel-input").removeClass("has-error");
        return;
      }
      $(".intl-tel-input").addClass("has-error");
    });
  };
}