Feat/service provider role (#1422)

alexanmtz · web-flow · commit 9dc5f72f41e1 · 2026-03-05T22:50:23.000+01:00
* service provider type defined

* a full flow with provider role

* lint and format fixes

* adding seed to heroku postbuild
diff --git a/frontend/src/components/areas/private/features/roles/user-roles.tsx b/frontend/src/components/areas/private/features/roles/user-roles.tsx
@@ -2,9 +2,10 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
 import { Box, Button } from '@mui/material'
-import funder from 'images/bounty.png'
-import contributor from 'images/sharing.png'
-import maintainer from 'images/notifications.png'
+import funder from 'images/roles/bounty.png'
+import contributor from 'images/roles/sharing.png'
+import maintainer from 'images/roles/notifications.png'
+import serviceProvider from 'images/roles/payment-cycle.png'
 
 import SelectChoices from 'design-library/molecules/select-choices/select-choices'
 import MainTitle from 'design-library/atoms/typography/main-title/main-title'
@@ -23,7 +24,8 @@ const messages = defineMessages({
 const imageMap = {
   funding: funder,
   contributor: contributor,
-  maintainer: maintainer
+  maintainer: maintainer,
+  provider: serviceProvider
 }
 
 const Roles = ({ roles, user, fetchRoles, updateUser, onClose, addNotification }) => {
diff --git a/frontend/src/components/design-library/molecules/cards/dashboard-cards/dashboard-card-list/dashboard-card-list.tsx b/frontend/src/components/design-library/molecules/cards/dashboard-cards/dashboard-card-list/dashboard-card-list.tsx
@@ -11,7 +11,7 @@ import { CardList, ContentWrapper } from './dashboard-card-list.styles'
 
 const DashboardCardList = ({ user, dashboard }) => {
   const { completed } = user || {}
-  const { isMaintainer, isFunding, isContributor } = useUserTypes({ user })
+  const { isMaintainer, isFunding, isContributor, isProvider } = useUserTypes({ user })
   const { completed: dashboardCompleted, data: dashboardData } = dashboard || {}
 
   return completed && dashboardCompleted ? (
@@ -24,7 +24,7 @@ const DashboardCardList = ({ user, dashboard }) => {
             <WalletsDashboardCard wallets={dashboardData.wallets} />
           </>
         )}
-        {isContributor && (
+        {(isContributor || isProvider) && (
           <>
             <PaymentRequestsDashboardCard paymentRequests={dashboardData.paymentRequests} />
             <ClaimsDashboardCard claims={dashboardData.claims} />
diff --git a/frontend/src/components/design-library/molecules/select-choices/select-choices.styles.ts b/frontend/src/components/design-library/molecules/select-choices/select-choices.styles.ts
@@ -38,7 +38,7 @@ export const SelectChoicesCard = styled(Card)(() => ({
 export const SelectChoicesMedia = styled('div')(({ theme }) => ({
   height: 96,
   width: '100%',
-  backgroundColor: theme.palette.action.hover,
+  backgroundColor: '#090607',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
diff --git a/frontend/src/components/design-library/molecules/select-choices/select-choices.tsx b/frontend/src/components/design-library/molecules/select-choices/select-choices.tsx
@@ -48,7 +48,7 @@ const SelectChoices = <TItem,>({
   getDescription,
   isSelected,
   onToggle,
-  itemSize = { xs: 12, sm: 6, md: 4 }
+  itemSize = { xs: 12, sm: 6, md: 3 }
 }: SelectChoicesProps<TItem>) => {
   const placeholders = Array(placeholderCount).fill(null)
 
@@ -73,7 +73,7 @@ const SelectChoices = <TItem,>({
         </SelectChoicesHeader>
       ) : null}
 
-      <SelectChoicesGrid container spacing={2} alignItems="stretch">
+      <SelectChoicesGrid container spacing={2} alignItems="stretch" justifyContent="space-around">
         {loading ? (
           <>
             {placeholders.map((_, index) => (
diff --git a/frontend/src/hooks/use-profile-sidebar-menu.tsx b/frontend/src/hooks/use-profile-sidebar-menu.tsx
@@ -16,7 +16,7 @@ import useUserTypes from './use-user-types'
 const useProfileSidebarMenu = ({ user }) => {
   const [selected, setSelected] = useState(0)
   const history = useHistory()
-  const { isContributor, isMaintainer, isFunding, completed } = useUserTypes({ user })
+  const { isContributor, isMaintainer, isFunding, isProvider, completed } = useUserTypes({ user })
 
   useEffect(() => {
     const path = history.location.pathname
@@ -63,7 +63,9 @@ const useProfileSidebarMenu = ({ user }) => {
       ]
     },
     {
-      category: <FormattedMessage id="account.profile.sidemenu.issues" defaultMessage="Issues" />,
+      category: (isFunding || isMaintainer || isContributor) && (
+        <FormattedMessage id="account.profile.sidemenu.issues" defaultMessage="Issues" />
+      ),
       items: [
         {
           include: isContributor || isMaintainer || isFunding,
@@ -116,15 +118,15 @@ const useProfileSidebarMenu = ({ user }) => {
       ]
     },
     {
-      category: isContributor && (
+      category: (isContributor || isProvider) && (
         <FormattedMessage
           id="account.profile.sidemenu.section.paymentrequests"
           defaultMessage="Payment Requests"
         />
       ),
       items: [
         {
-          include: isContributor,
+          include: isContributor || isProvider,
           onClick: () => history.push('/profile/payment-requests'),
           icon: <PaymentRequestsIcon />,
           label: (
@@ -138,15 +140,15 @@ const useProfileSidebarMenu = ({ user }) => {
       ]
     },
     {
-      category: isContributor && (
+      category: (isContributor || isProvider) && (
         <FormattedMessage
           id="account.profile.sidemenu.section.receivepayments"
           defaultMessage="Receive Payments"
         />
       ),
       items: [
         {
-          include: isContributor,
+          include: isContributor || isProvider,
           onClick: () => history.push('/profile/claims'),
           icon: <ClaimIcon />,
           label: (
@@ -158,7 +160,7 @@ const useProfileSidebarMenu = ({ user }) => {
           selected: selected === 6
         },
         {
-          include: isContributor,
+          include: isContributor || isProvider,
           onClick: () => history.push('/profile/payouts'),
           icon: <PayoutIcon />,
           label: (
diff --git a/frontend/src/hooks/use-user-types.ts b/frontend/src/hooks/use-user-types.ts
@@ -5,15 +5,17 @@ const useUserTypes = ({ user }) => {
   const [isContributor, setIsContributor] = useState(false)
   const [isMaintainer, setIsMaintainer] = useState(false)
   const [isFunding, setIsFunding] = useState(false)
+  const [isProvider, setIsProvider] = useState(false)
 
   useEffect(() => {
     const types = data?.Types ?? []
     setIsContributor(types.some((type) => type?.name === 'contributor'))
     setIsMaintainer(types.some((type) => type?.name === 'maintainer'))
     setIsFunding(types.some((type) => type?.name === 'funding'))
+    setIsProvider(types.some((type) => type?.name === 'provider'))
   }, [data])
 
-  return { isContributor, isMaintainer, isFunding, completed }
+  return { isContributor, isMaintainer, isFunding, isProvider, completed }
 }
 
 export default useUserTypes
diff --git a/frontend/src/images/roles/bounty.png b/frontend/src/images/roles/bounty.png
diff --git a/frontend/src/images/roles/notifications.png b/frontend/src/images/roles/notifications.png
diff --git a/frontend/src/images/roles/payment-cycle.png b/frontend/src/images/roles/payment-cycle.png
diff --git a/frontend/src/images/roles/sharing.png b/frontend/src/images/roles/sharing.png
diff --git a/package.json b/package.json
@@ -19,6 +19,14 @@
     "seed:dev": "cross-env TYPE=seed tsx src/migrate.ts up",
     "seed:test": "cross-env TYPE=seed NODE_ENV=test node dist/migrate.js up",
     "seed:test:dev": "cross-env TYPE=seed NODE_ENV=test tsx src/migrate.ts up",
+    "seed:rollback": "cross-env TYPE=seed node dist/migrate.js revert",
+    "seed:rollback:dev": "cross-env TYPE=seed tsx src/migrate.ts revert",
+    "seed:rollback:test": "cross-env TYPE=seed NODE_ENV=test node dist/migrate.js revert",
+    "seed:rollback:test:dev": "cross-env TYPE=seed NODE_ENV=test tsx src/migrate.ts revert",
+    "seed:rollback:last": "cross-env TYPE=seed node dist/migrate.js prev",
+    "seed:rollback:last:dev": "cross-env TYPE=seed tsx src/migrate.ts prev",
+    "seed:rollback:last:test": "cross-env TYPE=seed NODE_ENV=test node dist/migrate.js prev",
+    "seed:rollback:last:test:dev": "cross-env TYPE=seed NODE_ENV=test tsx src/migrate.ts prev",
     "seed:windows:dev": "cross-env TYPE=seed tsx src/migrate.ts up",
     "seed:test:windows:dev": "cross-env TYPE=seed NODE_ENV=test tsx src/migrate.ts up",
     "migrate:test:rollback": "cross-env NODE_ENV=test node migrate.js prev",
@@ -42,7 +50,7 @@
     "lint-fix": "eslint . --fix --cache --cache-location .cache/eslint/",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "prepush": "npm run lint-fix",
-    "heroku-postbuild": "cd frontend && npm install && npm run production && npm run sitemap && cd .. && npm run build && npm run migrate",
+    "heroku-postbuild": "cd frontend && npm install && npm run production && npm run sitemap && cd .. && npm run build && npm run migrate && npm run seed",
     "stripe:webhook": "stripe listen --forward-to localhost:3000/webhooks/stripe-platform --forward-connect-to localhost:3000/webhooks/stripe-connect",
     "simulate:webhook": "NODE_ENV=test node ./scripts/webhook_script.js",
     "typecheck": "tsc --noEmit",
diff --git a/src/db/seeders/20260226141808-create-service-provider-type.js b/src/db/seeders/20260226141808-create-service-provider-type.js
@@ -0,0 +1,37 @@
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    /**
+     * Add seed commands here.
+     *
+     * Example:
+     * await queryInterface.bulkInsert('People', [{
+     *   name: 'John Doe',
+     *   isBetaMember: false
+     * }], {});
+     */
+    await queryInterface.bulkInsert(
+      'Types',
+      [
+        {
+          name: 'provider',
+          label: 'Provider',
+          description: 'You provide a service and need to request payments',
+          createdAt: new Date(),
+          updatedAt: new Date()
+        }
+      ],
+      {}
+    )
+  },
+
+  async down(queryInterface, Sequelize) {
+    /**
+     * Add commands to revert seed here.
+     *
+     * Example:
+     * await queryInterface.bulkDelete('People', null, {});
+     */
+    await queryInterface.bulkDelete('Types', { name: 'provider' }, {})
+  }
+}
diff --git a/src/migrate.ts b/src/migrate.ts
@@ -129,7 +129,7 @@ async function cmdStatus() {
     }))
 
   const status = {
-    current: executed.length > 0 ? executed[0].name : '<NO_MIGRATIONS>',
+    current: executed.length > 0 ? executed[executed.length - 1].name : '<NO_MIGRATIONS>',
     executed: executed.map((m) => m.name),
     pending: pending.map((m) => m.name)
   }
@@ -172,6 +172,16 @@ async function cmdResetPrev() {
   return umzug.down({ to: prev })
 }
 
+async function cmdRevertSelected(names: string[]) {
+  const cleanNames = names.map((n) => n.trim()).filter(Boolean)
+  if (cleanNames.length === 0) {
+    throw new Error('Missing migration/seeder name(s). Usage: revert <name1> [name2 ...]')
+  }
+
+  // Revert only the specified migrations/seeders (does not cascade to earlier ones).
+  return umzug.down({ migrations: cleanNames })
+}
+
 function cmdHardReset() {
   return new Promise<void>((resolve, reject) => {
     setImmediate(() => {
@@ -202,6 +212,8 @@ async function run() {
       await cmdReset()
     } else if (cmd === 'prev' || cmd === 'reset-prev') {
       await cmdResetPrev()
+    } else if (cmd === 'revert') {
+      await cmdRevertSelected(process.argv.slice(3))
     } else if (cmd === 'reset-hard') {
       await cmdHardReset()
     } else if (cmd === 'update') {
