File Manager

Editing File: /home/ubuntu/misabloom-frontend-base/src/components/Cart/CheckOutOldIndex.jsx

import React from "react";
import {
  Col,
  Container,
  Row,
  Accordion,
  Image,
  Form,
  InputGroup,
  Button,
} from "react-bootstrap";
import { Link } from "react-router-dom";
import { withTranslation, useTranslation } from "react-multi-lang";
import "./Checkout.css";

const CheckOutOldIndex = () => {

const t = useTranslation();

return (
    <>
      <div className="checkout-sec">
        <Container>
          <Row>
            <Col xl={8} md={12}>
              <div className="checkout-payment-details">
                <h4>{t("shipping")}</h4>
              </div>
              <div className="checkout-dropdown">
                <Accordion defaultActiveKey="0">
                  <Accordion.Item eventKey="0">
                    <Accordion.Header>
                      <div className="checkout-label-details shipping-deatils">
                        <h4>John Mathew Home</h4>
                        <p>
                          P.O. Box 132 1599 Curabitur Rd. Bandera South Dakota
                          45149
                        </p>
                      </div>
                    </Accordion.Header>
                    <Accordion.Body>
                      <div className="address-label-box">
                        <div className="address-radio-btn">
                          <input
                            name="address"
                            class="radio"
                            type="radio"
                            id="card"
                            checked
                          />
                          <label
                            name="address"
                            class="radio"
                            type="radio"
                            for="card"
                            checked
                          >
                            <div className="saved-address-box">
                              <div className="address-details">
                                <h4>John Mathew Home</h4>
                                <p>
                                  P.O. Box 132 1599 Curabitur Rd. Bandera South
                                  Dakota 45149 (959) 119-8364
                                </p>
                              </div>
                              <div className="address-btn">
                                <Link to="">
                                  <Image
                                    src={
                                      window.location.origin +
                                      "/images/edit-black.svg"
                                    }
                                    type="image/png"
                                  />
                                </Link>
                                <Link to="" className="address-button">
                                  Use This Address
                                </Link>
                              </div>
                            </div>
                          </label>
                        </div>
                        <div className="address-radio-btn label-bg">
                          <input
                            name="address"
                            class="radio"
                            type="radio"
                            id="card-1"
                            checked
                          />
                          <label
                            name="address"
                            class="radio"
                            type="radio"
                            for="card-1"
                            checked
                          >
                            <div className="saved-address-box">
                              <div className="address-details">
                                <h4>John Mathew Home</h4>
                                <p>
                                  P.O. Box 132 1599 Curabitur Rd. Bandera South
                                  Dakota 45149 (959) 119-8364
                                </p>
                              </div>
                              <div className="address-btn">
                                <Link to="">
                                  <Image
                                    src={
                                      window.location.origin +
                                      "/images/edit-black.svg"
                                    }
                                    type="image/png"
                                  />
                                </Link>
                                <Link to="" className="address-button">
                                  Use This Address
                                </Link>
                              </div>
                            </div>
                          </label>
                        </div>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>
                </Accordion>
              </div>
              <div className="checkout-payment-details mt-5">
                <h4>Payment Method </h4>
              </div>
              <div className="checkout-dropdown ">
                <Accordion defaultActiveKey="0">
                  <Accordion.Item eventKey="0">
                    <Accordion.Header>
                      <div className="checkout-label-details">
                        <Image
                          src={window.location.origin + "/images/express.png"}
                          type="image/png"
                        />
                        <h4>41** **** **** 1425</h4>
                        <p>John Mathew</p>
                      </div>
                    </Accordion.Header>
                    <Accordion.Body>
                      <div className="payment-radio-box">
                        <div className="payment-radio-btn">
                          <input
                            name="plan"
                            class="radio"
                            type="radio"
                            checked
                            id="payment"
                          />
                          <label
                            name="plan"
                            class="radio"
                            type="radio"
                            checked
                            for="payment"
                          >
                            <p>
                              <Image
                                src={
                                  window.location.origin + "/images/visa.png"
                                }
                                type="image/png"
                              />
                            </p>
                            <p>41xx xxxx xxxx 5609</p>
                            <p>John Mathew</p>
                            <p>10/2022</p>
                            <Link to="" className="card-edit-icon">
                              <span>
                                <Image
                                  src={
                                    window.location.origin +
                                    "/images/delete-1.svg"
                                  }
                                  type="image/png"
                                />
                              </span>
                              Delete
                            </Link>
                            <div></div>
                          </label>
                        </div>

<div className="payment-radio-btn label-bg">
                          <input
                            name="plan"
                            class="radio"
                            type="radio"
                            checked
                            id="payment-1"
                          />
                          <label
                            name="plan"
                            class="radio"
                            type="radio"
                            checked
                            for="payment-1"
                          >
                            <p>
                              <Image
                                src={
                                  window.location.origin + "/images/express.png"
                                }
                                type="image/png"
                              />
                            </p>
                            <p>41xx xxxx xxxx 5609</p>
                            <p>John Mathew</p>
                            <p>10/2022</p>
                            <Link to="" className="card-edit-icon">
                              <span>
                                <Image
                                  src={
                                    window.location.origin +
                                    "/images/delete-1.svg"
                                  }
                                  type="image/png"
                                />
                              </span>
                              Delete
                            </Link>
                            <div></div>
                          </label>
                        </div>
                        <div className="payment-radio-btn label-bg dropdown-wallet">
                          <input
                            name="plan"
                            class="radio"
                            type="radio"
                            checked
                            id="payment-2"
                          />
                          <label
                            name="plan"
                            class="radio"
                            type="radio"
                            checked
                            for="payment-2"
                          >
                            <p>
                              <Image
                                src={
                                  window.location.origin + "/images/wallet.svg"
                                }
                                type="image/png"
                              />
                              <span>Wallet</span>
                            </p>
                            <p>411215566545609</p>
                            <p>234.94 $</p>
                          </label>
                        </div>
                      </div>
                    </Accordion.Body>
                  </Accordion.Item>
                </Accordion>
              </div>
            </Col>
            <Col xl={4} md={12}>
              <div className="checkout-box">
                <div className="cart-box">
                  <div className="cart-header-sec">
                    <h4>Order Summary</h4>
                    <Link to="">
                      <p>
                        <span>
                          <Image
                            src={window.location.origin + "/images/edit.svg"}
                            type="image/png"
                          />
                        </span>
                        Edit Cart
                      </p>
                    </Link>
                  </div>

<div className="cart-body-sec">
                    <div className="checkout-order-details">
                      <div className="checkout-product-box">
                        <div className="checkout-product-img">
                          <Image
                            src={window.location.origin + "/images/item-1.png"}
                            type="image/png"
                          />
                        </div>
                        <div className="checkout-product-content">
                          <h4>250MG CBD PET DROPS</h4>
                          <p>
                            QTY<span>01</span>
                          </p>
                          <h5>
                            264 $ <span>364 $</span>
                          </h5>
                        </div>
                      </div>
                      <div className="checkout-product-box mt-4">
                        <div className="checkout-product-img order-bg-color">
                          <Image
                            src={window.location.origin + "/images/item-1.png"}
                            type="image/png"
                          />
                        </div>
                        <div className="checkout-product-content">
                          <h4>250MG CBD PET DROPS</h4>
                          <p>
                            QTY<span>01</span>
                          </p>
                          <h5>
                            264 $ <span>364 $</span>
                          </h5>
                        </div>
                      </div>
                    </div>
                    <div className="cart-summary-info mt-3">
                      <div className="cart-summary-header">
                        <p>
                          Cart Total <span>1230.87 $</span>
                        </p>
                        <p>
                          Discount <span>-89.00 $</span>
                        </p>
                      </div>
                      <div className="cart-summary-total-amount">
                        <h5>
                          Order Total <span>1,430.00 $</span>
                        </h5>
                      </div>
                      <div className="cart-summary-btn-sec">
                        <Link to="/order-placed" className="place-order-btn">
                          Check Out
                        </Link>
                      </div>
                    </div>
                  </div>
                  <div className="continue-shopping-btn-sec">
                    <Link
                      to="/shop"
                      className="continue-shopping-btn"
                    >
                      Continue Shopping
                    </Link>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default (withTranslation(CheckOutOldIndex));

Back to Directory File Manager