invoice window

PrintWindow.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import { copyStyles } from "util/core";

export default class MyWindowPortal extends React.Component {
  state = {
    elm: null
  };
  constructor(props) {
    super(props);
    this.containerEl = null;
    this.externalWindow = null;
  }

  componentDidMount() {
    // Create a new window, a div, and append it to the window
    // The div **MUST** be created by the window it is to be
    // appended to or it will fail in Edge with a "Permission Denied"
    // or similar error.
    // See: https://github.com/rmariuzzo/react-new-window/issues/12#issuecomment-386992550
    this.externalWindow = window.open(
      "",
      "",
      "width=" + screen.width + ",height=700,left=200,top=200"
    );
    this.containerEl = this.externalWindow.document.createElement("div");
    this.externalWindow.document.body.appendChild(this.containerEl);

    this.externalWindow.document.title = "Print Preview Window";
    copyStyles(document, this.externalWindow.document);
    this.setState(
      {
        elm: this.containerEl
      },
      () => {
        this.externalWindow.print();
      }
    );
    // update the state in the parent component if the user closes the
    // new window
    this.externalWindow.addEventListener("beforeunload", () => {
      this.props.closeWindowPortal();
    });
  }

  componentWillUnmount() {
    // This will fire when this.state.showWindowPortal in the parent component becomes false
    // So we tidy up by just closing the window
    this.externalWindow.close();
  }

  render() {
    // The first render occurs before componentDidMount (where we open
    // the new window), so our container may be null, in this case
    // render nothing.
    const { elm } = this.state;
    if (!elm) {
      return null;
    }

    // Append props.children to the container <div> in the new window
    return ReactDOM.createPortal(this.props.children, elm);
  }
}

usage.ts

import * as React from "react";
import { connect } from "react-redux";

import { setState, getOrderById } from "actions/index";
import { isEmpty, isUndefined } from "lodash";

interface IOrderInfoProps {
  setState: (state: object) => void;
  isShowPrintPreview: boolean;
  getOrderById: (data: object) => void;
  match: {
    params: {
      id: any;
    };
  };
  orderId: any;
  selectedOrder: any;
  history: {
    goBack: () => void;
  };
}

import { ControllerContainer, FilterContainer } from "components/styles";

import { PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
import { Icon } from "office-ui-fabric-react/lib/Icon";

import PrintWindow from "components/PrintWindow";

import {
  Wrapper,
  PreviewWrapper,
  Title,
  Row,
  Col,
  ColRight,
  ProductListTable,
  TH,
  TD,
  BigText,
  Text,
  TextBold,
  OrderNote,
  Note,
  TopSection
} from "./styles";

export default class OrderInfo extends React.Component<IOrderInfoProps> {
  public componentDidMount() {
    const { match, setState, getOrderById } = this.props;
    window.addEventListener("beforeunload", () => {
      this.closeWindowPortal();
    });
    if (!isEmpty(match.params) && !isUndefined(match.params.id)) {
      setState({
        orderId: match.params.id
      });
    }
    getOrderById(match.params.id);
  }

  public render() {
    const { isShowPrintPreview, selectedOrder, history } = this.props;
    return (
      <Wrapper>
        <Title>Order Info</Title>
        <ControllerContainer>
          <TopSection>
            <FilterContainer />
            <DefaultButton onClick={() => history.goBack()}>Back</DefaultButton>
            <PrimaryButton onClick={this.printOrder}>
              <Icon iconName="Print" />&nbsp; Print
            </PrimaryButton>
          </TopSection>
        </ControllerContainer>
        {!isUndefined(selectedOrder) && !isEmpty(selectedOrder) ? this.renderOrderInfo() : ""}
        {isShowPrintPreview && (
          <PrintWindow closeWindowPortal={this.closeWindowPortal}>
            <PreviewWrapper>{this.renderOrderInfo()}</PreviewWrapper>
          </PrintWindow>
        )}
      </Wrapper>
    );
  }

  private renderOrderInfo() {
    const { selectedOrder } = this.props;
    return (
      <React.Fragment>
        <Row>
          <Col>
            <BigText>Company Name1</BigText>
            <Text>123, Main Street</Text>
            <Text>Nugegoda, OH 44416</Text>
            <Text>011 2 879123</Text>
            <Text>info@sarasavi.lk</Text>
            <Text>sarasavi.lk</Text>
          </Col>
          <ColRight>
            <Text>
              <TextBold>Date: </TextBold>
              {selectedOrder.created_at}
            </Text>
            <Text>
              <TextBold>Order#: </TextBold>
              {selectedOrder.orderNo}
            </Text>
            <Text>
              <TextBold>Customer#: </TextBold>
              {selectedOrder.user.firstname} {selectedOrder.user.lastname}
            </Text>
          </ColRight>
        </Row>
        <Row>
          <Col>
            <BigText>Billing Address</BigText>
            {selectedOrder.billingAddress &&
              this.displayAddress(selectedOrder.billingAddress).map((address: any, index: any) => (
                <Text key={index}> {address} </Text>
              ))}
          </Col>
          <Col>
            <BigText>Shipping Address</BigText>
            {selectedOrder.shippningAddress &&
              this.displayAddress(selectedOrder.shippningAddress).map(
                (address: any, index: any) => <Text key={index}> {address} </Text>
              )}
          </Col>
        </Row>
        <ProductListTable>
          <Row>
            <TH size={6}>Description</TH>
            <TH size={1} align="center">
              Qty
            </TH>
            <TH size={2} align="right">
              Unit Price
            </TH>
            <TH size={2} align="right">
              Total Price
            </TH>
          </Row>
          {selectedOrder.order_items.map((item: any, index: any) => (
            <Row key={index}>
              <TD size={6}>{item.product.name}</TD>
              <TD size={1} align="center">
                {item.quantity}
              </TD>
              <TD size={2} align="right">
                LKR {item.price}
              </TD>
              <TD size={2} align="right">
                LKR {(item.quantity * item.price).toFixed(2)}
              </TD>
            </Row>
          ))}
          {/* <Row>
            <TD size={6}>Kavi Kandura - කවි කඳුර - Sunethra Rajakarunanayaka</TD>
            <TD size={1} align="center">
              2
            </TD>
            <TD size={2} align="right">
              LKR 495.00
            </TD>
            <TD size={2} align="right">
              LKR 990.00
            </TD>
          </Row> */}
          <Row>
            <TD size={1} />
          </Row>
          <Row>
            <TD weight={600} size={9} align="right">
              Sub Total
            </TD>
            <TD size={2} align="right">
              LKR {selectedOrder.invoicePrice}
            </TD>
          </Row>
          <Row>
            <TD weight={600} size={9} align="right">
              Discoount
            </TD>
            <TD size={2} align="right">
              LKR {selectedOrder.discount}
            </TD>
          </Row>
          <Row>
            <TD weight={600} size={9} align="right">
              Tax
            </TD>
            <TD size={2} align="right">
              LKR ??
            </TD>
          </Row>
          <Row>
            <TD weight={600} size={9} align="right">
              Shipping/Handling
            </TD>
            <TD size={2} align="right">
              LKR {selectedOrder.shippingCost}
            </TD>
          </Row>
          <Row>
            <TD weight={600} size={9} align="right">
              Total
            </TD>
            <TD weight={600} size={2} align="right">
              LKR {selectedOrder.totalPrice}
            </TD>
          </Row>
        </ProductListTable>
        <OrderNote>
          <BigText>Note: </BigText>
          <Note>{selectedOrder.message}</Note>
        </OrderNote>
      </React.Fragment>
    );
  }

  private printOrder = () => {
    this.visiblePrintPreview(true);
  };

  private closeWindowPortal = () => {
    this.visiblePrintPreview(false);
  };

  private visiblePrintPreview = (status: boolean) => {
    const { setState } = this.props;
    setState({
      isShowPrintPreview: status
    });
  };

  private displayAddress = (address: string) => {
    return address.split(" ");
  };
}

const mapStateToProps = (state: any) => {
  return {
    isShowPrintPreview: state.app.isShowPrintPreview,
    selectedOrder: state.order.selectedOrder,
    orderId: state.app.orderId
  };
};
export const OrderInfoContainer = connect<{}, {}, IOrderInfoProps>(
  mapStateToProps,
  {
    setState,
    getOrderById
  }
)(OrderInfo);