fix(app subscription): allow empty url in register url overlay (#842)

#793

CHANGELOG.md

@@ -8,6 +8,8 @@
   - Fix consistency issue in overlays where form input is used
 - Company Wallet
   - Use appropriate path to display logo on cards
+- App Subscription
+  - Register URL changes for Autosetup
 - Refactor
   - Remove unnecessary import of Typography, Dialog and Circular Progress from mui and use those from shared-components
 - Connector Management

src/assets/locales/de/main.json

@@ -1457,12 +1457,13 @@
         "message": "The terms of use, as well as the data models and further information can be viewed by clicking on the documents shared below."
       },
       "register": {
-        "heading": "Autosetup URL",
-        "message": "This is some text for the dialog component. Lorem ispum dolores mia dela culpa dela rey.",
-        "endpointConfigured": "Endpoint Configured",
-        "autosetupURL": "AutoSetup URL",
+        "heading": "Configuration Autosetup URL",
+        "message": "The company autosetup URL configuration feature allows operators to set up a custom URL that will be used to automatically submit subscription requests to the service provider when app subscriptions are triggered on the marketplace. This feature also enables operators to retrieve technical configuration elements and activate the subscription.",
+        "endpointConfigured": "Configured Provider Endpoint",
+        "autosetupURL": "Set a new endpoint URL",
+        "inputPlaceholder": "...enter your setup url",
         "providerErrorMessage": "Something went wrong!",
-        "providerSuccessMessage": "Service Provider Details added successfully."
+        "providerSuccessMessage": "Details updated successfully."
       },
       "activation": {
         "heading": "Activate App Subscription",

src/assets/locales/en/main.json

@@ -1424,12 +1424,13 @@
         "message": "The terms of use, as well as the data models and further information can be viewed by clicking on the documents shared below."
       },
       "register": {
-        "heading": "Autosetup URL",
-        "message": "Enter your autosetup url in the input field below to store the autosetup endpoint. The endpoint will get triggered by CX as soon as a interested company is hitting the 'Subscribe' button in the marketplace.",
-        "endpointConfigured": "Current Endpoint",
-        "autosetupURL": "AutoSetup URL",
+        "heading": "Configuration Autosetup URL",
+        "message": "The company autosetup URL configuration feature allows operators to set up a custom URL that will be used to automatically submit subscription requests to the service provider when app subscriptions are triggered on the marketplace. This feature also enables operators to retrieve technical configuration elements and activate the subscription.",
+        "endpointConfigured": "Configured Provider Endpoint",
+        "autosetupURL": "Set a new endpoint URL",
+        "inputPlaceholder": "...enter your setup url",
         "providerErrorMessage": "Something went wrong! Please try it later again.",
-        "providerSuccessMessage": "Service Provider Details added successfully."
+        "providerSuccessMessage": "Details updated successfully."
       },
       "activation": {
         "heading": "Activate App Subscription",
@@ -1940,7 +1941,7 @@
       },
       "approvedMessage": "Credential Request Accepted successfully.",
       "declinedMessage": "Credential Request Declined successfully.",
-      "errorMessage": "Something went wrong!",
+      "errorMessage": "Something went wrong. Please contact your administrator.",
       "revokeOverlay": {
         "title": "Revoke Credential",
         "description": "Revoking a credential cannot be undone.",

src/components/overlays/AddServiceProvider/index.tsx

@@ -20,6 +20,7 @@
 
 import {
   Button,
+  CircleProgress,
   DialogActions,
   DialogContent,
   DialogHeader,
@@ -33,19 +34,20 @@ import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import './style.scss'
-import type { store } from 'features/store'
 import {
   useAddServiceProviderMutation,
   useFetchServiceProviderQuery,
 } from 'features/serviceProvider/serviceProviderApiSlice'
 import Patterns from 'types/Patterns'
 import { setSuccessType } from 'features/serviceProvider/slice'
+import DeleteIcon from '@mui/icons-material/DeleteOutlineOutlined'
 
 export default function AddServiceProvider() {
   const { t } = useTranslation()
-  const dispatch = useDispatch<typeof store.dispatch>()
-  const [inputURL, setInputURL] = useState('')
+  const dispatch = useDispatch()
+  const [inputURL, setInputURL] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
+  const [deleteLoading, setDeleteLoading] = useState(false)
   const [UrlErrorMsg, setUrlErrorMessage] = useState('')
   const [saveErrorMsg, setSaveErrorMessage] = useState(false)
 
@@ -57,7 +59,8 @@ export default function AddServiceProvider() {
   }, [refetch, dispatch])
 
   const addInputURL = (value: string) => {
-    setInputURL(value)
+    setInputURL(value ?? null)
+    if (!value) return
     if (!Patterns.URL.test(value.trim())) {
       setUrlErrorMessage(t('content.appSubscription.pleaseEnterValidURL'))
     } else {
@@ -66,7 +69,8 @@ export default function AddServiceProvider() {
   }
 
   const addURL = async () => {
-    setLoading(true)
+    if (inputURL) setLoading(true)
+    else setDeleteLoading(true)
     try {
       await addServiceProvider({ url: inputURL }).unwrap()
       dispatch(setSuccessType(true))
@@ -78,7 +82,7 @@ export default function AddServiceProvider() {
   }
 
   return (
-    <>
+    <div className="registerUrlMain">
       <DialogHeader
         {...{
           title: t('content.appSubscription.register.heading'),
@@ -90,29 +94,71 @@ export default function AddServiceProvider() {
 
       <DialogContent>
         <div className="manageInputURL">
-          <Input
-            label={
-              <Typography variant="body2">
-                {t('content.appSubscription.register.endpointConfigured')}
-              </Typography>
-            }
-            value={data ? data.url : ''}
-            disabled={true}
-            sx={{ marginBottom: '20px' }}
-          />
-          <Input
-            label={
-              <Typography variant="body2">
-                {t('content.appSubscription.register.autosetupURL')}
-              </Typography>
-            }
-            placeholder="URL of the customer tentant"
-            onChange={(e) => {
-              addInputURL(e.target.value)
-            }}
-            value={inputURL}
-          />
-          <p className="error">{UrlErrorMsg}</p>
+          {data ? (
+            <>
+              <div className="urlListMain">
+                <Typography variant="body2">
+                  {t('content.appSubscription.register.endpointConfigured')}
+                </Typography>
+                <div className="urlList">
+                  {data?.url ? (
+                    <>
+                      {deleteLoading ? (
+                        <CircleProgress
+                          colorVariant="primary"
+                          interval={800}
+                          iteration
+                          size={20}
+                          step={100}
+                          thickness={1}
+                          variant="indeterminate"
+                        />
+                      ) : (
+                        <DeleteIcon
+                          onClick={() => {
+                            addURL()
+                          }}
+                          className="deleteIcon"
+                        />
+                      )}
+                      <Typography variant="label2" className="urlDetail">
+                        {data.url}
+                      </Typography>
+                    </>
+                  ) : (
+                    '-'
+                  )}
+                </div>
+              </div>
+              <Input
+                label={
+                  <Typography variant="body2">
+                    {t('content.appSubscription.register.autosetupURL')}
+                  </Typography>
+                }
+                placeholder={t(
+                  'content.appSubscription.register.inputPlaceholder'
+                )}
+                onChange={(e) => {
+                  addInputURL(e.target.value)
+                }}
+                value={inputURL}
+              />
+              <p className="error">{UrlErrorMsg}</p>
+            </>
+          ) : (
+            <div className="progress">
+              <CircleProgress
+                colorVariant="primary"
+                interval={800}
+                iteration
+                size={50}
+                step={100}
+                thickness={5}
+                variant="indeterminate"
+              />
+            </div>
+          )}
         </div>
       </DialogContent>
 
@@ -155,6 +201,6 @@ export default function AddServiceProvider() {
         description={t('content.appSubscription.register.providerErrorMessage')}
         showIcon={true}
       />
-    </>
+    </div>
   )
 }

src/components/overlays/AddServiceProvider/style.scss

@@ -17,10 +17,39 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
-
-.manageInputURL {
-  padding: 0 80px;
-  .error {
-    color: #e93333;
+.registerUrlMain {
+  .dialog-header-main {
+    h4 {
+      width: 75%;
+      margin: 40px auto 0;
+    }
+  }
+  .urlListMain {
+    background-color: #dedede;
+    padding: 20px;
+    .urlList {
+      display: flex;
+      margin-top: 10px;
+      .deleteIcon {
+        cursor: pointer;
+      }
+      .deleteIcon:hover {
+        color: #0f71cb;
+      }
+      .urlDetail {
+        margin-left: 10px;
+      }
+    }
+  }
+  .progress {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .manageInputURL {
+    padding: 0 80px;
+    .error {
+      color: #e93333;
+    }
   }
 }

src/components/pages/AdminCredential/AdminCredentialElements.tsx

@@ -128,8 +128,8 @@ export default function AdminCredentialElements() {
       const fileType = response.headers.get('content-type')
       const file = response.data
       download(file, fileType, documentName)
-    } catch (error) {
-      console.error(error, 'ERROR WHILE FETCHING DOCUMENT')
+    } catch (err) {
+      error(t('content.adminCertificate.errorMessage'))
     }
   }
 
@@ -252,7 +252,7 @@ export default function AdminCredentialElements() {
     {
       field: 'document',
       headerName: t('content.adminCertificate.table.document'),
-      flex: 1.5,
+      flex: 2,
       renderCell: ({ row }: { row: CredentialData }) =>
         row.documents?.map((document) => {
           return (
@@ -293,7 +293,7 @@ export default function AdminCredentialElements() {
     {
       field: 'approveDecline',
       headerName: '',
-      flex: 2.5,
+      flex: 2,
       renderCell: ({ row }: { row: CredentialData }) =>
         renderApproveDeclineBtn(row),
     },

src/features/serviceProvider/serviceProviderApiSlice.ts

@@ -49,7 +49,7 @@ export type SubscriptionServiceRequest = {
 }
 
 export type ServiceRequest = {
-  url: string
+  url: string | null
 }
 
 export const apiSlice = createApi({

src/types/Config.tsx

@@ -592,7 +592,7 @@ export const ALL_PAGES: IPage[] = [
   },
   {
     name: PAGES.COMPANY_DATA,
-    role: ROLES.COMPANY_DATA,
+    role: ROLES.MY_ORGANIZATION_VIEW,
     element: <CompanyData />,
   },
 ]

src/types/Constants.ts

@@ -229,7 +229,6 @@ export enum ROLES {
   VIEW_SUBSCRIPTION = 'view_subscription',
   DELETE_CERTIFICATES = 'delete_certificates',
   MY_ACCOUNT = 'view_own_user_account',
-  COMPANY_DATA = 'view_company_data',
   CREDENTIAL_REQUESTS = 'view_credential_requests',
   REVOKE_CREDENTIALS_ISSUER = 'revoke_credentials_issuer',
 }