Fix classes names

app/frontend/src/javascript/api/space.ts

@@ -12,5 +12,4 @@ export default class SpaceAPI {
     const res: AxiosResponse<Space> = await apiClient.get(`/api/spaces/${id}`);
     return res?.data;
   }
-
 }

app/frontend/src/javascript/components/pricing/machines/configure-packs-button.tsx

@@ -64,8 +64,8 @@ export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ pack
   };
 
   return (
-    <div className="configure-packs-button">
+    <div className="configure-group">
-      <button className="packs-button" onClick={toggleShowList}>
+      <button className="configure-group-button" onClick={toggleShowList}>
         <i className="fas fa-box" />
       </button>
       {showList && <FabPopover title={t('app.admin.configure_packs_button.packs')} headerButton={renderAddButton()} className="fab-popover__right">
@@ -73,7 +73,7 @@ export const ConfigurePacksButton: React.FC<ConfigurePacksButtonProps> = ({ pack
           {packs?.map(p =>
             <li key={p.id} className={p.disabled ? 'disabled' : ''}>
               {formatDuration(p.minutes)} - {FormatLib.price(p.amount)}
-              <span className="pack-actions">
+              <span className="group-actions">
                 <EditPack onSuccess={handleSuccess} onError={onError} pack={p} />
                 <DeletePack onSuccess={handleSuccess} onError={onError} pack={p} />
               </span>

app/frontend/src/javascript/components/pricing/machines/delete-pack.tsx

@@ -42,8 +42,8 @@ const DeletePackComponent: React.FC<DeletePackProps> = ({ onSuccess, onError, pa
   };
 
   return (
-    <div className="delete-pack">
+    <div className="delete-group">
-      <FabButton type='button' className="remove-pack-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
+      <FabButton type='button' className="delete-group-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
       <FabModal title={t('app.admin.delete_pack.delete_pack')}
         isOpen={deletionModal}
         toggleModal={toggleDeletionModal}

app/frontend/src/javascript/components/pricing/machines/edit-pack.tsx

@@ -54,16 +54,15 @@ export const EditPack: React.FC<EditPackProps> = ({ pack, onSuccess, onError })
   };
 
   return (
-    <div className="edit-pack">
+    <div className="edit-group">
-      <FabButton type='button' className="edit-pack-button" icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
+      <FabButton type='button' icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
       <FabModal isOpen={isOpen}
         toggleModal={toggleModal}
         title={t('app.admin.edit_pack.edit_pack')}
-        className="edit-pack-modal"
         closeButton
         confirmButton={t('app.admin.edit_pack.confirm_changes')}
-        onConfirmSendFormId="edit-pack">
+        onConfirmSendFormId="edit-group">
-        {packData && <PackForm formId="edit-pack" onSubmit={handleUpdate} pack={packData} />}
+        {packData && <PackForm formId="edit-group" onSubmit={handleUpdate} pack={packData} />}
       </FabModal>
     </div>
   );

app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx

@@ -107,7 +107,7 @@ const MachinesPricing: React.FC<MachinesPricingProps> = ({ onError, onSuccess })
   };
 
   return (
-    <div className="machines-pricing">
+    <div className="pricing-list">
       <FabAlert level="warning">
         <p><HtmlTranslate trKey="app.admin.machines_pricing.prices_match_machine_hours_rates_html"/></p>
         <p><HtmlTranslate trKey="app.admin.machines_pricing.prices_calculated_on_hourly_rate_html" options={{ DURATION: `${EXEMPLE_DURATION}`, RATE: examplePrice('hourly_rate'), PRICE: examplePrice('final_price') }} /></p>

app/frontend/src/javascript/components/pricing/machines/pack-form.tsx

@@ -103,7 +103,7 @@ export const PackForm: React.FC<PackFormProps> = ({ formId, onSubmit, pack }) =>
   };
 
   return (
-    <form id={formId} onSubmit={handleSubmit} className="pack-form">
+    <form id={formId} onSubmit={handleSubmit} className="group-form">
       <label htmlFor="hours">{t('app.admin.pack_form.hours')} *</label>
       <FabInput id="hours"
         type="number"

app/frontend/src/javascript/components/pricing/spaces/configure-extended-price-button.tsx

@@ -28,7 +28,7 @@ export const ConfigureExtendedPriceButton: React.FC<ConfigureExtendedPriceButton
   const [showList, setShowList] = useState<boolean>(false);
 
   /**
-   * Open/closes the popover listing the existing packs
+   * Open/closes the popover listing the existing extended prices
    */
   const toggleShowList = (): void => {
     setShowList(!showList);
@@ -57,8 +57,8 @@ export const ConfigureExtendedPriceButton: React.FC<ConfigureExtendedPriceButton
   };
 
   return (
-    <div className="configure-extended-prices-button">
+    <div className="configure-group">
-      <button className="packs-button" onClick={toggleShowList}>
+      <button className="configure-group-button" onClick={toggleShowList}>
         <i className="fas fa-stopwatch" />
       </button>
       {showList && <FabPopover title={t('app.admin.configure_extendedPrices_button.extendedPrices')} headerButton={renderAddButton()} className="fab-popover__right">
@@ -66,7 +66,7 @@ export const ConfigureExtendedPriceButton: React.FC<ConfigureExtendedPriceButton
           {extendedPrices?.map(extendedPrice =>
             <li key={extendedPrice.id}>
               {extendedPrice.duration} {t('app.admin.calendar.minutes')} - {FormatLib.price(extendedPrice.amount)}
-              <span className="pack-actions">
+              <span className="group-actions">
                 <EditExtendedPrice onSuccess={handleSuccess} onError={onError} price={extendedPrice} />
                 <DeleteExtendedPrice onSuccess={handleSuccess} onError={onError} price={extendedPrice} />
               </span>

app/frontend/src/javascript/components/pricing/spaces/delete-extended-price.tsx

@@ -41,8 +41,8 @@ export const DeleteExtendedPrice: React.FC<DeleteExtendedPriceProps> = ({ onSucc
   };
 
   return (
-    <div className="delete-pack">
+    <div className="delete-group">
-      <FabButton type='button' className="remove-pack-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
+      <FabButton type='button' className="delete-group-button" icon={<i className="fa fa-trash" />} onClick={toggleDeletionModal} />
       <FabModal title={t('app.admin.delete_extendedPrice.delete_extendedPrice')}
         isOpen={deletionModal}
         toggleModal={toggleDeletionModal}

app/frontend/src/javascript/components/pricing/spaces/edit-extended-price.tsx

@@ -50,16 +50,15 @@ export const EditExtendedPrice: React.FC<EditExtendedPriceProps> = ({ price, onS
   };
 
   return (
-    <div className="edit-pack">
+    <div className="edit-group">
-      <FabButton type='button' className="edit-pack-button" icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
+      <FabButton type='button' icon={<i className="fas fa-edit" />} onClick={handleRequestEdit} />
       <FabModal isOpen={isOpen}
         toggleModal={toggleModal}
         title={t('app.admin.edit_extendedPrice.edit_extendedPrice')}
-        className="edit-pack-modal"
         closeButton
         confirmButton={t('app.admin.edit_extendedPrice.confirm_changes')}
-        onConfirmSendFormId="edit-pack">
+        onConfirmSendFormId="edit-group">
-        {extendedPriceData && <ExtendedPriceForm formId="edit-pack" onSubmit={handleUpdate} price={extendedPriceData} />}
+        {extendedPriceData && <ExtendedPriceForm formId="edit-group" onSubmit={handleUpdate} price={extendedPriceData} />}
       </FabModal>
     </div>
   );

app/frontend/src/javascript/components/pricing/spaces/extended-price-form.tsx

@@ -7,7 +7,7 @@ import { IFablab } from '../../../models/fablab';
 
 declare let Fablab: IFablab;
 
-interface PackFormProps {
+interface ExtendedPriceFormProps {
   formId: string,
   onSubmit: (pack: Price) => void,
   price?: Price,
@@ -17,7 +17,7 @@ interface PackFormProps {
  * A form component to create/edit a extended price.
  * The form validation must be created elsewhere, using the attribute form={formId}.
  */
-export const ExtendedPriceForm: React.FC<PackFormProps> = ({ formId, onSubmit, price }) => {
+export const ExtendedPriceForm: React.FC<ExtendedPriceFormProps> = ({ formId, onSubmit, price }) => {
   const [extendedPriceData, updateExtendedPriceData] = useImmer<Price>(price || {} as Price);
 
   const { t } = useTranslation('admin');
@@ -49,7 +49,7 @@ export const ExtendedPriceForm: React.FC<PackFormProps> = ({ formId, onSubmit, p
   };
 
   return (
-    <form id={formId} onSubmit={handleSubmit} className="pack-form">
+    <form id={formId} onSubmit={handleSubmit} className="group-form">
       <label htmlFor="duration">{t('app.admin.calendar.minutes')} *</label>
       <FabInput id="duration"
         type="number"

app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx

@@ -35,7 +35,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
 
   // retrieve the initial data
   useEffect(() => {
-    SpaceAPI.index(false)
+    SpaceAPI.index()
       .then(data => setSpaces(data))
       .catch(error => onError(error));
     GroupAPI.index({ disabled: false, admins: false })
@@ -67,7 +67,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
    * Find the default price (hourly rate) matching the given criterion
    */
   const findPriceBy = (spaceId, groupId): Price => {
-    return prices.find(price => price.priceable_id === spaceId && price.group_id === groupId && price.duration == 60);
+    return prices.find(price => price.priceable_id === spaceId && price.group_id === groupId && price.duration === 60);
   };
 
   /**
@@ -101,7 +101,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
   };
 
   return (
-    <div className="machines-pricing">
+    <div className="pricing-list">
       <FabAlert level="warning">
         <p><HtmlTranslate trKey="app.admin.pricing.these_prices_match_space_hours_rates_html"/></p>
         <p><HtmlTranslate trKey="app.admin.pricing.prices_calculated_on_hourly_rate_html" options={{ DURATION: `${EXEMPLE_DURATION}`, RATE: examplePrice('hourly_rate'), PRICE: examplePrice('final_price') }} /></p>
@@ -118,7 +118,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
           {spaces?.map(space => <tr key={space.id}>
             <td>{space.name}</td>
             {groups?.map(group => <td key={group.id}>
-              {prices && <EditablePrice price={findPriceBy(space.id, group.id)} onSave={handleUpdatePrice} />}
+              {prices.length && <EditablePrice price={findPriceBy(space.id, group.id)} onSave={handleUpdatePrice} />}
               <ConfigureExtendedPriceButton
                 prices={findExtendedPricesBy(space.id, group.id)}
                 onError={onError}

app/frontend/src/stylesheets/application.scss

@@ -57,12 +57,12 @@
 @import "modules/machines/machines-filters";
 @import "modules/machines/required-training-modal";
 @import "modules/user/avatar";
-@import "modules/pricing/machines-pricing";
+@import "modules/pricing/pricing-list";
 @import "modules/pricing/editable-price";
-@import "modules/pricing/configure-packs-button";
+@import "modules/pricing/configure-group-button";
-@import "modules/pricing/pack-form";
+@import "modules/pricing/group-form";
-@import "modules/pricing/delete-pack";
+@import "modules/pricing/delete-group";
-@import "modules/pricing/edit-pack";
+@import "modules/pricing/edit-group";
 @import "modules/settings/check-list-setting";
 @import "modules/prepaid-packs/propose-packs-modal";
 @import "modules/prepaid-packs/packs-summary";

app/frontend/src/stylesheets/modules/pricing/configure-group-button.scss

@@ -1,9 +1,9 @@
-.configure-packs-button {
+.configure-group {
   display: inline-block;
   margin-left: 6px;
   position: relative;
 
-  .packs-button {
+  &-button {
     border: 1px solid #d0cccc;
     border-radius: 50%;
     cursor: pointer;
@@ -44,7 +44,7 @@
           line-height: 24px;
         }
 
-        .pack-actions button {
+        .group-actions button {
           font-size: 10px;
           vertical-align: middle;
           line-height: 10px;

app/frontend/src/stylesheets/modules/pricing/delete-group.scss

@@ -1,7 +1,7 @@
-.delete-pack {
+.delete-group {
   display: inline;
 
-  .remove-pack-button {
+  &-button {
     background-color: #cb1117;
     color: white;
   }

app/frontend/src/stylesheets/modules/pricing/edit-group.scss

@@ -1,3 +1,3 @@
-.edit-pack {
+.edit-group {
   display: inline-block;
 }

app/frontend/src/stylesheets/modules/pricing/group-form.scss

@@ -1,4 +1,4 @@
-.pack-form {
+.group-form {
   .interval-inputs {
     display: flex;
 

app/frontend/src/stylesheets/modules/pricing/pricing-list.scss

@@ -1,4 +1,4 @@
-.machines-pricing {
+.pricing-list {
   .fab-alert {
     margin: 15px 0;
   }