Add ticket type input on promocodes and attendee ticket modal

Signed-off-by: Tomás Castillo <[email protected]>
fntechgit · Dec 20, 2024 · a305ad0 · a305ad0
1 parent 420deab
commit a305ad0
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 62 deletions.
diff --git a/src/actions/promocode-actions.js b/src/actions/promocode-actions.js
@@ -147,6 +147,12 @@ const normalizeEntity = (entity) => {
     normalizedEntity.tags = entity.tags.map((e) => e.tag);
   }
 
+  if (entity.allowed_ticket_types.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => tt.id
+    );
+  }
+
   delete normalizedEntity.owner;
   delete normalizedEntity.owner_id;
   delete normalizedEntity.speaker;
@@ -240,7 +246,7 @@ export const getPromocode = (promocodeId) => async (dispatch, getState) => {
 
   const params = {
     expand:
-      "owner,sponsor,sponsor.company,sponsor.sponsorship,sponsor.sponsorship.type,speaker,tickets,ticket_type,ticket_types_rules,tags",
+      "owner,sponsor,sponsor.company,sponsor.sponsorship,sponsor.sponsorship.type,speaker,tickets,ticket_type,ticket_types_rules,tags,allowed_ticket_types",
     access_token: accessToken
   };
 
@@ -270,7 +276,7 @@ export const savePromocode =
 
     const params = {
       expand:
-        "owner,sponsor,sponsor.company,sponsor.sponsorship,speaker,tickets,ticket_type,ticket_types_rules,tags",
+        "owner,sponsor,sponsor.company,sponsor.sponsorship,speaker,tickets,ticket_type,ticket_types_rules,tags,allowed_ticket_types",
       access_token: accessToken
     };
 

diff --git a/src/components/forms/attendee-form/ticket-component.js b/src/components/forms/attendee-form/ticket-component.js
@@ -9,18 +9,19 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
-import history from "../../../history";
 import T from "i18n-react/dist/i18n-react";
 import Swal from "sweetalert2";
 import { Modal } from "react-bootstrap";
 import {
   MemberInput,
-  Dropdown
+  TicketTypesInput
 } from "openstack-uicore-foundation/lib/components";
 
+import history from "../../../history";
+
 export default class TicketComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -51,15 +52,15 @@ export default class TicketComponent extends React.Component {
   }
 
   onDelete(ticket_id, ev) {
-    let { onDelete, attendeeId } = this.props;
+    const { onDelete, attendeeId } = this.props;
     ev.preventDefault();
-    let msg = {
+    const msg = {
       title: T.translate("general.are_you_sure"),
       text: T.translate("edit_attendee.remove_ticket_from_attendee"),
       type: "warning"
     };
 
-    Swal.fire(msg).then(function () {
+    Swal.fire(msg).then(() => {
       onDelete(attendeeId, ticket_id);
     });
   }
@@ -69,7 +70,7 @@ export default class TicketComponent extends React.Component {
     this.setState({ showAddModal: true });
   }
 
-  onCloseModal(ev) {
+  onCloseModal() {
     this.setState({ showEditModal: false, showAddModal: false });
   }
 
@@ -79,10 +80,10 @@ export default class TicketComponent extends React.Component {
     });
   }
 
-  handleTicketReassign(ev) {
-    let { onReassign, attendeeId } = this.props;
-    let newOwner = { ...this.state.newOwner };
-    let editTicket = { ...this.state.editTicket };
+  handleTicketReassign() {
+    const { onReassign, attendeeId } = this.props;
+    const newOwner = { ...this.state.newOwner };
+    const editTicket = { ...this.state.editTicket };
 
     this.setState({
       showEditModal: false,
@@ -93,9 +94,13 @@ export default class TicketComponent extends React.Component {
     onReassign(attendeeId, newOwner.id, editTicket.id);
   }
 
-  handleTicketSave(ev) {
-    let { onSave, attendeeId } = this.props;
-    let newTicket = { ...this.state.newTicket };
+  handleTicketSave() {
+    const { onSave, attendeeId } = this.props;
+    const newTicket = { ...this.state.newTicket };
+
+    newTicket.ticket_type_id = newTicket.ticket_type_id.id;
+
+    console.log("CHECK...", newTicket);
 
     this.setState({
       showAddModal: false,
@@ -110,11 +115,11 @@ export default class TicketComponent extends React.Component {
   }
 
   handleTicketChange(ev) {
-    let newTicket = { ...this.state.newTicket };
-    let { value, id } = ev.target;
+    const newTicket = { ...this.state.newTicket };
+    const { value, id } = ev.target;
 
     newTicket[id] = value;
-    this.setState({ newTicket: newTicket });
+    this.setState({ newTicket });
   }
 
   handleTicketLink = (ev, ticket) => {
@@ -126,12 +131,8 @@ export default class TicketComponent extends React.Component {
   };
 
   render() {
-    let { tickets, summit } = this.props;
-    let { showEditModal, showAddModal, editTicket, newTicket } = this.state;
-
-    let ticket_types_ddl = summit.ticket_types.map((t) => {
-      return { label: t.name, value: t.id };
-    });
+    const { tickets, summit } = this.props;
+    const { showEditModal, showAddModal, editTicket, newTicket } = this.state;
 
     return (
       <div className="ticket-component">
@@ -149,7 +150,7 @@ export default class TicketComponent extends React.Component {
             </legend>
             {tickets.map((t) => (
               <div
-                key={"tix_" + t.id}
+                key={`tix_${t.id}`}
                 className="btn-group btn-group-xs ticket-btn"
               >
                 <a
@@ -263,11 +264,11 @@ export default class TicketComponent extends React.Component {
                 <br />
                 <MemberInput
                   id="member"
-                  getOptionLabel={(member) => {
-                    return member.hasOwnProperty("email")
+                  getOptionLabel={(member) =>
+                    member.hasOwnProperty("email")
                       ? `${member.first_name} ${member.last_name} (${member.email})`
-                      : `${member.first_name} ${member.last_name} (${member.id})`;
-                  }}
+                      : `${member.first_name} ${member.last_name} (${member.id})`
+                  }
                   value={this.state.newOwner}
                   onChange={this.handleMemberChange}
                 />
@@ -301,14 +302,17 @@ export default class TicketComponent extends React.Component {
                 }
               >
                 <label>{T.translate("edit_attendee.ticket_type")}</label>
-                <Dropdown
+                <TicketTypesInput
                   id="ticket_type_id"
                   placeholder={T.translate(
                     "edit_attendee.placeholders.select_ticket_type"
                   )}
-                  options={ticket_types_ddl}
+                  summitId={summit.id}
                   onChange={this.handleTicketChange}
                   value={newTicket ? newTicket.ticket_type_id : ""}
+                  version="v2"
+                  defaultOptions
+                  optionsLimit={100}
                 />
               </div>
               {summit.external_registration_feed_type === "none" && (

diff --git a/src/components/forms/promocode-form/forms/generic-base-pc-form.js b/src/components/forms/promocode-form/forms/generic-base-pc-form.js
@@ -1,34 +1,30 @@
 import React from "react";
 import T from "i18n-react";
+import { TicketTypesInput } from "openstack-uicore-foundation/lib/components";
 import BasePCForm from "./base-pc-form";
-import { Dropdown } from "openstack-uicore-foundation/lib/components";
 
-const GenericBasePCForm = (props) => {
-  let ticket_types_ddl = props.summit.ticket_types.map((f) => ({
-    label: f.name,
-    value: f.id
-  }));
-
-  return (
-    <>
-      <BasePCForm {...props} />
-      <div className="row form-group">
-        <div className="col-md-6">
-          <label> {T.translate("edit_promocode.allowed_ticket_types")}</label>
-          <Dropdown
-            id="allowed_ticket_types"
-            value={props.entity.allowed_ticket_types}
-            onChange={props.handleChange}
-            placeholder={T.translate(
-              "edit_promocode.placeholders.select_ticket_types"
-            )}
-            options={ticket_types_ddl}
-            isMulti
-          />
-        </div>
+const GenericBasePCForm = (props) => (
+  <>
+    <BasePCForm {...props} />
+    <div className="row form-group">
+      <div className="col-md-6">
+        <label> {T.translate("edit_promocode.allowed_ticket_types")}</label>
+        <TicketTypesInput
+          id="allowed_ticket_types"
+          value={props.entity.allowed_ticket_types}
+          onChange={props.handleChange}
+          placeholder={T.translate(
+            "edit_promocode.placeholders.select_ticket_types"
+          )}
+          summitId={props.summit.id}
+          version="v2"
+          defaultOptions
+          optionsLimit={100}
+          isMulti
+        />
       </div>
-    </>
-  );
-};
+    </div>
+  </>
+);
 
 export default GenericBasePCForm;
diff --git a/src/reducers/attendees/attendee-reducer.js b/src/reducers/attendees/attendee-reducer.js
@@ -95,12 +95,14 @@ const attendeeReducer = (state = DEFAULT_STATE, action = {}) => {
       return { ...state };
     }
     case TICKET_ADDED: {
-      const newTicket = payload.response;
+      const newOrder = payload.response;
+      const newTicket = newOrder.tickets[0];
       return {
         ...state,
         entity: {
           ...state.entity,
-          tickets: [...state.entity.tickets, newTicket]
+          tickets: [...state.entity.tickets, newTicket],
+          orders: [...state.entity.orders, newOrder]
         }
       };
     }

diff --git a/src/reducers/orders/purchase-order-list-reducer.js b/src/reducers/orders/purchase-order-list-reducer.js
@@ -23,7 +23,7 @@ import {
 import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
 
 const DEFAULT_STATE = {
-  purchaseOrders: {},
+  purchaseOrders: [],
   term: null,
   order: "created",
   orderDir: 1,