SHARE
TWEET

Untitled

a guest Jan 22nd, 2020 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, Fragment } from 'react';
  2. import { Card } from 'singlepage/components/Card';
  3. import { AnimatedModal, ModalHeader, ModalBody, ModalFooter2, ModalAction } from 'components/Modal';
  4. import { Field } from 'components/Field';
  5. import PropTypes from 'prop-types';
  6. import { formatAmountCents } from 'lib/money'
  7. import './AccordionItem.scss';
  8.  
  9. export const AccordionItem = (props) => {
  10.     const styles = { positionText: { textAlign: 'end' } }
  11.     const removeButton = {
  12.         display: 'flex',
  13.         float: 'right',
  14.         padding: 20,
  15.     }
  16.     const { planName, planCode, items, currencies } = props;
  17.     let [showDeleteModal, setShowDeleteModal ] = useState(false)
  18.  
  19.     function handleClick(evt) {
  20.         const active = evt.currentTarget.classList.toggle('active');
  21.  
  22.         (active)
  23.         ?
  24.             evt.currentTarget.classList.add(`accordion-item--opened`)
  25.         :
  26.             evt.currentTarget.classList.remove(`accordion-item--opened`)
  27.  
  28.     }
  29.  
  30.     function onClickRemove(event) {
  31.         event.preventDefault();
  32.         openDeleteModal();
  33.       };
  34.  
  35.       function closeDeleteModal (){
  36.         setShowDeleteModal(!showDeleteModal);
  37.       };
  38.  
  39.       function openDeleteModal(){
  40.         setShowDeleteModal(!showDeleteModal);
  41.       };
  42.     return (
  43.  
  44.         // Quitar <> </> estos tags propios de Fragment
  45.         // Quitar lineas de codigo de 98 a 102, hacen al boton remove
  46.         // AnimatedModal trasladarlo al form
  47.         items.map((item, idx) =>
  48.        <>
  49.             <ul className='accordion-list' key={idx}>
  50.                 <li className={'accordion-list__item', idx} >
  51.                     <div
  52.                         className={`accordion-item`}
  53.                         onClick={handleClick}
  54.                     >
  55.                         <div className={'accordion-item__line'}>
  56.                             <h4 className={'accordion-item__title'}>
  57.                                 Price Change Submitted on {item.pending_plan_change.created_at}
  58.                             </h4>
  59.                             <span className={'accordion-item__icon'}></span>
  60.                         </div>
  61.                         <div className={'accordion-item__inner'}>
  62.                             <div className={'accordion-item__content'}>
  63.                                 <Card.Row key={idx}>
  64.                                     <Card.Col soft>
  65.                                         <Field label="EFFECTIVE DATE" />
  66.                                         <p className="Paragraph--ancillary">New Subscriptions</p>
  67.                                         <p className="Paragraph--ancillary">Existing Subscriptions</p>
  68.                                     </Card.Col>
  69.                                     <Card.Col soft />
  70.                                     <Card.Col soft />
  71.                                     <Card.Col soft>
  72.                                         <Field />
  73.                                         <p className="accordion-item__paragraph" style={styles.positionText}>{item.pending_plan_change.activate_at}</p>
  74.                                         <p className="accordion-item__paragraph" style={styles.positionText}>{item.pending_plan_change.activate_for_existing_subscriptions_at}</p>
  75.                                     </Card.Col>
  76.                                 </Card.Row>
  77.                                 {
  78.                                     currencies.map((currency, idx) =>
  79.                                         <Card.Row key={idx}>
  80.                                             <Card.Col soft>
  81.                                                 <Field label="PLAN/ADD-ON" />
  82.                                                 <p className="Paragraph--ancillary">{planName}({planCode})</p>
  83.                                                 {
  84.                                                     item.pending_plan_change.pending_plan_add_on_changes.map((pending_plan_add_on_change, idx) =>
  85.                                                     <>
  86.                                                         <p className="Paragraph--ancillary">{pending_plan_add_on_change.add_on.name}({pending_plan_add_on_change.add_on.merchant_sku})</p>
  87.                                                     </>
  88.                                                     )
  89.                                                 }
  90.                                             </Card.Col>
  91.                                             <Card.Col soft >
  92.                                                 <Field label="OLD PRICE" style={styles.positionText} />
  93.                                                 <p className="accordion-item__paragraph" style={styles.positionText}>{formatAmountCents(currency.plan_product_option_price.price_in_decimal_units, currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code}</p>
  94.                                                 {
  95.                                                     item.pending_plan_change.pending_plan_add_on_changes.map((pending_plan_add_on_change, idx) =>
  96.                                                     <>
  97.                                                         <p className="accordion-item__paragraph" style={styles.positionText}>{
  98.                                                             formatAmountCents(pending_plan_add_on_change.add_on.currencies.find(add_on_currency => add_on_currency.code === currency.code ).price_in_decimal_units, currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code
  99.                                                         }</p>
  100.                                                     </>
  101.                                                     )
  102.                                                 }
  103.                                             </Card.Col>
  104.                                             <Card.Col soft />
  105.                                             <Card.Col soft />
  106.                                             <Card.Col soft>
  107.                                                 <Field label="CHANGING TO" style={styles.positionText} />
  108.                                                 <p className="accordion-item__paragraph" style={styles.positionText}>{formatAmountCents(currency.plan_product_option_price.price_in_decimal_units, currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code}</p>
  109.                                                 {
  110.                                                     item.pending_plan_change.pending_plan_add_on_changes.map((pending_plan_add_on_change, idx) =>
  111.                                                     <>
  112.                                                         {
  113.                                                             if (pending_plan_add_on_change.pending_attribute_changes.unit_amount_in_cents[currency.plan_product_option_price.currency_code]) {
  114.                                                                 <p className="accordion-item__paragraph" style={styles.positionText}>{
  115.                                                                      formatAmountCents(pending_plan_add_on_change.pending_attribute_changes.unit_amount_in_cents[currency.plan_product_option_price.currency_code], currency.plan_product_option_price.currency_code)} {currency.plan_product_option_price.currency_code
  116.                                                                 }</p>
  117.                                                             }
  118.                                                         }
  119.                                                     </>
  120.                                                     )
  121.                                                 }
  122.                                             </Card.Col>
  123.                                         </Card.Row>
  124.                                     )
  125.                                 }
  126.                             <div className="Actions" style={removeButton}>
  127.                                 <div className="Action">
  128.                                     <a className="Button Button--destructive" onClick={onClickRemove} href="#">Remove</a>
  129.                                 </div>
  130.                             </div>
  131.                             </div>
  132.                         </div>
  133.                     </div>
  134.                 </li>
  135.             </ul>
  136.         <AnimatedModal show={showDeleteModal} onClose={closeDeleteModal}>
  137.         <ModalHeader>
  138.           <h3>Schedule Price Change?</h3>
  139.         </ModalHeader>
  140.         <ModalBody>
  141.           <p>This will affect <strong>all existing and new subscriptions</strong> to this plan.</p>
  142.           <p>Please review the effective dates and all price changes. Once scheduled, changes can only be edited or removed by contacting support.</p>
  143.         </ModalBody>
  144.         <ModalFooter2>
  145.           <ModalAction>
  146.             <a className="Button Button--solid Button--primary" rel="nofollow">Schedule</a>
  147.           </ModalAction>
  148.           <ModalAction>
  149.             <a onClick={closeDeleteModal} href="#" className="Link--muted">Cancel</a>
  150.           </ModalAction>
  151.         </ModalFooter2>
  152.       </AnimatedModal>
  153.         </>
  154.         )
  155.     )
  156. }
  157.  
  158. AccordionItem.displayName = 'AccordionItem';
  159.  
  160. AccordionItem.propTypes = {
  161.     props: PropTypes.object,
  162.     opened: PropTypes.bool,
  163. };
  164. re
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top