[redesign] Purchase tickets views

app/actions/ControlActions.js

@@ -924,3 +924,17 @@ export const getPeerInfo = () => (dispatch, getState) => {
     })
     .catch((error) => dispatch({ type: GETPEERINFO_FAILED, error }));
 };
+
+export const SAVE_LEGACY_AUTOBUYER_SETTINGS = "SAVE_LEGACY_AUTOBUYER_SETTINGS ";
+export const saveLegacyAutoBuyerSettings = ({
+  balanceToMaintain,
+  account,
+  vsp
+}) => (dispatch) => {
+  dispatch({
+    type: SAVE_LEGACY_AUTOBUYER_SETTINGS,
+    balanceToMaintain,
+    account,
+    vsp
+  });
+};

app/actions/VSPActions.js

@@ -773,3 +773,15 @@ export const setVSPDVoteChoices = (passphrase) => async (
     dispatch({ type: SETVSPDVOTECHOICE_FAILED, error });
   }
 };
+
+export const SAVE_AUTOBUYER_SETTINGS = "SAVE_AUTOBUYER_SETTINGS";
+export const saveAutoBuyerSettings = ({ balanceToMaintain, account, vsp }) => (
+  dispatch
+) => {
+  dispatch({
+    type: SAVE_AUTOBUYER_SETTINGS,
+    balanceToMaintain,
+    account,
+    vsp
+  });
+};

app/components/buttons/AutoBuyerSwitch.jsx

@@ -1,11 +1,12 @@
 import { ToggleSwitch } from "buttons";
 import { FormattedMessage as T } from "react-intl";
 
-const AutoBuyerSwitch = ({ enabled, onClick, disabled }) => (
+const AutoBuyerSwitch = ({ enabled, onClick, disabled, className }) => (
   <ToggleSwitch
     enabled={enabled}
     onClick={onClick}
     disabled={disabled}
+    className={className}
     enabledText={<T id="autobuyer.enabled" m="Turn off auto buyer" />}
     notEnabledText={<T id="autobuyer.disabled" m="Turn on auto buyer" />}
   />

app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.jsx

@@ -0,0 +1,9 @@
+import styles from "./InvisiblePiUiButton.module.css";
+import { classNames } from "pi-ui";
+import { PiUiButton } from "buttons";
+
+const InvisiblePiUiButton = ({ className, ...props }) => (
+  <PiUiButton className={classNames(styles.button, className)} {...props} />
+);
+
+export default InvisiblePiUiButton;

app/components/buttons/InvisiblePiUiButton/InvisiblePiUiButton.module.css

@@ -0,0 +1,11 @@
+.button {
+  color: var(--disabled-color) !important;
+}
+.button:hover {
+  color: var(--stroke-color-hovered) !important;
+}
+.button,
+.button:hover {
+  background-color: transparent !important;
+  border: none !important;
+}

app/components/buttons/InvisiblePiUiButton/index.js

@@ -0,0 +1 @@
+export { default } from "./InvisiblePiUiButton";

app/components/buttons/PiUiButton/PiUiButton.jsx

@@ -0,0 +1,23 @@
+import styles from "./PiUiButton.module.css";
+import { classNames, Button } from "pi-ui";
+
+const PiUiButton = ({
+  className,
+  kind,
+  disabled,
+  loading,
+  onClick,
+  children
+}) => (
+  <Button
+    kind={disabled ? "disabled" : kind}
+    className={classNames(styles.button, styles[kind], className)}
+    {...{
+      onClick,
+      loading,
+      children
+    }}
+  />
+);
+
+export default PiUiButton;

app/components/buttons/PiUiButton/PiUiButton.module.css

@@ -0,0 +1,9 @@
+.button {
+  font-family: var(--font-family-regular);
+}
+.button.secondary {
+  background-color: var(--secondary-piui-button-bg);
+}
+.button.secondary:hover {
+  opacity: 0.7;
+}

app/components/buttons/PiUiButton/index.js

@@ -0,0 +1 @@
+export { default } from "./PiUiButton";

app/components/buttons/ToggleSwitch/ToggleSwitch.jsx

@@ -1,10 +1,11 @@
 import styles from "./ToggleSwitch.module.css";
-import { Tooltip } from "pi-ui";
+import { Tooltip, classNames } from "pi-ui";
 
 // enabled shows the switch as on or off.
 // disabled unable to trigger the onClick method.
 // enabledText and notEnabledText the tooltop contents when the switch is on/off.
 const ToggleSwitch = ({
+  className,
   enabled,
   onClick,
   disabled,
@@ -14,7 +15,7 @@ const ToggleSwitch = ({
   <Tooltip
     contentClassName={styles.tooltip}
     content={enabled ? enabledText : notEnabledText}>
-    <div className={styles.toggleSwitch}>
+    <div className={classNames(styles.toggleSwitch, className)}>
       <div
         data-testid="toggleSwitch"
         className={enabled ? styles.enabled : styles.disabled}

app/components/buttons/index.js

@@ -13,6 +13,8 @@ export { default as SendTransactionButton } from "./SendTransactionButton";
 export { default as ImportScriptIconButton } from "./ImportScriptIconButton";
 export { default as MixerSettingsIconButton } from "./MixerSettingsIconButton";
 export { default as ListUTXOsButton } from "./ListUTXOsButton";
+export { default as PiUiButton } from "./PiUiButton";
+export { default as InvisiblePiUiButton } from "./InvisiblePiUiButton";
 
 import ModalButton from "./ModalButton";
 import KeyBlueButton from "./KeyBlueButton";
@@ -24,6 +26,7 @@ import HelpLink from "./HelpLink/HelpLink";
 import InvisibleButton from "./InvisibleButton";
 import Button from "./Button/Button";
 import SmallButton from "./SmallButton";
+import PiUiButton from "./PiUiButton";
 export {
   ModalButton,
   ToggleSwitch,
@@ -106,6 +109,8 @@ export const InvisiblePassphraseModalButton = mbb(
   InvisibleButton
 );
 export const PassphraseModalButton = mbb(null, PassphraseModal, KeyBlueButton);
+export const RevokeModalButton = mbb(null, PassphraseModal, PiUiButton);
+export const TicketPurchaseModalButton = mbb(null, PassphraseModal, PiUiButton);
 export const AutoBuyerPassphraseModalSwitch = mbb(
   null,
   PassphraseModal,

app/components/inputs/DcrInput.jsx

@@ -2,7 +2,7 @@ import FloatInput from "./FloatInput";
 import IntegerInput from "./IntegerInput";
 import { MAX_DCR_AMOUNT, UNIT_DIVISOR } from "constants";
 import { useSelector } from "react-redux";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { ATOMS } from "constants";
 import * as sel from "selectors";
 
@@ -17,7 +17,12 @@ import * as sel from "selectors";
  * and later re-displaying the value is consistent.
  */
 function DcrInput({ onChangeAmount, amount, ...props }) {
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState(() => {
+    if (amount === undefined || isNaN(amount)) {
+      return;
+    }
+    return amount;
+  });
   const currencyDisplay = useSelector(sel.currencyDisplay);
 
   useEffect(() => {

app/components/inputs/NumTicketsInput/NumTicketsInput.jsx

@@ -17,9 +17,9 @@ const NumTicketsInput = ({
 }) => {
   const ticketUnitLabel =
     parseInt(numTickets) === 1 ? (
-      <T id="numTicketInput.unit" m="Ticket" />
+      <T id="numTicketsInput.ticket" m="ticket" />
     ) : (
-      <T id="numTicketsInput.unit" m="Tickets" />
+      <T id="numTicketsInput.tickets" m="tickets" />
     );
   return (
     <div className={classNames(style.container, invalid && style.error)}>
@@ -39,9 +39,9 @@ const NumTicketsInput = ({
           onChangeNumTickets && onChangeNumTickets(e.target.value)
         }
         data-max-width="70"
-        unit={!invalid && ticketUnitLabel}
         {...props}
       />
+      <div className={style.ticketUnitLabel}>{ticketUnitLabel}</div>
       <button
         key="less"
         aria-label="less"

app/components/inputs/NumTicketsInput/NumTicketsInput.module.css

@@ -1,72 +1,76 @@
 .container {
   height: 24px;
-  margin-left: 6px;
-  border-bottom: 1px var(--stroke-color-default) solid;
-  width: 125px;
+  width: 183px;
   position: relative;
   display: flex;
   flex-direction: row;
 }
-.container.error {
-  border-bottom: 1px var(--error-text-color) solid;
-}
 .container.error input {
-  max-width: initial;
   color: var(--error-text-color);
 }
-.container.error::before {
+.container.error .integerInput::before {
   position: absolute;
   content: "";
   width: 18px;
   height: 22px;
   top: 0;
-  right: 43px;
+  right: 0;
   display: block;
   background-repeat: no-repeat;
   background-image: var(--warning-input-icon);
   background-size: 16px 16px;
   background-position: 0 center;
 }
-.integerInput,
+.integerInput {
+  width: 75px;
+  font-size: 16px;
+  padding-left: 0;
+  padding-bottom: 2px;
+  position: relative;
+}
+.integerInput:hover {
+  border-bottom: 1px solid var(--accent-blue);
+}
 .integerInput:hover:not(.disabled):not(.active):not(.error) {
-  border: none !important;
+  border-bottom: 1px var(--accent-blue) solid;
 }
 .integerInput input {
-  max-width: 30px;
-  height: 22px;
+  font-size: 16px;
+  line-height: 16px;
 }
-.integerInput .unitArea {
-  color: var(--tx-detail-text) !important;
+.integerInput input::placeholder {
+  font-size: 16px;
+}
+.container.error .integerInput,
+.container.error .integerInput:hover:not(.disabled):not(.active):not(.error) {
+  border-bottom: 1px var(--error-text-color) solid;
 }
 .inputError {
-  border-bottom: 0;
   background-image: none;
 }
 .inputErrorsArea {
   width: 100%;
   position: absolute;
   bottom: -13px;
-  left: 6px;
+  left: 0;
   margin: 0;
 }
 .integerInput.error:hover {
   border-bottom: 0 !important;
 }
 .icon {
-  width: 20px;
-  height: 20px;
-  background-size: 6px;
+  width: 24px;
+  height: 24px;
+  background-size: 9px;
   background-position: 50% 50%;
   background-repeat: no-repeat;
-  background-color: var(--account-text);
-  box-shadow: 0px 3px 8px var(--icons-shadow);
-  margin-left: 3px;
+  background-color: var(--accent-blue);
   border-radius: 5px;
-  position: absolute;
-  top: 0;
   border: none;
   outline: 0;
   cursor: pointer;
+  position: absolute;
+  top: 0;
 }
 .icon.more {
   background-image: var(--tickets-plus-icon);
@@ -77,8 +81,13 @@
 }
 .icon.less {
   background-image: var(--tickets-minus-icon);
-  right: 22px;
+  right: 29px;
 }
 .icon.less:hover {
   opacity: 0.7;
 }
+.ticketUnitLabel {
+  color: var(--grey-5);
+  font-size: 16px;
+  line-height: 22px;
+}

app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.jsx

@@ -0,0 +1,68 @@
+import { FormattedMessage as T } from "react-intl";
+import Modal from "../Modal";
+import styles from "./AutoBuyerSettingsModal.module.css";
+import { DcrInput, AccountsSelect } from "inputs";
+import { PiUiButton, InvisiblePiUiButton } from "buttons";
+import { classNames } from "pi-ui";
+
+const AutoBuyerSettingsModal = ({
+  onCancelModal,
+  onSubmit,
+  show,
+  balanceToMaintain,
+  setBalanceToMaintain,
+  account,
+  setAccount,
+  vsp,
+  notMixedAccounts,
+  isValid,
+  clicked,
+  VSPSelectControl
+}) => {
+  return (
+    <Modal className={styles.modal} {...{ show }}>
+      <div className={styles.title}>
+        <T id="autoBuyerSettings.header" m="Automatic ticket purchases" />
+      </div>
+      <div className={styles.infoCloseButtonTop} onClick={onCancelModal} />
+      <label className={styles.label}>
+        <T id="vsp.autobuyer.balanceToMaintain" m="Balance to Maintain" />
+        <DcrInput
+          amount={balanceToMaintain?.value}
+          onChangeAmount={setBalanceToMaintain}
+          className={styles.balanceToMaintainInput}
+        />
+      </label>
+      <label className={classNames(styles.label, "selectWithBigFont")}>
+        <T id="vsp.autobuyer.accountFrom" m="From" />
+        <AccountsSelect
+          {...{ account }}
+          onChange={setAccount}
+          showAccountsButton={false}
+          hideSpendable={true}
+          filterAccounts={notMixedAccounts}
+          selectClassName={styles.accountSelectInput}
+        />
+      </label>
+      <label className={classNames(styles.label, "selectWithBigFont")}>
+        <T id="vsp.autobuyer.stakePoolLabel" m="VSP" />
+        {VSPSelectControl}
+      </label>
+      {clicked && isValid === false && (
+        <div className={styles.error}>
+          <T id="autobuyer.startErr" m="Fill all fields." />
+        </div>
+      )}
+      <div className={styles.buttons}>
+        <InvisiblePiUiButton onClick={onCancelModal}>
+          <T id="autoBuyerSettings.cancel" m="Cancel" />
+        </InvisiblePiUiButton>
+        <PiUiButton onClick={() => onSubmit(balanceToMaintain, account, vsp)}>
+          <T id="autoBuyerSettings.save" m="Save" />
+        </PiUiButton>
+      </div>
+    </Modal>
+  );
+};
+
+export default AutoBuyerSettingsModal;