Dashboard 4 (#1626)

* fix for #1621

* fix #1623

* better workflow for editing / removing saved payments

* fix for #1618

imports/blocks/add-to-cart/Schedule/index.js

@@ -64,6 +64,11 @@ export class Schedule extends Component {
       return;
     }
 
+    if (!this.state.checked && checked) {
+      this.props.setCanCheckout(true);
+      return;
+    }
+
     if (
       (this.state.start && this.state.frequency) &&
       (!start || !frequency)

imports/components/cards/__tests__/__snapshots__/cards.SavedPayment.js.snap

@@ -1,6 +1,13 @@
 exports[`SavedPaymentCard should have an accountName, fourDigit accountNumber, paymentType, and an onClick function 1`] = `
 <div
-  className="">
+  className=""
+  data-spec="saved-payment"
+  onClick={[Function]}
+  style={
+    Object {
+      "cursor": "pointer",
+    }
+  }>
   <div
     className="card">
     <div
@@ -34,16 +41,9 @@ exports[`SavedPaymentCard should have an accountName, fourDigit accountNumber, p
           </div>
         </div>
         <div
-          className="floating__item grid__item one-third text-right"
-          data-spec="saved-payment-close"
-          onClick={[Function]}
-          style={
-            Object {
-              "cursor": "pointer",
-            }
-          }>
+          className="floating__item grid__item one-third text-right">
           <i
-            className="icon-close text-alert" />
+            className="icon-arrow-next text-primary" />
         </div>
       </div>
     </div>

imports/components/cards/__tests__/cards.SavedPayment.js

@@ -29,7 +29,7 @@ describe("SavedPaymentCard", () => {
     const mockOnClick = jest.fn();
     const tree = shallow(generateComponent({ payment: defaultAccount, onClick: mockOnClick}));
 
-    tree.find("[data-spec=\"saved-payment-close\"]").simulate("click");
+    tree.find("[data-spec=\"saved-payment\"]").simulate("click");
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
 

imports/components/cards/cards.SavedPayment.js

@@ -15,7 +15,12 @@ const SavedPaymentCard = ({
   onClick,
   classes,
 }: ISavedPaymentCard) => (
-  <div className={`${classes || ""}`} >
+  <div
+    className={`${classes || ""}`}
+    onClick={onClick}
+    style={{ cursor: "pointer" }}
+    data-spec="saved-payment"
+  >
     <div className="card">
       <div className="card__item soft push-half-ends one-whole" style={{ verticalAlign: "middle" }}>
         <div className="floating grid">
@@ -32,13 +37,8 @@ const SavedPaymentCard = ({
               </div>
             </div>
           </div>
-          <div
-            data-spec="saved-payment-close"
-            className="floating__item grid__item one-third text-right"
-            onClick={onClick}
-            style={{ cursor: "pointer" }}
-          >
-            <i className="icon-close text-alert" />
+          <div className="floating__item grid__item one-third text-right">
+            <i className="icon-arrow-next text-primary" />
           </div>
         </div>
       </div>

imports/pages/give/history/Filter.js

@@ -209,6 +209,7 @@ export default class Filter extends Component {
   render() {
     const { family } = this.props;
     const { expanded } = this.state;
+
     return (
       <div style={{ position: "relative" }}>
         <div
@@ -295,18 +296,42 @@ export default class Filter extends Component {
                   label={this.state.customStartLabel}
                   val={"StartDate"}
                   onClick={this.startClick}
-                  active={this.state.customStartActive}
-                  className={this.state.customDateDisabled && "tag--disabled"}
-                  icon={!this.state.customStartActive && scheduleIcon}
+                  active={(
+                    this.state.customStartLabel !== "Start Date" &&
+                    this.state.customStartActive
+                  )}
+                  className={(
+                    this.state.customStartLabel !== "Start Date" &&
+                    this.state.customDateDisabled &&
+                    "tag--disabled"
+                  )}
+                  icon={(
+                    this.state.customStartLabel === "Start Date" &&
+                    !this.state.showStartDatePicker &&
+                    !this.state.customStartActive &&
+                    scheduleIcon
+                  )}
                 />
                 <Tag
                   key={2}
                   label={this.state.customEndLabel}
                   val={"EndDate"}
                   onClick={this.startClick}
-                  active={this.state.customEndActive}
-                  className={this.state.customDateDisabled && "tag--disabled"}
-                  icon={!this.state.customEndActive && scheduleIcon}
+                  active={(
+                    this.state.customEndLabel !== "End Date" &&
+                    this.state.customEndActive
+                  )}
+                  className={(
+                    this.state.customEndLabel !== "End Date" &&
+                    this.state.customDateDisabled &&
+                    "tag--disabled"
+                  )}
+                  icon={(
+                    this.state.customEndLabel === "End Date" &&
+                    !this.state.showEndDatePicker &&
+                    !this.state.customEndActive &&
+                    scheduleIcon
+                  )}
                 />
               </div>
             </div>

imports/pages/give/home/components/Loading.js

@@ -0,0 +1,30 @@
+// @flow
+
+import { WindowLoading, Spinner } from "../../../../components/loading";
+
+const UPDATE_HEADER = "We're Updating Your Saved Account";
+const UPDATE_TEXT = "Please don't close this window while we update your account details";
+
+
+const CANCEL_HEADER = "We're Removing Your Saved Account";
+const CANCEL_TEXT = "Please don't close this window while we remove your account details";
+
+type ILoadingProps = {
+  type: string,
+}
+
+export default ({ type }: ILoadingProps) => (
+  <WindowLoading classes={["background--primary"]}>
+    <div className="soft soft-double-ends push-double-top one-whole text-center">
+      <div className="push-double-top">
+        <Spinner styles={{ borderColor: "#fff #6BAC43 #fff #fff", borderWidth: "7px" }} />
+        <h3 className="text-light-primary push-top">
+          {type === "update" ? UPDATE_HEADER : CANCEL_HEADER}
+        </h3>
+        <p className="text-light-primary">
+          {type === "update" ? UPDATE_TEXT : CANCEL_TEXT}
+        </p>
+      </div>
+    </div>
+  </WindowLoading>
+);

imports/pages/give/home/components/Success.js

@@ -0,0 +1,50 @@
+// @flow
+
+import { Success as SuccessIcon } from "../../../../components/icons";
+
+const CONTACT_MESSAGE_1 = "If you have any questions please call our Finance Team at 864-965-9990 or";
+const CONTACT_MESSAGE_2 = "and someone will be happy to assist you.";
+
+export const ContactLink = () => (
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    href="//rock.newspring.cc/workflows/152?Topic=Stewardship"
+  >
+    contact us
+  </a>
+);
+
+export const ContactUs = () => (
+  <p className="test-dark-tertiary text-left">
+    <em>
+      {CONTACT_MESSAGE_1} <ContactLink /> {CONTACT_MESSAGE_2}
+    </em>
+  </p>
+);
+
+type ISuccess = {
+  type: string,
+  onClick?: Function,
+};
+
+export default ({
+  onClick,
+  type,
+}: ISuccess) => (
+  <div className="soft soft-double-ends push-double-top@anchored one-whole text-center">
+    <div className="push-double-top">
+      <SuccessIcon />
+      <h3 className="text-primary push-ends">Success!</h3>
+
+      {type === "update" && <p>Thank you for updating your saved account!</p>}
+      {type !== "update" && <p>Your account has been removed!</p>}
+
+      <button className="btn one-whole push-bottom" onClick={onClick}>
+        Back To Dashboard
+      </button>
+
+      <ContactUs />
+    </div>
+  </div>
+);