tabbit

Sun Nov 20 2022
Copied to clipboard! Copy reply
import styled from "@emotion/styled";
import Lion, { lionSelectors } from "@rosetta/react-lion";
import React from "react";
import { connect } from "react-redux";
import ReactToggle from "react-toggle";
import TutorImage from "../assets/images/device-images/myaccount-tutoring.png";
import { selectors as appSelectors } from "../common/appreducer";
import { fetchCreditCard } from "../common/backbone/backbone-service";
import { getAppParams } from "../common/community/integration";
import AppUnderHeaderContainer from "../common/header/AppUnderHeaderContainer";
import CourseHeader from "../common/header/CourseHeader";
import { sessionObj } from "../common/session/session-sagas";
import ReactToggleCSS from "../common/styles/react-toggle-css";
import CreditCardForm from "./CreditCardForm";
import { errorsMap } from "./errors";
import Modal from "./Modal";
import { actions, myAccountReducer } from "./my-account-reducer";
import { myAccountSagas } from "./my-account-sagas";
import { getIsFreeTrial, tutoringPackByProductSessions } from "./my-account-selectors";


const usStates = [
  { name: 'ALABAMA', abbreviation: 'AL'},
  { name: 'ALASKA', abbreviation: 'AK'},
  { name: 'AMERICAN SAMOA', abbreviation: 'AS'},
  { name: 'ARIZONA', abbreviation: 'AZ'},
  { name: 'ARKANSAS', abbreviation: 'AR'},
  { name: 'CALIFORNIA', abbreviation: 'CA'},
  { name: 'COLORADO', abbreviation: 'CO'},
  { name: 'CONNECTICUT', abbreviation: 'CT'},
  { name: 'DELAWARE', abbreviation: 'DE'},
  { name: 'DISTRICT OF COLUMBIA', abbreviation: 'DC'},
  { name: 'FEDERATED STATES OF MICRONESIA', abbreviation: 'FM'},
  { name: 'FLORIDA', abbreviation: 'FL'},
  { name: 'GEORGIA', abbreviation: 'GA'},
  { name: 'GUAM', abbreviation: 'GU'},
  { name: 'HAWAII', abbreviation: 'HI'},
  { name: 'IDAHO', abbreviation: 'ID'},
  { name: 'ILLINOIS', abbreviation: 'IL'},
  { name: 'INDIANA', abbreviation: 'IN'},
  { name: 'IOWA', abbreviation: 'IA'},
  { name: 'KANSAS', abbreviation: 'KS'},
  { name: 'KENTUCKY', abbreviation: 'KY'},
  { name: 'LOUISIANA', abbreviation: 'LA'},
  { name: 'MAINE', abbreviation: 'ME'},
  { name: 'MARSHALL ISLANDS', abbreviation: 'MH'},
  { name: 'MARYLAND', abbreviation: 'MD'},
  { name: 'MASSACHUSETTS', abbreviation: 'MA'},
  { name: 'MICHIGAN', abbreviation: 'MI'},
  { name: 'MINNESOTA', abbreviation: 'MN'},
  { name: 'MISSISSIPPI', abbreviation: 'MS'},
  { name: 'MISSOURI', abbreviation: 'MO'},
  { name: 'MONTANA', abbreviation: 'MT'},
  { name: 'NEBRASKA', abbreviation: 'NE'},
  { name: 'NEVADA', abbreviation: 'NV'},
  { name: 'NEW HAMPSHIRE', abbreviation: 'NH'},
  { name: 'NEW JERSEY', abbreviation: 'NJ'},
  { name: 'NEW MEXICO', abbreviation: 'NM'},
  { name: 'NEW YORK', abbreviation: 'NY'},
  { name: 'NORTH CAROLINA', abbreviation: 'NC'},
  { name: 'NORTH DAKOTA', abbreviation: 'ND'},
  { name: 'NORTHERN MARIANA ISLANDS', abbreviation: 'MP'},
  { name: 'OHIO', abbreviation: 'OH'},
  { name: 'OKLAHOMA', abbreviation: 'OK'},
  { name: 'OREGON', abbreviation: 'OR'},
  { name: 'PALAU', abbreviation: 'PW'},
  { name: 'PENNSYLVANIA', abbreviation: 'PA'},
  { name: 'PUERTO RICO', abbreviation: 'PR'},
  { name: 'RHODE ISLAND', abbreviation: 'RI'},
  { name: 'SOUTH CAROLINA', abbreviation: 'SC'},
  { name: 'SOUTH DAKOTA', abbreviation: 'SD'},
  { name: 'TENNESSEE', abbreviation: 'TN'},
  { name: 'TEXAS', abbreviation: 'TX'},
  { name: 'UTAH', abbreviation: 'UT'},
  { name: 'VERMONT', abbreviation: 'VT'},
  { name: 'VIRGIN ISLANDS', abbreviation: 'VI'},
  { name: 'VIRGINIA', abbreviation: 'VA'},
  { name: 'WASHINGTON', abbreviation: 'WA'},
  { name: 'WEST VIRGINIA', abbreviation: 'WV'},
  { name: 'WISCONSIN', abbreviation: 'WI'},
  { name: 'WYOMING', abbreviation: 'WY' }
];

const PageWrapper = styled.div({
  margin: "auto",
  label: "MyAccountPageWrapper",
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  overflowX: "hidden",
  overflowY: "auto",
  "& > div": { maxWidth: "1211px", margin: "auto", alignItems: "baseline",justifyContent: "center" }
});


const CardWrapper = styled.div(props => ({
  label: "CardWrapper",
  display: "flex",
  flexDirection: "column",
  background: props.theme.exploreCardBackground,
  borderRadius: "6px",
  padding: "25px",
  margin: '25px 12.5px 0',
  width: "580px",
  boxSizing: "border-box",
  alignItems: "baseline",
  position: "relative"
,  "@media (max-width: 1211px)": {
    width: "100%"
  },
  "&.tutoring-section": {
    backgroundColor: "#3752B4",
    color: "#fff",
    width: "440px"
  }
}));

const CardsContainer = styled.div(props => ({
  display: 'flex',
  flexWrap: 'wrap',
  position: "relative"
}))


const CardTitleText = styled.div(props => {
  const styles = {
    padding: 0,
    fontSize: 32,
    marginBottom: 15,
    color: props.color || "inherit",
    textAlign: props.align || "left",
    lineHeight: "120%",
  };
  if (props.screenWidth) {
    if (props.screenWidth < 885) {
      styles.fontSize = 18;
      styles.lineHeight = "20px";
    }
  }
  return styles;
});

const CardDescriptionText = styled.p(props => {
  const styles = {
    color: props.color ? props.color : "#262626",
    fontSize: "20px",
    lineHeight: "30px",
    fontWeight: 400,
    fontFamily: "Helvetica",
    ".block" : {
      display: "block"
    },
  };
  if (props.textAlign) {
    styles.textAlign = props.textAlign
  }
  if (props.screenWidth) {
    if (props.screenWidth < 885) {
      styles.fontSize = 13;
      styles.lineHeight = "16px";
    }
  }
  return styles;
});
const ProductName = styled.span({
  color: "#0098DB",
  fontSize: "20px",
  fontWeight: 700,
  display: "block"
});

const FlexTitle = styled.div({
  display: "flex"
})
const ToggleWrapper = styled.div({
  marginLeft: 20,
  marginTop: 3
});


const Button = styled.button({
  background: "#02B1FF",
  color: "#fff",
  border: "1px solid transparent",
  borderRadius: "10px",
  padding: "15px 0",
  fontSize: "17px",
  width: "100%",
  "&:disabled": {
    background: '#ccc'
  }
});

const TutorPricing = styled.div({
  margin: "40px 0 20px",
  display: "flex",
  alignItems: "center",
  ".price-area": {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    p: {
      fontSize: "18px",
      fontWeight: "bold",
      textAlign: "center",
      marginBottom: "15px"
    },
    ".price": {
      display: "flex",
      alignItems: "center",
      fontWeight: 300,
      ".currency-sign": {
        fontSize: "42px",
        position: "relative",
        top: "-9px"
      },
      ".dollars": {
        fontSize: "68px"
      },
      ".cents-wrapper": {
        display: "flex",
        flexDirection: "column"
      },
      ".cents": {
        fontSize: "32px"
      }
    }
  }
});


const TutoringDeviceImg = styled.div({
  display: "flex",
  justifyContent: "center",
  width: "223px",
});

const TutorLegalese = styled.div(props => {
  const styles = {
    fontSize: "12px",
    lineHeight: "15px",
    position: "absolute",
    bottom: "-39px",
    color: "#262626"
  }
  if (props.bottom) {
    styles.bottom = props.bottom;
  }
  return styles;
});

const Spacer = styled.div({
  height: "40px"
});


// This will become its own module later when we also make Button a component
// with event callbacks, etc.
const ModalContainer = styled.div({
  position: "fixed",
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  background: "rgba(0, 0, 0, 0.5)",
  backdropFilter: "blur(3px)",
});

/*
const Modal = styled.div({
  border: "1px solid black",
  borderRadius: "20px",
  width: "38%",
  maxWidth: "524px",
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  background: "#fff",
  padding: "40px",
  textAlign: "center",
  fontSize: "20px",
  color: "#262626",
  ".close-button": {
    cursor: "pointer",
    position: "absolute",
    fontSize: "42px",
    right: "15px",
    top: 0,
  },
  p: {
    marginBottom: "25px"
  },
  ".title": {
    color: "#3752B4",
    fontSize: "24px",
    "&.error" : {
      color: "#d92a2a"
    }
  }
})
*/



// TODO - these map values should ideally come from the server, translated,
// so that every client doesn't have to do this. Full list of names & terms:
// https://stash.trstone.com/projects/IIS/repos/provision-iis/browse/src/main/resources/braze-template.properties?at=543f9d89be3c2cd3793022eb51611d1fce4b0a29
const PRODUCT_MAP = {
  RS_SPANISH_LA: "Spanish (Latin America)",
  RS_SPANISH_SP: "Spanish (Spain)",
  RS_FRENCH: "French",
  RS_ITALIAN: "Italian",
  RS_GERMAN: "German",
  RS_ENGLISH_USA: "English (American)",
  RS_ENGLISH_BR: "English (British)",
  RS_ARABIC: "Arabic",
  RS_CHINESE: "Chinese (Mandarin)",
  RS_DUTCH: "Dutch",
  RS_FILIPINO: "Tagalog (Filipino)",
  RS_GREEK: "Greek",
  RS_HEBREW: "Hebrew",
  RS_HINDI: "Hindi",
  RS_IRISH: "Irish",
  RS_JAPANESE: "Japanese",
  RS_KOREAN: "Korean",
  RS_PERSIAN: "Farsi (Persian)",
  RS_POLISH: "Polish",
  RS_PORTUGUESE: "Portuguese (Brazil)",
  RS_RUSSIAN: "Russian",
  RS_SWEDISH: "Swedish",
  RS_TURKISH: "Turkish",
  RS_VIETNAMESE: "Vietnamese",
  RS_LATIN: "Latin",
  RS_UNLIMITED: "Unlimited Languages"
}

const DURATION_MAP = {
  PAY_PER_MONTH: "1 Month Plan",
  PAY_PER_3_MONTHS: "3 Month Plan",
  PAY_PER_6_MONTHS: "6 Month Plan",
  PAY_PER_YEAR: "12 Month Plan",
  PAY_PER_2_YEARS: "2 Year Plan",
  LIFETIME: "Lifetime Plan"
}

const TRIAL_LANG_MAP = {
  ARA: "Arabic",
  CHI: "Chinese (Mandarin)",
  DEU: "German",
  EBR: "English (British)",
  ENG: "English (American)",
  ESC: "Spanish (Spain)",
  ESP: "Spanish (Latin America)",
  FAR: "Farsi (Persian)",
  FRA: "French",
  GLE: "Irish",
  GRK: "Greek",
  HEB: "Hebrew",
  HIN: "Hindi",
  ITA: "Italian",
  JPN: "Japanese",
  KOR: "Korean",
  LAT: "Latin",
  NED: "Dutch",
  POL: "Polish",
  POR: "Portuguese (Brazil)",
  RUS: "Russian",
  SVE: "Swedish",
  TGL: "Tagalog (Filipino)",
  TUR: "Turkish",
  VIE: "Vietnamese"
}

const TRIAL_TEXT = "Free Trial";

// Make sure mo/yr is not in past
function validateExpirationDate(dropdownMonth, dropdownYear) {
  let ret = true
  if (!dropdownMonth && !dropdownYear) {
    ret = {msg: "Expiration month and year cannot be blank."}
  } else if(!dropdownMonth) {
    ret = {msg: "Expiration month cannot be blank."}
  } else if (!dropdownYear) {
    ret = {msg: "Expiration year cannot be blank."}
  }
  const currentMonth = new Date().getMonth() + 1
  const currentYear = parseInt(new Date().getFullYear().toString().slice(-2))
  if (dropdownMonth < currentMonth && dropdownYear === currentYear) {
    ret = {msg: "Expiration date cannot be in the past."}
  }
  return ret
}

// For Credit Card expiration year dropdown
const expirationYears = [""]
const currentYear = new Date().getFullYear()
for (let year = currentYear; year < currentYear + 15; year++) {
  expirationYears.push({fullYear: year, shortYear: year.toString().slice(2)})
}


class MyAccount extends React.Component {
  constructor(props) {
    super(props);
    this.props = props
    this.state = {
      purchaseTutoringCardError: null,
      isCardFormButtonDisabled: false,
      isModalOpen: true,
      tutorPurchaseResult: null, // success, error, null,
      tutorPrice: {
        dollars: null,
        cents: null,
      },
      // This will be set after async call to fetch user's card on componentWillMount
      // It holds all card data, such as name, last 4 digits, city, etc
      cardData: {},

    }
  }

  async componentDidUpdate(prevProps) {
    // We got an accountHeaderId. Let's fetch user's credit card data with it
    if (!prevProps.account && this.props.account?.accountHeaderId) {
      console.log('---- FETCHING')
      const cardData = await fetchCreditCard(this.props.account.accountHeaderId);
      console.log(cardData)
      this.setState({ cardData })
    }
    //
  }

  handleTutoringPurchaseWithExistingCard = async () => {
    console.log('testTutoringPurchase', this.props);
    // This API returns `true` or `false`? not an object or str, but a bool.
    // minimalistic, i dig.
    let result = await sessionObj.purchaseTutoringPacks({ purchases: [ { numSessions: 2, product: 'RS_GROUP_TUTORING_PACK' } ]});

    if (result) {
      this.setState({ tutorPurchaseResult: "success"})
    } else {
      this.setState({ tutorPurchaseResult: "error"})
    }
  }

  handleModalClose = async () => {
    this.setState({tutorPurchaseResult: null});
    this.setState({isModalOpen: false});
  }


  handleCreditCardFormSubmit = e => {
    e.preventDefault()
    const { dispatch, creditCard } = this.props
    let errors = []

    if (!creditCard) {
      errors.push("An unknown error occurred. Please try again.")
      dispatch(actions.updateCreditCard({ ...creditCard, errors }))
      console.log("[error] creditCard state not loaded.")
      return
    }

    // Full name validation
    if (
      !creditCard.name
      || creditCard.name.trim() > 100
      || creditCard.name.trim() < 2
      || !/^([a-z]+(-|\.| )*)+$/i.test(creditCard.name))
      {
        errors.push("Name is invalid.")
    }

    // Card number validation
    if (!(creditCard.number.length >= 15 && creditCard.number.length <= 16) || /\*/.test(creditCard.number)) {
      errors.push(errorsMap["InvalidCCNumber"])
    }

    // State validation
    if (usStates.filter(e => e.abbreviation === creditCard.state).length === 0) {
      errors.push("State is invalid.")
    }

    // Zip code validation
    if (!creditCard.zip || creditCard.zip.length !== 5 ) {
      errors.push("Zip code is invalid.")
    }

    // Expiration date can't be in past
    const isExpDateValid = validateExpirationDate(
      parseInt(creditCard.expirationMonth),
      parseInt(creditCard.expirationYear)
    )
    if (isExpDateValid !== true) {
      errors.push(isExpDateValid.msg)
    }

     // Security code validation - 3 or 4 digits
     if (!creditCard.securityCode || !(creditCard.securityCode.length >= 3 && creditCard.securityCode.length <= 4)) {
      errors.push("Security code is invalid.")
    }

    if (errors.length) {
      dispatch(actions.updateCreditCard({ ...creditCard, errors }))
      return
    }

    const postData = {
      cardNumber: creditCard.number,
      expDate: {
        expMonth: parseInt(creditCard.expirationMonth),
        expYear: creditCard.expirationYear
      },
      securityCode: creditCard.securityCode,
      nameOnCard: creditCard.name,
      address: {
        zipCode: creditCard.zip,
        state: creditCard.state,
        country: creditCard.country,
      }
    }

    this.props.dispatch(actions.creditCardTokenFetchRequested(postData))
  }

  openModal(modal) {

  }

  updateCreditCardSubmit() {
    console.log("WE ARE SUBMITTING TO UPDATE`")
  }


  render() {
    if (!this.props.lionLoaded || !this.props.account) return null;
    const dispatch = this.props.dispatch
    const account = this.props.account
    const creditCard = this.props.creditCard
    const cardData = this.state.cardData

    // RSPE-151: Render the myaccount page differently for trial users
    const trialStartsAt = this.props.isFreeTrial
      ? new Date((parseInt(getAppParams().trial_ends_at) - (86400 * 3)) * 1000).toISOString().split('T')[0]
      : "";
    const trialEndsAt = this.props.isFreeTrial
      ? new Date((parseInt(getAppParams().trial_ends_at) - (86400 * 1)) * 1000).toISOString().split('T')[0]
      : "";

    let dollars, cents
     try {
      const price = this.props.tutoringPackByProductSessions('RS_GROUP_TUTORING_PACK', 2).fullPrice + ""
      dollars = price.split(".")[0]
      cents =   price?.split('.')[1] ?? "00"
    } catch (e) {
      console.log("couldn't manipulate tutoring price")
    }

    return (
      <>
        <CourseHeader />
        <AppUnderHeaderContainer>
          <PageWrapper>
            <CardsContainer>



              {/* Left side - products, payment info, auto renewal */}
              <CardWrapper>
                <CardTitleText>
                  <Lion.span lionkey="your_products" />
                </CardTitleText>
                { this.props.isFreeTrial ?
                  <CardDescriptionText>
                    <ProductName>{ TRIAL_LANG_MAP[getAppParams().target_language_rs_code] } { TRIAL_TEXT } </ProductName>
                    <Lion.span className="block" lionkey="subscription_start_date" replacements={{ $date: trialStartsAt }}/>
                    <Lion.span className="block" lionkey="subscription_end_date" replacements={{ $date: trialEndsAt }}/>
                    </CardDescriptionText> :
                    <CardDescriptionText>
                    <ProductName>{ PRODUCT_MAP[account.products?.[0]] } { DURATION_MAP[account.paymentTerm]} </ProductName>
                    <Lion.span className="block" lionkey="subscription_start_date" replacements={{ $date: account.startDate }}/>
                    { account.paymentTerm !== "LIFETIME" &&
                      <Lion.span className="block" lionkey="subscription_end_date" replacements={{ $date: account.expirationDate }}/>
                    }
                  </CardDescriptionText>
                }

                { account.paymentTerm !== "LIFETIME" && /* lifetime users can't update credit card */
                !this.props.isFreeTrial && /* RSPE-151: trial users shouldn't see payment info section */
                  <div>
                    <Spacer />
                    <CardTitleText bold blue>
                      <Lion.span lionkey="my_payment_information" />
                    </CardTitleText>

                      <div>
                        <Lion.div lionkey="full_name" />
                        <div>{ cardData.name }</div>
                      </div>

                      <div>
                        <Lion.div lionkey="card_number" />
                        <div>{ creditCard.number }</div>
                      </div>

                      <div>
                        <Lion.div lionkey="expiration_date" />
                        {creditCard.expirationYear}/{creditCard.expirationYear}
                      </div>





                  </div>
                }

                { account.paymentTerm !== "LIFETIME" /* lifetime users can't auto renew, it's one price for lifetime */ &&
                !this.props.isFreeTrial /* RSPE-151: trial users shouldn't see autorenew section */ &&
                account.isGift === "false" &&
                  <div>
                    <Spacer />
                    <CardTitleText>
                      <FlexTitle>
                        <Lion.span lionkey="auto_renewal" />
                        { account.isAllowedToAutoRenew &&
                          <ToggleWrapper>
                            <ReactToggleCSS />
                            <ReactToggle
                              className="dark-theme-toggle"
                              checked={account.isAutoRenew}
                              onChange={()=> dispatch(actions.setAutoRenewAsync(account.isAutoRenew))}
                            />
                          </ToggleWrapper>
                        }
                      </FlexTitle>
                    </CardTitleText>
                    <CardDescriptionText>
                      {account.isAutoRenew &&
                        <Lion.span lionkey="your_subscription_will_automatically_renew" replacements={{
                          $date: account.expirationDate,
                          $renewPrice: `$${account.nextBillPrice}`
                        }} />
                      }
                    </CardDescriptionText>
                  </div>
                }
              </CardWrapper>





              {/* Right side - tutoring */}
              { account.paymentTerm !== "LIFETIME" && /* lifetime & freetrial users don't see tutor ad */
                !this.props.isFreeTrial &&
                <CardWrapper className="tutoring-section">
                  <CardTitleText  align="center">
                    Want to get real-life practice with your new language?
                  </CardTitleText>

                  <CardDescriptionText color="#fff" textAlign="center">
                    Level up your learning through interactive tutoring sessions with native speakers!
                  </CardDescriptionText>

                  <TutorPricing>
                    <TutoringDeviceImg>
                      <img src={TutorImage} alt="Tutoring session on mobile phone" />
                    </TutoringDeviceImg>
                    <div className="price-area">
                      <p>
                        Get started with 2 sessions of group tutoring for only
                      </p>
                      <div className="price">
                        <super className="currency-sign">$</super>
                        <span className="dollars">{ dollars }</span>
                        <span className="cents-wrapper">
                          <span className="cents">{ '.' + cents}</span>
                          <span className="tax">+ tax</span>
                        </span>
                      </div>
                    </div>
                  </TutorPricing>

                  <Button
                    onClick={() => this.setState({isModalOpen: true})}
                    disabled={false}
                    type="submit">
                      BUY NOW
                  </Button>

                  <TutorLegalese>
                    *One-time exclusive offer. Rosetta Stone Tutoring sessions are only
                    available for use with an active product subscription. All prices are shown in US Dollars.
                  </TutorLegalese>
                </CardWrapper>
              }

              {/* modal */}
              {this.state.isModalOpen &&
                <ModalContainer>
                  <Modal>
                    <CreditCardForm
                      cardNumber={cardData.lastFourDigits}
                      cardName={cardData.name}
                      submitButtonText="UPDATE"
                      submitCallback={this.updateCreditCardSubmit}
                    />
                  </Modal>
                </ModalContainer>
              }
            </CardsContainer>
          </PageWrapper>
        </AppUnderHeaderContainer>
      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    lionLoaded: lionSelectors.getLionAppResourcesLoaded(state),
    lionTranslateString: key => {
      return lionSelectors.getLionTranslatedString(state, key);
    },
    account: state.myAccount.account,
    creditCard: state.myAccount.creditCard,
    pricingInfo: state.myAccount.pricingInfo,
    tutoringPackByProductSessions: tutoringPackByProductSessions(state),
    clientConfig: appSelectors.getClientConfig(state),
    isFreeTrial: getIsFreeTrial(state),
  };
};

const MyAccountContainer = connect(mapStateToProps)(MyAccount);

export default {
  sagas: myAccountSagas,
  reducers: {
    myAccount: myAccountReducer
  },
  rootComponent: MyAccountContainer
};