Un 1973 expired payments

package.json

@@ -16,6 +16,7 @@
     "i18next": "^20.2.2",
     "i18next-browser-languagedetector": "^6.1.0",
     "lzutf8": "^0.6.0",
+    "qs": "^6.14.0",
     "query-string": "^7.0.0",
     "react": "17.0.2",
     "react-app-polyfill": "^2.0.0",
@@ -102,6 +103,7 @@
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
     "@sentry/cli": "^2.23.0",
     "@types/node": "^14.14.41",
+    "@types/qs": "^6.14.0",
     "@types/react": "17.0.9",
     "@types/react-dom": "17.0.9",
     "@types/react-gtm-module": "^2.0.0",

src/locales/en/translation.json

@@ -76,6 +76,7 @@
   "Approved bugs": "Approved bugs",
   "Area is a required field.": "Area is a required field.",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Enter your details in the Profile section: they are important to be selected for suitable campaign and to request the payments.",
+  "Attribution date": "Attribution date",
   "Available booty": "Available booty",
   "Available tags \n<a> - Link to help article for fiscal type": {
     "@@Description for fiscal type@@": "<a>Click here</a> for more info"
@@ -244,6 +245,8 @@
   "Employment": "Employment",
   "End Date": "End Date",
   "Experience Points": "Experience Points",
+  "Expiration date": "",
+  "Expired On": "Expired on",
   "Extra Award": "Extra Award",
   "FAQ": "FAQ",
   "Facebook": "Facebook",
@@ -285,6 +288,7 @@
   },
   "Gross": "Gross",
   "Gross amount": "Gross amount",
+  "Gross total": "Gross total",
   "Have fun!": "Don't forget to have a good time!",
   "Here is the list of your all devices. Make sure to keep it updated in order to boost your chances to be selected for further projects.": "Here is the list of your all devices. Make sure to keep it updated in order to boost your chances to be selected for further projects.",
   "Here you can only change the version of your operating system. If you want to add another device click on \"Add device\"": "Here you can only change the version of your operating system. If you want to add another device click on \"Add device\"",
@@ -673,6 +677,7 @@
   "__RANKING_TITLE_LABEL_POSITION_MAX: 15": "Position",
   "__RANKING_TITLE_WELCOM_MAX: 20": "Ranking",
   "__SELECT_DEFAULT_NO_OPTION": "No options",
+  "__WALLET_CARD-EXPIRATION_DISCLAIMER": "Keep in mind: every booty is valid for 12 months",
   "__WALLET_CARD-GUIDES_CTA MAX: 20": "Read our guides",
   "__WALLET_CARD-GUIDES_PARAGRAPH MAX: 60": "Discover how we manage your payment requests.",
   "__WALLET_CARD-GUIDES_TITLE MAX: 35": "Any questions on payment process?",
@@ -683,6 +688,9 @@
   "__WALLET_CARD-REQUEST_DISCLAIMER-PROCESSING MAX: 150": "You can request only one payment at a time: you alreay have a payment in process, this may take up to 20 working days.",
   "__WALLET_CARD-REQUEST_TITLE MAX: 40": "Manage your payment",
   "__WALLET_CARD-YOUR_WALLET_MAX: 15": "Your wallet",
+  "__WALLET_EXPIRED_TAB": "Expired booties",
+  "__WALLET_EXPIRED_TAB-DESCRIPTION": "List of expired booty, for which more than 12 months have passed and it is no longer possible to request payment",
+  "__WALLET_HISTORY_TAB": "Payment history",
   "__WALLET_HOME-EMPTY_STATE_MAX: 105": "Your payment history is now empty. When you start requesting your payments, you will view them here.",
   "__WALLET_TABLE-HEADER_CTA-ICON-DETAILS MAX:": "View details",
   "__WALLET_TABLE-HEADER_CTA-ICON-PDF MAX:": "Download receipt",
@@ -792,6 +800,7 @@
     "BUGFORM_UPLOAD_PROGRESS": "{{num}} uploaded",
     "BUGFORM_UPLOAD_PROGRESS_plural": "{{num}} uploaded"
   },
+  "Tipo attività": "",
   "Report a Bug": "",
   "Page Preview": "",
   "/my-account/": "/my-account/",

src/locales/es/translation.json

@@ -76,6 +76,7 @@
   "Approved bugs": "Bugs aprobados",
   "Area is a required field.": "El área / La esfera es un campo obligatorio",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Añade todos tus datos en la sección Perfil: los necesitaremos para seleccionarte cuando haya una campaña adecuada y para que puedas solicitar los pagos.",
+  "Attribution date": "Fecha de atribución",
   "Available booty": "Saldo Disponible",
   "Available tags \n<a> - Link to help article for fiscal type": {
     "@@Description for fiscal type@@": "<a>Haga clic aquí</a> para obtener más información"
@@ -244,6 +245,8 @@
   "Employment": "Empleo",
   "End Date": "Fecha Final",
   "Experience Points": "Puntos de Experiencia",
+  "Expiration date": "",
+  "Expired On": "Caducado el",
   "Extra Award": "Recompensa Extra",
   "FAQ": "Preguntas Frecuentes",
   "Facebook": "Facebook",
@@ -285,6 +288,7 @@
   },
   "Gross": "Bruto",
   "Gross amount": "Cantidad bruta",
+  "Gross total": "Total bruto",
   "Have fun!": "¡No te olvides de pasarlo bien!",
   "Here is the list of your all devices. Make sure to keep it updated in order to boost your chances to be selected for further projects.": "Aquí está la lista de todos tus dispositivos. Asegúrete de mantenerla actualizada para aumentar tus posibilidades de ser seleccionado para proyectos futuros.",
   "Here you can only change the version of your operating system. If you want to add another device click on \"Add device\"": "Aquí solo puedes cambiar la versión de tu sistema operativo. Si deseas agregar otro dispositivo, haga clic en \"Agregar dispositivo\"",
@@ -673,6 +677,7 @@
   "__RANKING_TITLE_LABEL_POSITION_MAX: 15": "Posición",
   "__RANKING_TITLE_WELCOM_MAX: 20": "Clasificación",
   "__SELECT_DEFAULT_NO_OPTION": "sin opciones",
+  "__WALLET_CARD-EXPIRATION_DISCLAIMER": "Cada en cuenta: cada ingreso es válido por 12 meses",
   "__WALLET_CARD-GUIDES_CTA MAX: 20": "Nuestras guías",
   "__WALLET_CARD-GUIDES_PARAGRAPH MAX: 60": "Descubre cómo gestionamos tus solicitudes de pago",
   "__WALLET_CARD-GUIDES_TITLE MAX: 35": "¿Dudas sobre el proceso de pago?",
@@ -683,6 +688,9 @@
   "__WALLET_CARD-REQUEST_DISCLAIMER-PROCESSING MAX: 150": "Solo puedes solicitar un pago a la vez: ya tienes una solicitud pendiente, ésta puede tardar hasta 20 días laborables.",
   "__WALLET_CARD-REQUEST_TITLE MAX: 40": "Gestiona el pago",
   "__WALLET_CARD-YOUR_WALLET_MAX: 15": "Tu monedero",
+  "__WALLET_EXPIRED_TAB": "Ingresos caducados",
+  "__WALLET_EXPIRED_TAB-DESCRIPTION": "Lista de ingresos caducados, para los cuales han pasado más de 12 meses y ya no es posible solicitar el pago",
+  "__WALLET_HISTORY_TAB": "Historial de pagos",
   "__WALLET_HOME-EMPTY_STATE_MAX: 105": "Aún no has solicitado ningun pago. Cuando lo harás, podrás ver tus pagos aquí.",
   "__WALLET_TABLE-HEADER_CTA-ICON-DETAILS MAX:": "Ver detalles",
   "__WALLET_TABLE-HEADER_CTA-ICON-PDF MAX:": "Descargar recibo",
@@ -792,6 +800,7 @@
     "BUGFORM_UPLOAD_PROGRESS": "{{num}} subido",
     "BUGFORM_UPLOAD_PROGRESS_plural": "{{num}} subidos"
   },
+  "Tipo attività": "",
   "Report a Bug": "",
   "Page Preview": "Page Preview",
   "/my-account/": "/perfil/",

src/locales/fr/translation.json

@@ -76,6 +76,7 @@
   "Approved bugs": "Bugs approuvés",
   "Area is a required field.": "Le domaine est un champ obligatoire.",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Indiquez vos coordonnées dans la section Profil : elles sont importantes pour être sélectionné pour des campagnes adaptées et pour demander les paiements.",
+  "Attribution date": "Date d'attribution",
   "Available booty": "Butin disponible",
   "Available tags \n<a> - Link to help article for fiscal type": {
     "@@Description for fiscal type@@": "<a>Cliquez ici</a> pour plus d'infos"
@@ -244,6 +245,8 @@
   "Employment": "Emploi",
   "End Date": "Date de fin",
   "Experience Points": "Points d'expérience",
+  "Expiration date": "",
+  "Expired On": "Expiré le",
   "Extra Award": "Récompense supplémentaire",
   "FAQ": "FAQ",
   "Facebook": "Facebook",
@@ -285,6 +288,7 @@
   },
   "Gross": "Brut",
   "Gross amount": "Montant brut",
+  "Gross total": "Total brut",
   "Have fun!": "N'oubliez pas de vous amuser !",
   "Here is the list of your all devices. Make sure to keep it updated in order to boost your chances to be selected for further projects.": "Voici la liste de tous vos appareils. Assurez-vous de la tenir à jour pour augmenter vos chances d'être sélectionné pour d'autres projets.",
   "Here you can only change the version of your operating system. If you want to add another device click on \"Add device\"": "Ici, vous ne pouvez changer que la version de votre système d'exploitation. Si vous souhaitez ajouter un autre appareil, cliquez sur \"Ajouter un appareil\"",
@@ -673,6 +677,7 @@
   "__RANKING_TITLE_LABEL_POSITION_MAX: 15": "Position",
   "__RANKING_TITLE_WELCOM_MAX: 20": "Classement",
   "__SELECT_DEFAULT_NO_OPTION": "Aucune option",
+  "__WALLET_CARD-EXPIRATION_DISCLAIMER": "Notez bien: chaque butin est valable pendant 12 mois.",
   "__WALLET_CARD-GUIDES_CTA MAX: 20": "Lisez nos guides",
   "__WALLET_CARD-GUIDES_PARAGRAPH MAX: 60": "Découvrez comment nous gérons vos demandes de paiement.",
   "__WALLET_CARD-GUIDES_TITLE MAX: 35": "Des questions sur le processus de paiement ?",
@@ -683,6 +688,9 @@
   "__WALLET_CARD-REQUEST_DISCLAIMER-PROCESSING MAX: 150": "Vous ne pouvez demander qu'un paiement à la fois : vous avez déjà un paiement en cours, cela peut prendre jusqu'à 20 jours ouvrables.",
   "__WALLET_CARD-REQUEST_TITLE MAX: 40": "Gérez votre paiement",
   "__WALLET_CARD-YOUR_WALLET_MAX: 15": "Votre portefeuille",
+  "__WALLET_EXPIRED_TAB": "Butin expiré",
+  "__WALLET_EXPIRED_TAB-DESCRIPTION": "Liste du butin expiré, pour lequel plus de 12 mois se sont écoulés et il n’est plus possible de demander le paiement",
+  "__WALLET_HISTORY_TAB": "Historique des paiements",
   "__WALLET_HOME-EMPTY_STATE_MAX: 105": "Votre historique de paiement est actuellement vide. Lorsque vous commencerez à demander vos paiements, vous les verrez ici.",
   "__WALLET_TABLE-HEADER_CTA-ICON-DETAILS MAX:": "Voir les détails",
   "__WALLET_TABLE-HEADER_CTA-ICON-PDF MAX:": "Télécharger le reçu",
@@ -792,6 +800,7 @@
     "BUGFORM_UPLOAD_PROGRESS": "{{num}} téléchargé",
     "BUGFORM_UPLOAD_PROGRESS_plural": "{{num}} téléchargés"
   },
+  "Tipo attività": "",
   "Report a Bug": "",
   "{{date}} {{at_time}} {{time}}": "",
   "Page Preview": "Page Preview",

src/locales/it/translation.json

@@ -76,6 +76,7 @@
   "Approved bugs": "Bug approvati",
   "Area is a required field.": "L'area è un campo obbligatorio",
   "As first step to be done, complete your profile with authentic and real data. This is the only way to be selected for the Campaigns and get your reward.": "Inserisci tutti i tuoi dati nella sezione Profilo: servirà a noi per selezionarti quando c'è una campagna adatta e a te per richiedere il pagamento.",
+  "Attribution date": "Data di attribuzione",
   "Available booty": "Guadagni disponibili",
   "Available tags \n<a> - Link to help article for fiscal type": {
     "@@Description for fiscal type@@": "<a>Clicca qui</a> per maggiori informazioni"
@@ -244,6 +245,8 @@
   "Employment": "Occupazione",
   "End Date": "Fine",
   "Experience Points": "Punti esperienza",
+  "Expiration date": "",
+  "Expired On": "Scaduto il",
   "Extra Award": "Premio extra",
   "FAQ": "Domande frequenti",
   "Facebook": "Facebook",
@@ -285,6 +288,7 @@
   },
   "Gross": "Lordo",
   "Gross amount": "Lordo",
+  "Gross total": "Tot. Lordo",
   "Have fun!": "Ricordati di divertirti!",
   "Here is the list of your all devices. Make sure to keep it updated in order to boost your chances to be selected for further projects.": "Ecco la lista dei tuoi dispositivi. Assicurati di tenerla sempre aggiornata per aumentare le possibilità di essere selezionat* nei prossimi progetti.",
   "Here you can only change the version of your operating system. If you want to add another device click on \"Add device\"": "Qui puoi solo cambiare la versione del tuo sistema operativo. Se vuoi aggiungere un altro dispositivo clicca su \"Aggiungi dispositivo\"",
@@ -673,6 +677,7 @@
   "__RANKING_TITLE_LABEL_POSITION_MAX: 15": "Posizione",
   "__RANKING_TITLE_WELCOM_MAX: 20": "Classifica",
   "__SELECT_DEFAULT_NO_OPTION": "Nessuna opzione",
+  "__WALLET_CARD-EXPIRATION_DISCLAIMER": "Ricorda: ogni guadagno è valido per 12 mesi.",
   "__WALLET_CARD-GUIDES_CTA MAX: 20": "Le nostre guide",
   "__WALLET_CARD-GUIDES_PARAGRAPH MAX: 60": "Scopri come gestiamo le richieste di pagamenti",
   "__WALLET_CARD-GUIDES_TITLE MAX: 35": "Domande o dubbi sui pagamenti?",
@@ -683,6 +688,9 @@
   "__WALLET_CARD-REQUEST_DISCLAIMER-PROCESSING MAX: 150": "Puoi richiedere solo un pagamento alla volta: hai già una richiesta in lavorazione, la procedura può durare fino a 20 giorni lavorativi.",
   "__WALLET_CARD-REQUEST_TITLE MAX: 40": "Gestisci il pagamento",
   "__WALLET_CARD-YOUR_WALLET_MAX: 15": "Il tuo portafoglio",
+  "__WALLET_EXPIRED_TAB": "Guadagni scaduti",
+  "__WALLET_EXPIRED_TAB-DESCRIPTION": "Elenco dei guadagni scaduti, per i quali sono trascorsi più di 12 mesi e non è più possibile richiedere il pagamento",
+  "__WALLET_HISTORY_TAB": "Cronologia pagamenti",
   "__WALLET_HOME-EMPTY_STATE_MAX: 105": "Per ora non hai ancora richiesto un pagamento. Quando inizierai a richiederne, compariranno qui.",
   "__WALLET_TABLE-HEADER_CTA-ICON-DETAILS MAX:": "Vedi dettagli",
   "__WALLET_TABLE-HEADER_CTA-ICON-PDF MAX:": "Scarica ricevuta",
@@ -792,6 +800,7 @@
     "BUGFORM_UPLOAD_PROGRESS": "{{num}} caricato",
     "BUGFORM_UPLOAD_PROGRESS_plural": "{{num}} caricati"
   },
+  "Tipo attività": "",
   "Report a Bug": "Carica un Bug",
   "Page Preview": "Pagina di preview",
   "/my-account/": "/it/il-mio-account/",

src/pages/Wallet/BootyDetailsModal/BootyDetailsModal.tsx

@@ -40,6 +40,9 @@ export const BootyDetailsModal = () => {
     start,
     order,
     orderBy,
+    filterBy: {
+      isExpired: 0,
+    },
   });
 
   const { results, total } = data || {};
@@ -53,6 +56,9 @@ export const BootyDetailsModal = () => {
     if (typeof results !== "undefined") {
       setRows(
         results?.map((r) => {
+          const attributionDate = new Date(r.attributionDate);
+          const expiredDate = new Date(attributionDate);
+          expiredDate.setMonth(expiredDate.getMonth() + 12);
           const formattedAmount = `${
             r.amount.net?.currency && r.amount.net?.currency in currencyTable
               ? currencyTable[r.amount.net?.currency]
@@ -101,6 +107,10 @@ export const BootyDetailsModal = () => {
                 </Text>
               ),
             },
+            expirationDate: {
+              title: expiredDate.toISOString().split("T")[0],
+              content: <span>{expiredDate.toLocaleDateString()}</span>,
+            },
           };
         })
       );

src/pages/Wallet/BootyDetailsModal/columns.ts

@@ -50,5 +50,11 @@ export const bootyDetailsColumns = (
         dispatch(updateBootyDetailsSortingOptions(newOrder, "gross"));
       },
     },
+    {
+      title: t("Expiration date"),
+      dataIndex: "expirationDate",
+      key: "expirationDate",
+      hideIndex: true,
+    },
   ];
 };

src/pages/Wallet/ExpiredAttributionTable.tsx

@@ -0,0 +1,118 @@
+import { Pagination, Table } from "@appquality/appquality-design-system";
+import { useTranslation } from "react-i18next";
+import { currencyTable } from "src/redux/wallet/utils";
+import { useGetUsersMePendingBootyQuery } from "src/services/tryberApi";
+import { useExpiredTabColumns } from "./useExpiredTabColumns";
+
+const useExpiredRows = ({ start, limit }: { start: number; limit: number }) => {
+  const { data: expiredBootyData, isLoading: isExpiredBootyLoading } =
+    useGetUsersMePendingBootyQuery({
+      filterBy: { isExpired: 1 },
+      start,
+      limit,
+    });
+  return {
+    expiredBootyData: (expiredBootyData?.results || []).map((req) => {
+      const attributionDate = new Date(req.attributionDate);
+      const expiredDate = new Date(attributionDate);
+      expiredDate.setMonth(expiredDate.getMonth() + 12);
+      return {
+        key: req.id,
+        activityName: {
+          title: req.name,
+          content: <span>{req.name}</span>,
+        },
+        activityType: {
+          title: req.activity,
+          content: <span>{req.activity}</span>,
+        },
+        attributionDate: {
+          title: req.attributionDate,
+          content: <span>{req.attributionDate}</span>,
+        },
+        gross: {
+          title: "€ " + req.amount?.gross?.value,
+          content: (
+            <span>
+              {req.amount?.gross?.currency &&
+              req.amount?.gross?.currency in currencyTable
+                ? currencyTable[req.amount?.gross?.currency]
+                : req.amount?.gross?.currency}{" "}
+              {req.amount?.gross?.value?.toFixed(2)}
+            </span>
+          ),
+        },
+        expiredDate: {
+          title: expiredDate.toISOString().split("T")[0],
+          content: <span>{expiredDate.toLocaleDateString()}</span>,
+        },
+      };
+    }),
+    isExpiredBootyLoading,
+  };
+};
+
+const ExpiredAttributionTable = ({
+  className,
+  start,
+  limit,
+}: {
+  className?: string;
+  start: number;
+  limit: number;
+}) => {
+  const { t } = useTranslation();
+
+  const expiredColumns = useExpiredTabColumns();
+
+  const { expiredBootyData: expiredRows, isExpiredBootyLoading } =
+    useExpiredRows({
+      start,
+      limit,
+    });
+  return (
+    <Table
+      className={`${className || ""} wallet-table`}
+      dataSource={expiredRows}
+      columns={expiredColumns}
+      isLoading={isExpiredBootyLoading}
+      isStriped
+      i18n={{
+        loading: t("...wait"),
+        empty: t("__WALLET_HOME-EMPTY_STATE_MAX: 105"),
+      }}
+    />
+  );
+};
+
+const ExpiredAttributionTablePagination = ({
+  className,
+  start,
+  limit,
+  maxPages,
+  changePagination,
+}: {
+  className?: string;
+  start: number;
+  limit: number;
+  maxPages: number;
+  changePagination: (newPage: number) => void;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Pagination
+      className={className}
+      onPageChange={changePagination}
+      current={start / limit + 1}
+      maxPages={maxPages}
+      mobileText={(current, total) =>
+        t(`Page %current% / %total%`)
+          .replace("%current%", current.toString())
+          .replace("%total%", total ? total.toString() : "0")
+      }
+    />
+  );
+};
+export { ExpiredAttributionTablePagination };
+export default ExpiredAttributionTable;

src/pages/Wallet/WalletManagment.tsx

@@ -183,6 +183,10 @@ export const WalletManagment = () => {
       <Text className="aq-mt-2" small>
         {getInfoText()}
       </Text>
+
+      <Text className="aq-mt-2" small>
+        <Trans i18nKey={"__WALLET_CARD-EXPIRATION_DISCLAIMER"} />
+      </Text>
     </Card>
   );
 };