Skip to content

Commit

Permalink
feat(organization): unsubscribe app (#263)
Browse files Browse the repository at this point in the history
  • Loading branch information
manojava-gk authored Sep 18, 2023
1 parent cbd8552 commit 2e8f53f
Show file tree
Hide file tree
Showing 9 changed files with 373 additions and 47 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@
- App Overview
- Enhance Sub Menu by adding 'Change Documents' for active apps
- Add roles for active apps
- My Organization
- Unsubscribe subscription flow
- Service Subscription
- UI Changes
- Add filters
Expand Down
16 changes: 15 additions & 1 deletion src/assets/locales/de/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,19 @@
"subscriptions": {
"title": "App-Abonnements",
"error": "Fehler - keine Daten gefunden"
},
"unsubscribe": {
"title": "Geschäftsanwendung Deaktivieren",
"description": "Möchten Sie sich die Geschäftsanwendung wirklich deaktivieren?",
"note": "Bitte beachten Sie: Alle möglicherweise verbundenen Objekte (siehe Details oben) werden ebenfalls deaktiviert. Die Abmeldung ist nicht rückgängig zu machen.",
"table": {
"app": "App",
"status": "Status",
"connector": "Connector",
"techUser": "Technischer User"
},
"checkBoxLabel": "Ja, ich stimme zu, dass ich die Auswirkungen der Abmeldung verstanden habe und mit dem Vorgang fortfahren möchte.",
"buttonText": "Abbestellen"
}
},
"datamanagement": {
Expand Down Expand Up @@ -1739,7 +1752,8 @@
"error": "Error",
"retry": "Retry",
"exit": "exit",
"loading": "Loading..."
"loading": "Loading...",
"unsubscribe": "Unsubscribe"
},
"state": {
"enabled": "aktiv",
Expand Down
18 changes: 17 additions & 1 deletion src/assets/locales/en/main.json
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,21 @@
"subscriptions": {
"title": "App Subscriptions",
"error": "error - no data found"
},
"unsubscribe": {
"title": "Unsubscribe Business Application",
"description": "Are you sure to unsubscribe from the business application?",
"note": "Please Note: all possibly connected objects (see details above) will get deactivated as well.The unsubscription is not revertible.",
"table": {
"app": "App",
"status": "Status",
"connector": "Connector",
"techUser": "Technical User"
},
"checkBoxLabel": "Yes I agree that I understood the unsubscribe impact and want to proceed with the process.",
"buttonText": "Unsubscribe",
"unsubscribeSuccess": "Unsubscribe subscription is successful",
"unsubscribeError": "Something went wrong. Try again after sometime or contact administrator"
}
},
"datamanagement": {
Expand Down Expand Up @@ -1702,7 +1717,8 @@
"error": "Error",
"retry": "Retry",
"exit": "exit",
"loading": "Loading..."
"loading": "Loading...",
"unsubscribe": "Unsubscribe"
},
"state": {
"enabled": "enabled",
Expand Down
57 changes: 36 additions & 21 deletions src/components/pages/Organization/AppSubscriptions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,27 @@
********************************************************************************/

import { SubscriptionStatus, ImageType } from 'features/apps/apiSlice'
import { Image, LogoGrayData } from '@catena-x/portal-shared-components'
import { Button, Image, LogoGrayData } from '@catena-x/portal-shared-components'
import { fetchImageWithToken } from 'services/ImageService'
import './Organization.scss'
import { useTranslation } from 'react-i18next'

export default function AppSubscriptions({
name,
provider,
status,
image,
onButtonClick = () => {},
onUnsubscribe = () => {},
}: {
name: string
provider: string
status: SubscriptionStatus | undefined
image: ImageType | undefined
onButtonClick?: React.MouseEventHandler
onUnsubscribe?: React.MouseEventHandler
}) {
const { t } = useTranslation()
const colorCode = [
{ name: SubscriptionStatus.PENDING, code: ' #969696' },
{ name: SubscriptionStatus.INACTIVE, code: 'red' },
Expand All @@ -47,27 +52,37 @@ export default function AppSubscriptions({

return (
<div className="organization-subscriptions" onClick={onButtonClick}>
<Image
src={image?.src || LogoGrayData}
style={{
objectFit: 'cover',
width: 30,
height: 30,
borderRadius: '50%',
marginRight: '5px',
}}
loader={fetchImageWithToken}
/>
<div className="iconNameContainer">
<Image
src={image?.src || LogoGrayData}
style={{
objectFit: 'cover',
width: 30,
height: 30,
borderRadius: '50%',
marginRight: '5px',
}}
loader={fetchImageWithToken}
/>

<span>
{name} - by {provider} -
</span>
{status ? (
<span style={{ color: colorCode }}>
{' '}
{'\u00a0' + capitalizeFirstLetter(status.toLocaleLowerCase())}
</span>
) : null}
<div className="name">
{name} - by {provider} -
{status ? (
<span style={{ color: colorCode }}>
{' '}
{'\u00a0' + capitalizeFirstLetter(status.toLocaleLowerCase())}
</span>
) : null}
</div>
</div>

<Button
variant="outlined"
className="unsubButton"
onClick={onUnsubscribe}
>
{t('global.actions.unsubscribe')}
</Button>
</div>
)
}
48 changes: 48 additions & 0 deletions src/components/pages/Organization/Organization.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,57 @@
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
border-bottom: 1px solid rgb(220, 220, 220);
}
.organization-error {
padding: 10px;
}
}
.iconNameContainer {
display: flex;
}
.title {
font-size: 16px !important;
font-weight: 700 !important;
background-color: rgb(237, 240, 244) !important;
padding: 15px !important;
margin-bottom: 20px !important;
font-family: inherit !important;
}

.unsubButton {
height: 40px;
border-color: #fb6540 !important;
background-color: #fb6540 !important;
color: #ffffff !important;
text-transform: lowercase !important;
}
}

@media (max-width: 480px) {
.name {
max-width: 130px;
}
.unsubButton {
width: auto;
height: 30px;
font-size: 8px !important;
margin-left: 10px !important;
}
}

.noteBox {
margin: 0px 50px;
border: 1px solid #e3e3e3;
background: #e3e3e3;
}

.noteText {
padding: 20px;
}

.detailsTable {
margin: 50px 50px;
}
146 changes: 146 additions & 0 deletions src/components/pages/Organization/UnSubscribeOverlay.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
/********************************************************************************
* Copyright (c) 2021, 2023 BMW Group AG
* Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Apache License, Version 2.0 which is available at
* https://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, 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.
*
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/

import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
Dialog,
DialogContent,
Button,
DialogActions,
DialogHeader,
Typography,
Checkbox,
StaticTable,
LoadingButton,
} from '@catena-x/portal-shared-components'
import Box from '@mui/material/Box'
import { useFetchSubscriptionAppQuery } from 'features/apps/apiSlice'
import './Organization.scss'

interface UnSubscribeOverlayProps {
openDialog?: boolean
handleOverlayClose: React.MouseEventHandler
handleConfirmClick: React.MouseEventHandler
loading?: boolean
subscriptionId: string
appId: string
}

const UnSubscribeOverlay = ({
openDialog = false,
handleOverlayClose,
handleConfirmClick,
loading,
subscriptionId,
appId,
}: UnSubscribeOverlayProps) => {
const { t } = useTranslation()
const { data } = useFetchSubscriptionAppQuery({ appId, subscriptionId })
const [checkBoxSelected, setCheckBoxSelected] = useState<boolean>(false)
return (
<div>
<Dialog
open={openDialog}
sx={{
'.MuiDialog-paper': {
maxWidth: '45%',
},
}}
>
<DialogHeader title={t('content.organization.unsubscribe.title')} />
<DialogContent
sx={{
textAlign: 'center',
marginBottom: '25px',
paddingTop: '0px',
}}
>
{t('content.organization.unsubscribe.description')}

<Box className="noteBox">
<Typography className="noteText" variant="body2">
{t('content.organization.unsubscribe.note')}
</Typography>
</Box>
<Box className="detailsTable">
<StaticTable
data={{
head: [
t('content.organization.unsubscribe.table.app'),
t('content.organization.unsubscribe.table.status'),
t('content.organization.unsubscribe.table.connector'),
t('content.organization.unsubscribe.table.techUser'),
],
body: [
[data?.name || ''],
[data?.offerSubscriptionStatus || ''],
[data?.technicalUserData[0]?.name || ''],
[data?.connectorData[0]?.name || ''],
],
}}
horizontal={true}
/>
</Box>
<Box
sx={{
marginTop: '50px',
}}
>
<Checkbox
label={t('content.organization.unsubscribe.checkBoxLabel')}
checked={checkBoxSelected}
onClick={() => setCheckBoxSelected(!checkBoxSelected)}
/>
</Box>
</DialogContent>
<DialogActions>
<Button variant="outlined" onClick={(e) => handleOverlayClose(e)}>
{t('global.actions.cancel')}
</Button>
{!loading && (
<Button
variant="contained"
disabled={!checkBoxSelected}
onClick={(e) => handleConfirmClick(e)}
>
{t('content.organization.unsubscribe.buttonText')}
</Button>
)}
{loading && (
<LoadingButton
color="primary"
helperText=""
helperTextColor="success"
label=""
loadIndicator={t('global.actions.loading')}
loading
size="medium"
onButtonClick={() => {}}
sx={{ marginLeft: '10px', textTransform: 'none' }}
/>
)}
</DialogActions>
</Dialog>
</div>
)
}

export default UnSubscribeOverlay
Loading

0 comments on commit 2e8f53f

Please sign in to comment.