fix: replace ticket types ddl with uicore component

src/actions/event-actions.js

@@ -481,6 +481,12 @@ export const normalizeEvent = (entity, eventTypeConfig, summit) => {
     }
   }
 
+  if (entity.allowed_ticket_types?.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => (tt.hasOwnProperty("id") ? tt.id : tt)
+    );
+  }
+
   if (summit)
     normalizePresentationAllowedQuestionFields(normalizedEntity, summit);
 
@@ -953,7 +959,8 @@ export const getEvent = (eventId) => async (dispatch, getState) => {
   const params = {
     access_token: accessToken,
     expand:
-      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.extra_questions, selection_plan.extra_questions.values,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,created_by,track_chair_scores_avg.ranking_type,actions"
+      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.extra_questions, selection_plan.extra_questions.values,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,created_by,track_chair_scores_avg.ranking_type,actions,allowed_ticket_types,allowed_badge_features_types",
+    fields: "allowed_ticket_types.id,allowed_ticket_types.name"
   };
 
   dispatch(startLoading());
@@ -1053,7 +1060,8 @@ export const saveEvent = (entity, publish) => async (dispatch, getState) => {
   const params = {
     access_token: accessToken,
     expand:
-      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,selection_plan.extra_questions,selection_plan.extra_questions.values,created_by,track_chair_scores_avg.ranking_type,actions"
+      "creator,speakers,moderator,sponsors,groups,type,type.allowed_media_upload_types,type.allowed_media_upload_types.type, slides, links, videos, media_uploads, tags, media_uploads.media_upload_type, media_uploads.media_upload_type.type,extra_questions,selection_plan,selection_plan.track_chair_rating_types,selection_plan.track_chair_rating_types.score_types,selection_plan.extra_questions,selection_plan.extra_questions.values,created_by,track_chair_scores_avg.ranking_type,actions,allowed_ticket_types",
+    fields: "allowed_ticket_types.id,allowed_ticket_types.name"
   };
 
   if (entity.id) {

src/actions/event-type-actions.js

@@ -9,9 +9,8 @@
  * 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 T from "i18n-react/dist/i18n-react";
-import history from "../history";
 import {
   getRequest,
   putRequest,
@@ -24,6 +23,7 @@ import {
   showSuccessMessage,
   authErrorHandler
 } from "openstack-uicore-foundation/lib/utils/actions";
+import history from "../history";
 import { getAccessTokenSafely } from "../utils/methods";
 
 export const REQUEST_EVENT_TYPES = "REQUEST_EVENT_TYPES";
@@ -67,7 +67,9 @@ export const getEventType = (eventTypeId) => async (dispatch, getState) => {
   dispatch(startLoading());
 
   const params = {
-    expand: "allowed_media_upload_types, allowed_media_upload_types.type",
+    expand:
+      "allowed_media_upload_types, allowed_media_upload_types.type, allowed_ticket_types",
+    fields: "allowed_ticket_types.id,allowed_ticket_types.name",
     access_token: accessToken
   };
 
@@ -81,7 +83,7 @@ export const getEventType = (eventTypeId) => async (dispatch, getState) => {
   });
 };
 
-export const resetEventTypeForm = () => (dispatch, getState) => {
+export const resetEventTypeForm = () => (dispatch) => {
   dispatch(createAction(RESET_EVENT_TYPE_FORM)({}));
 };
 
@@ -103,7 +105,7 @@ export const saveEventType = (entity) => async (dispatch, getState) => {
       normalizedEntity,
       authErrorHandler,
       entity
-    )(params)(dispatch).then((payload) => {
+    )(params)(dispatch).then(() => {
       dispatch(
         showSuccessMessage(T.translate("edit_event_type.event_type_saved"))
       );
@@ -177,32 +179,38 @@ export const seedEventTypes = () => async (dispatch, getState) => {
 const normalizeEntity = (entity) => {
   const normalizedEntity = { ...entity };
 
-  //remove # from color hexa
-  normalizedEntity["color"] = normalizedEntity["color"].substr(1);
+  // remove # from color hexa
+  normalizedEntity.color = normalizedEntity.color.substr(1);
 
-  delete normalizedEntity["id"];
-  delete normalizedEntity["created"];
-  delete normalizedEntity["last_edited"];
-  delete normalizedEntity["is_default"];
+  delete normalizedEntity.id;
+  delete normalizedEntity.created;
+  delete normalizedEntity.last_edited;
+  delete normalizedEntity.is_default;
 
   if (normalizedEntity.class_name === "EVENT_TYPE") {
-    delete normalizedEntity["should_be_available_on_cfp"];
-    delete normalizedEntity["use_speakers"];
-    delete normalizedEntity["are_speakers_mandatory"];
-    delete normalizedEntity["min_speakers"];
-    delete normalizedEntity["max_speakers"];
-    delete normalizedEntity["use_moderator"];
-    delete normalizedEntity["is_moderator_mandatory"];
-    delete normalizedEntity["min_moderators"];
-    delete normalizedEntity["max_moderators"];
-    delete normalizedEntity["moderator_label"];
-    delete normalizedEntity["min_duration"];
-    delete normalizedEntity["max_duration"];
+    delete normalizedEntity.should_be_available_on_cfp;
+    delete normalizedEntity.use_speakers;
+    delete normalizedEntity.are_speakers_mandatory;
+    delete normalizedEntity.min_speakers;
+    delete normalizedEntity.max_speakers;
+    delete normalizedEntity.use_moderator;
+    delete normalizedEntity.is_moderator_mandatory;
+    delete normalizedEntity.min_moderators;
+    delete normalizedEntity.max_moderators;
+    delete normalizedEntity.moderator_label;
+    delete normalizedEntity.min_duration;
+    delete normalizedEntity.max_duration;
   }
 
   if (normalizedEntity.show_always_on_schedule) {
     normalizedEntity.allowed_ticket_types = [];
   }
 
+  if (normalizedEntity.allowed_ticket_types.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => (tt.hasOwnProperty("id") ? tt.id : tt)
+    );
+  }
+
   return normalizedEntity;
 };

src/actions/order-actions.js

@@ -105,6 +105,11 @@ const normalizeQuestion = (entity) => {
       normalizedEntity.max_selected_values
     );
   }
+  if (normalizedEntity.allowed_ticket_types?.length > 0) {
+    normalizedEntity.allowed_ticket_types = entity.allowed_ticket_types.map(
+      (tt) => (tt.hasOwnProperty("id") ? tt.id : tt)
+    );
+  }
   return normalizedEntity;
 };
 
@@ -195,7 +200,8 @@ export const getOrderExtraQuestion =
 
     const params = {
       access_token: accessToken,
-      expand: "values,sub_question_rules"
+      expand: "values,sub_question_rules,allowed_ticket_types",
+      fields: "allowed_ticket_types.id, allowed_ticket_types.name"
     };
 
     return getRequest(
@@ -494,6 +500,10 @@ const normalizePurchaseOrder = (entity) => {
     delete normalizedEntity.owner_company_id;
   }
 
+  if (normalizedEntity.ticket_type_id != null) {
+    normalizedEntity.ticket_type_id = normalizedEntity.ticket_type_id.id;
+  }
+
   delete normalizedEntity.extra_questions;
 
   return normalizedEntity;

src/actions/registration-invitation-actions.js

@@ -9,7 +9,7 @@
  * 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 T from "i18n-react/dist/i18n-react";
 import {
@@ -29,6 +29,8 @@ import {
 import history from "../history";
 import { checkOrFilter, getAccessTokenSafely } from "../utils/methods";
 import { getSentEmailsByTemplatesAndEmail } from "./email-actions";
+import { DEFAULT_PER_PAGE } from "../utils/constants";
+
 export const REQUEST_INVITATIONS = "REQUEST_INVITATIONS";
 export const RECEIVE_INVITATIONS = "RECEIVE_INVITATIONS";
 export const INVITATIONS_IMPORTED = "INVITATIONS_IMPORTED";
@@ -51,13 +53,13 @@ export const REGISTRATION_INVITATION_ALL_DELETED =
 export const SET_CURRENT_FLOW_EVENT = "SET_CURRENT_FLOW_EVENT";
 export const SET_SELECTED_ALL = "SET_SELECTED_ALL";
 
-/**************************   INVITATIONS   ******************************************/
+/* *************************   INVITATIONS   ***************************************** */
 
 export const getInvitations =
   (
     term = null,
     page = 1,
-    perPage = 10,
+    perPage = DEFAULT_PER_PAGE,
     order = "id",
     orderDir = 1,
     filters = {}
@@ -71,7 +73,7 @@ export const getInvitations =
     dispatch(startLoading());
 
     const params = {
-      page: page,
+      page,
       per_page: perPage,
       access_token: accessToken,
       expand: "allowed_ticket_types,tags"
@@ -86,7 +88,7 @@ export const getInvitations =
     // order
     if (order != null && orderDir != null) {
       const orderDirSign = orderDir === 1 ? "+" : "-";
-      params["order"] = `${orderDirSign}${order}`;
+      params.order = `${orderDirSign}${order}`;
     }
 
     return getRequest(
@@ -138,7 +140,7 @@ export const exportInvitationsCSV =
     const { currentSummitState } = getState();
     const accessToken = await getAccessTokenSafely();
     const { currentSummit } = currentSummitState;
-    const filename = currentSummit.name + "-invitations.csv";
+    const filename = `${currentSummit.name}-invitations.csv`;
     const filter = parseFilters(filters, term);
 
     const params = {
@@ -152,7 +154,7 @@ export const exportInvitationsCSV =
     // order
     if (order != null && orderDir != null) {
       const orderDirSign = orderDir === 1 ? "+" : "-";
-      params["order"] = `${orderDirSign}${order}`;
+      params.order = `${orderDirSign}${order}`;
     }
 
     dispatch(
@@ -164,15 +166,15 @@ export const exportInvitationsCSV =
     );
   };
 
-export const selectInvitation = (invitationId) => (dispatch, getState) => {
+export const selectInvitation = (invitationId) => (dispatch) => {
   dispatch(createAction(SELECT_INVITATION)(invitationId));
 };
 
-export const unSelectInvitation = (invitationId) => (dispatch, getState) => {
+export const unSelectInvitation = (invitationId) => (dispatch) => {
   dispatch(createAction(UNSELECT_INVITATION)(invitationId));
 };
 
-export const clearAllSelectedInvitations = () => (dispatch, getState) => {
+export const clearAllSelectedInvitations = () => (dispatch) => {
   dispatch(createAction(CLEAR_ALL_SELECTED_INVITATIONS)());
 };
 
@@ -242,15 +244,15 @@ export const deleteAllRegistrationInvitation =
     });
   };
 
-export const resetRegistrationInvitationForm = () => (dispatch, getState) => {
+export const resetRegistrationInvitationForm = () => (dispatch) => {
   dispatch(createAction(RESET_REGISTRATION_INVITATION_FORM)({}));
 };
 
-export const setCurrentFlowEvent = (value) => (dispatch, getState) => {
+export const setCurrentFlowEvent = (value) => (dispatch) => {
   dispatch(createAction(SET_CURRENT_FLOW_EVENT)(value));
 };
 
-export const setSelectedAll = (value) => (dispatch, getState) => {
+export const setSelectedAll = (value) => (dispatch) => {
   dispatch(createAction(SET_SELECTED_ALL)(value));
 };
 
@@ -338,10 +340,10 @@ const normalizeEntity = (entity) => {
     (tt) => tt.id
   );
   normalizedEntity.tags = entity.tags.map((t) => t.tag);
-  delete normalizedEntity["created"];
-  delete normalizedEntity["last_edited"];
-  delete normalizedEntity["is_sent"];
-  delete normalizedEntity["accepted_date"];
+  delete normalizedEntity.created;
+  delete normalizedEntity.last_edited;
+  delete normalizedEntity.is_sent;
+  delete normalizedEntity.accepted_date;
   return normalizedEntity;
 };
 
@@ -384,11 +386,11 @@ export const sendEmails =
     };
 
     if (testRecipient) {
-      payload["test_email_recipient"] = testRecipient;
+      payload.test_email_recipient = testRecipient;
     }
 
     if (excerptRecipient) {
-      payload["outcome_email_recipient"] = excerptRecipient;
+      payload.outcome_email_recipient = excerptRecipient;
     }
 
     dispatch(startLoading());
@@ -424,11 +426,14 @@ const parseFilters = (filters, term = null) => {
   }
 
   if (filters.allowedTicketTypesIds?.length > 0) {
-    filter.push("ticket_types_id==" + filters.allowedTicketTypesIds.join("||"));
+    const ticketTypesId = filters.allowedTicketTypesIds.map((tt) =>
+      tt?.id ? tt.id : tt
+    );
+    filter.push(`ticket_types_id==${ticketTypesId.join("||")}`);
   }
 
   if (filters.tagFilter?.length > 0) {
-    filter.push("tags_id==" + filters.tagFilter.map((e) => e.id).join("||"));
+    filter.push(`tags_id==${filters.tagFilter.map((e) => e.id).join("||")}`);
   }
 
   if (term) {

src/actions/summit-actions.js

@@ -72,6 +72,7 @@ export const getSummitById = (summitId) => async (dispatch) => {
       "selection_plans," +
       "ticket_types," +
       "badge_types," +
+      "badge_features," +
       "badge_features_types," +
       "badge_access_level_types," +
       "badge_view_types," +

src/components/forms/event-form.js

@@ -32,6 +32,7 @@ import {
   Table,
   MemberInput,
   FreeTextSearch,
+  TicketTypesInput,
   SortableTable
 } from "openstack-uicore-foundation/lib/components";
 import { Pagination } from "react-bootstrap";
@@ -986,11 +987,6 @@ class EventForm extends React.Component {
       { label: "Submission", value: "Submission" }
     ];
 
-    const ticket_types_ddl = currentSummit.ticket_types.map((t) => ({
-      value: t.id,
-      label: t.name
-    }));
-
     return (
       <div>
         <input type="hidden" id="id" value={entity.id} />
@@ -1509,7 +1505,7 @@ class EventForm extends React.Component {
               <UploadInput
                 value={entity.attachment}
                 handleUpload={this.handleUploadFile}
-                handleRemove={(ev) => this.handleRemoveFile("attachment")}
+                handleRemove={() => this.handleRemoveFile("attachment")}
                 className="dropzone col-md-6"
                 multiple={this.props.multi}
                 accept="image/*"
@@ -1523,7 +1519,7 @@ class EventForm extends React.Component {
             <UploadInput
               value={entity.image}
               handleUpload={this.handleUploadPic}
-              handleRemove={(ev) => this.handleRemoveFile("image")}
+              handleRemove={() => this.handleRemoveFile("image")}
               className="dropzone col-md-6"
               multiple={false}
               accept="image/*"
@@ -1975,14 +1971,17 @@ class EventForm extends React.Component {
           <div className="row">
             <div className="col-md-4">
               <label> {T.translate("edit_event.allowed_ticket_types")}</label>
-              <Dropdown
+              <TicketTypesInput
                 id="allowed_ticket_types"
                 value={entity?.allowed_ticket_types}
                 placeholder={T.translate(
                   "edit_event.placeholders.allowed_ticket_types"
                 )}
-                options={ticket_types_ddl}
+                summitId={currentSummit.id}
                 onChange={this.handleChange}
+                version="v2"
+                defaultOptions
+                optionsLimit={100}
                 isMulti
               />
             </div>