{"size": 2069, "ext": "js", "max_stars_repo_path": "doc/integrations/myDrive/src/components/AddStorageItem/AddStorageItem.js", "max_stars_repo_name": "jkan-cn/cortx", "max_stars_repo_stars_event_min_datetime": "2020-09-24T18:16:09.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-25T06:21:55.000Z", "max_issues_repo_path": "doc/integrations/myDrive/src/components/AddStorageItem/AddStorageItem.js", "max_issues_repo_name": "nrady/cortx", "max_issues_repo_issues_event_min_datetime": "2020-09-24T19:48:44.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T17:42:41.000Z", "max_forks_repo_path": "doc/integrations/myDrive/src/components/AddStorageItem/AddStorageItem.js", "max_forks_repo_name": "nrady/cortx", "max_forks_repo_forks_event_min_datetime": "2020-09-24T14:24:21.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-25T10:40:16.000Z"}
{"max_stars_count": 552, "max_issues_count": 722, "max_forks_count": 442, "avg_line_length": 26.8701298701, "max_line_length": 75, "alphanum_fraction": 0.5079748671}
import React from "react";
import bytes from "bytes";

const AddStorageItem = (props) => (
  <div
    class={
      !props.loaded
        ? "elem__storage"
        : props.userDetails.activeSubscription &&
          props.userDetails.planID === props.plan.id
        ? "elem__storage completed__storage"
        : "elem__storage"
    }
  >
    <div class="head__storage">
      <div class="info__storage">
        <p>
          {bytes(+props.plan.metadata.amount)} -{" "}
          {props.plan.interval_count} {props.plan.interval}(s)
        </p>
        <span class="status__text">
          {"$" + parseInt(props.plan.amount, 10) / 100}
        </span>
      </div>
      <div
        style={
          !props.loaded
            ? { display: "none" }
            : props.userDetails.activeSubscription &&
              props.userDetails.planID === props.plan.id
            ? { display: "block" }
            : { display: "none" }
        }
        class="success__storage"
      >
        <img src="/assets/checked.svg" alt="checked" />
      </div>
      <div
        style={
          !props.loaded
            ? {}
            : props.userDetails.activeSubscription &&
              props.userDetails.planID === props.plan.id
            ? { display: "none" }
            : {}
        }
        class="add__storage"
      >
        <a onClick={props.openDetails}>Details</a>
      </div>
    </div>
    <div
      class="storage__main"
      style={props.state.open ? { display: "block" } : { display: "none" }}
    >
      <p>
        Subscribe to myDrive, {bytes(+props.plan.metadata.amount)} of
        data for {"$" + parseInt(props.plan.amount, 10) / 100}, reoccuring
        every {props.plan.interval_count} {props.plan.interval}(s).
      </p>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <button onClick={() => props.selectPlan(props.plan)}>
          Subscribe
        </button>
      </div>
    </div>
  </div>
);


export default AddStorageItem;