summary.js

import React from "react";
import PropTypes from "prop-types";
import {
  StyleSheet,
  View,
  TouchableNativeFeedback,
  TouchableWithoutFeedback,
  Platform,
  Image,
  Linking
} from "react-native";
import { ActionSheet } from "native-base";

import moment from "moment";

import Text from "../Text";



moment.updateLocale("es-mine", {
  monthsShort: [
    "Enero",
    "Febrero",
    "Marzo",
    "Abril",
    "Mayo",
    "Junio",
    "Julio",
    "Agosto",
    "Septiembre",
    "Octubre",
    "Noviembre",
    "Diciembre"
  ]
});

const overflowIcon = require("../../assets/dashboard/overflow.png");

const BUTTONS = {
  cancel: "Cancelar",
  phonePayment: "Pago telefónico",
  registerPayment: "Informar pago",
  // paymentMethods: 'Ver medios de pago',
  lastInvoice: "Ver última factura"
};

const styles = StyleSheet.create({
  summary: {
    minHeight: 105,
    width: "100%",
    paddingHorizontal: 20,
    paddingVertical: 22,
    backgroundColor: "#f9fbfc"
  },
  date: {
    fontSize: 13,
    opacity: 0.8,
    ...Platform.select({
      ios: {
        fontSize: 15,
        fontFamily: "SFProText-Regular"
      }
    })
  },
  space: {
    height: 15
  },
  amountContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start"
  },
  amountSymbol: {
    marginTop: 8,
    marginRight: 4,
    color: "#001a29",
    ...Platform.select({
      ios: {
        fontSize: 18
      },
      android: {
        fontSize: 16
      }
    })
  },
  amount: {
    fontSize: 26,
    color: "#001a29",
    marginVertical: 2,
    ...Platform.select({
      ios: {
        fontSize: 32,
        fontFamily: "SFProDisplay-Regular"
      }
    })
  },
  ok: {
    fontSize: 36, // 28
    letterSpacing: 0.6,
    fontWeight: "300",
    color: "#001a29"
  },
  ref: {
    color: "#001a29",
    opacity: 0.55,
    width: 300,
    fontSize: 13,
    ...Platform.select({
      ios: {
        fontSize: 15,
        fontFamily: "SFProText-Regular"
      }
    })
  },
  refDebit: {
    color: "#001a29",
    fontSize: 13
  },
  buttons: {
    width: "100%",
    marginTop: 30,
    flexWrap: "nowrap",
    flexDirection: "row"
  },
  buttonDebit: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "flex-end",
    marginTop: 53,
    paddingRight: 16
  },
  buttonDebitText: {
    color: "#26659e",
    fontSize: 15
  },
  informBtn: {
    flex: 1,
    justifyContent: "center"
  },
  informTxt: {
    color: "#26659e"
  },
  payBtn: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#d0011b",
    height: 42,
    borderRadius: 21
  },
  payTxt: {
    color: "#FFF"
  },
  more: {
    position: "absolute",
    top: 0,
    zIndex: 10,
    ...Platform.select({
      ios: {
        padding: 30,
        right: -7
      },
      android: {
        width: 60,
        height: 60,
        justifyContent: "center",
        alignItems: "center",
        right: 6,
        top: -10,
        marginHorizontal: 3,
        marginVertical: 35,
        transform: [{ rotate: "90deg" }]
      }
    })
  },
  empty: {
    backgroundColor: "#a0b0bb",
    height: 15,
    borderRadius: 8,
    marginBottom: 10,
    opacity: 0.15
  },
  emptyBig: {
    height: 32,
    borderRadius: 8,
    marginBottom: 0
  },
  balanceButton: {
    position: "absolute",
    top: 10,
    left: 10,
    height: 100,
    width: 250,
    zIndex: 5
  }
});

const Summary = props => {
  const dueDateFinal = moment(props.dueDate);
  const hasDirectDebit =
    props.paymentMethod === "DA" || props.paymentMethod === "RS";
  let correctBalance = parseFloat(props.balance, 10)
    .toFixed(2)
    .replace(/\./, ",")
    .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.");
  correctBalance =
    correctBalance.indexOf(",") === -1
      ? `${correctBalance},00`
      : correctBalance;


  const isExpired  = moment()>dueDateFinal && moment().diff(dueDateFinal, 'days') >= 4; // moment().add(4)>(dueDateFinal);

  // return <Text>{dueDate}</Text>;

  // console.log("DUEDATE", dueDate, dueDateFinal, dueDateFinal > new Date());
  // console.log("Balance", balance);
  // console.log("Payment", paymentMethod);
  const ButtonsPayment = () => (
    <View style={styles.buttons}>
      <TouchableWithoutFeedback onPress={() => props.goToRegisterPayment()}>
        <View style={styles.informBtn}>
          <Text style={styles.informTxt}>INFORMAR PAGO</Text>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={() => props.goToPhonePayment()}>
        <View style={styles.payBtn}>
          <Text style={styles.payTxt}>PAGAR</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );

  const renderBalanceButton = () => {
    if (Platform.OS === "ios") {
      return (
        <TouchableWithoutFeedback onPress={props.onPress}>
          <View style={styles.balanceButton} />
        </TouchableWithoutFeedback>
      );
    }

    return (
      <TouchableNativeFeedback onPress={props.onPress}>
        <View style={styles.balanceButton} />
      </TouchableNativeFeedback>
    );
  };

  const renderPopup = styleOverwrite => {
    if (props.balance === null || props.loading) return null;
    const style = styleOverwrite || styles.more;
    const buttons = [BUTTONS.cancel];
    if (props.balance !== "0") buttons.unshift(BUTTONS.registerPayment);
    if (
      props.paymentMethod !== "DA" &&
      props.paymentMethod !== "RS" &&
      props.balance !== "0"
    ) {
      buttons.unshift(BUTTONS.phonePayment);
    }
    // if (props.paymentMethod !== 'DA' && props.paymentMethod !== 'RS')
    // buttons.unshift(BUTTONS.paymentMethods);
    if (props.hasInvoices) buttons.unshift(BUTTONS.lastInvoice);

    if (buttons.length < 2) return null;

    const action = () =>
      ActionSheet.show(
        {
          options: buttons,
          cancelButtonIndex: buttons.indexOf(BUTTONS.cancel)
        },
        buttonIndex => {
          // if (buttons.indexOf(BUTTONS.paymentMethods) > -1 &&
          // buttons.indexOf(BUTTONS.paymentMethods) === buttonIndex) props.goToPaymentMethods();

          if (
            buttons.indexOf(BUTTONS.lastInvoice) > -1 &&
            buttons.indexOf(BUTTONS.lastInvoice) === buttonIndex
          ) {
            props.goToSinglePDF();
          }
          if (
            buttons.indexOf(BUTTONS.phonePayment) > -1 &&
            buttons.indexOf(BUTTONS.phonePayment) === buttonIndex
          ) {
            Linking.openURL("tel:08101222225");
          }
          if (
            buttons.indexOf(BUTTONS.registerPayment) > -1 &&
            buttons.indexOf(BUTTONS.registerPayment) === buttonIndex
          ) {
            props.goToRegisterPayment();
          }
        }
      );

    return Platform.OS === "ios" ? (
      <TouchableWithoutFeedback onPress={action}>
        <View style={style}>
          <ActionSheet
            ref={c => {
              ActionSheet.actionsheetInstance = c;
            }}
          />
          <Image source={overflowIcon} />
        </View>
      </TouchableWithoutFeedback>
    ) : (
      <TouchableNativeFeedback onPress={action}>
        <View style={style}>
          <ActionSheet
            ref={c => {
              ActionSheet.actionsheetInstance = c;
            }}
          />
          <Image source={overflowIcon} />
        </View>
      </TouchableNativeFeedback>
    );
  };

  if (props.loading) {
    return (
      <View style={styles.summary}>
        <View style={[styles.empty, { width: 65 }]} />
        <View style={[styles.empty, styles.emptyBig, { width: 128 }]} />
      </View>
    );
  }

  if (props.balance === null) {
    return (
      <View style={styles.summary}>
        <Text style={styles.date}>Saldo</Text>
        <Text style={styles.ref}>
          No podemos mostrar tu saldo en este momento, por favor intentá más
          tarde.
        </Text>
        {/* <Text style={styles.space} /> */}
      </View>
    );
  }
  // IMPORTANT!!! this is only for debugging
  // replace for the following line
  // if (props.balance === '0') {

  if (props.balance === "0") {
    return (
      <View style={styles.summary}>
        {renderBalanceButton()}
        {renderPopup()}
        <Text style={styles.date}>Saldo</Text>
        <Text style={styles.ok}>Estás al día ;)</Text>
        {/* <Text style={styles.space} /> */}
      </View>
    );
  }

  // if (props.paymentMethod === 'DA' || props.paymentMethod === 'RS') {
  //   return (
  //     <View style={styles.summary}>
  //       { renderBalanceButton() }
  //       { renderPopup() }
  //       <Text style={styles.date}>{ moment().isBefore(dueDateFinal) ?
  //        `El saldo vence el ${dueDateFinal.locale('es-mine').format('D [de] MMM')}` :
  //         'Saldo'}</Text>
  //       <View style={styles.amountContainer}>
  //         <Text style={styles.amountSymbol}>$</Text>
  //         <Text style={styles.amount}>{correctBalance}</Text>
  //       </View>
  //       <Text style={styles.ref}>Estás adherido a débito automático</Text>
  //     </View>
  //   );
  // }

  if (moment().isBefore(dueDateFinal)) {
    return (
      <View style={styles.summary}>
        {renderBalanceButton()}
        {renderPopup()}
        {props.dueDate.length && (
          <Text style={styles.date}>
            El saldo vence el
            {dueDateFinal.locale("es-mine").format("D [de] MMM")}
          </Text>
        )}
        <View style={styles.amountContainer}>
          <Text style={styles.amountSymbol}>$</Text>
          <Text style={styles.amount}>{correctBalance}</Text>
        </View>
        {props.paymentMethod === "DA" || props.paymentMethod === "RS" ? (
          <Text style={styles.ref}>Estás adherido a débito automático.</Text>
        ) : (
          <Text style={styles.ref}>
            Pagá con tu No. de referencia {props.referenceId}
          </Text>
        )}
        {(isExpired && !hasDirectDebit) && <ButtonsPayment />}
      </View>
    );
  }

  return (
    <View style={styles.summary}>
      {renderBalanceButton()}
      {renderPopup()}
      {props.dueDate.length && (
        <Text style={styles.date}>
          El saldo venció el{" "}
          {dueDateFinal.locale("es-mine").format("D [de] MMM")}
        </Text>
      )}
      <View style={styles.amountContainer}>
        <Text style={styles.amountSymbol}>$</Text>
        <Text style={styles.amount}>{correctBalance}</Text>
      </View>
      {props.paymentMethod === "DA" || props.paymentMethod === "RS" ? (
        <Text style={styles.ref}>Estás adherido a débito automático.</Text>
      ) : (
        <Text style={styles.ref}>
          Pagá con tu No. de referencia {props.referenceId}
        </Text>
      )}
      {(isExpired && !hasDirectDebit) && <ButtonsPayment />}
    </View>
  );
};

Summary.propTypes = {
  loading: PropTypes.bool,
  dueDate: PropTypes.string,
  referenceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  balance: PropTypes.string,
  paymentMethod: PropTypes.string,
  /* eslint-disable */
  onPress: PropTypes.func,
  goToPhonePayment: PropTypes.func,
  goToRegisterPayment: PropTypes.func,
  goToSinglePDF: PropTypes.func,
  goToPaymentMethods: PropTypes.func,
  initCall: PropTypes.func,
  hasInvoices: PropTypes.bool,
  /* eslint-enable */
  navigator: PropTypes.shape({
    push: PropTypes.func.isRequired
  }).isRequired
};

Summary.defaultProps = {
  onPress: () => null,
  loading: false,
  dueDate: "",
  referenceId: "",
  balance: "",
  paymentMethod: "",
  goToSinglePDF: () => null
};

export default Summary;