feat: Add Expired Listings modal to navigate to My Assets (decentrala…

…nd#1951) * feat: Add Expired Listings modal to navigate to My Assets * fix: check if the orders are from the same owner * chore: adjust wording
Atlasnfts · Jul 27, 2023 · 31bb50e · 31bb50e
1 parent 270c6f3
commit 31bb50e
Show file tree

Hide file tree

Showing 11 changed files with 436 additions and 4 deletions.
diff --git a/webapp/src/components/Modals/ExpiredListingsModal/ExpiredListingsModal.module.css b/webapp/src/components/Modals/ExpiredListingsModal/ExpiredListingsModal.module.css
@@ -0,0 +1,65 @@
+.ExpiredListingsModal .warningIconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: #ff7439;
+  border-radius: 50%;
+}
+
+.ExpiredListingsModal .warningExpiration:global(.icon) {
+  font-size: 20px;
+  line-height: 20px;
+  margin-right: 0;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+}
+
+.modalDescription {
+  text-align: center;
+}
+
+.ExpiredListingsModal:global(.ui.modal .actions > .button:first-child) {
+  width: 80%;
+  align-self: center;
+}
+.ExpiredListingsModal:global(.ui.modal .actions .ui.button + .ui.button) {
+  margin: unset;
+  width: 80%;
+  align-self: center;
+  color: white;
+  border-color: white;
+}
+
+.ExpiredListingsModal:global(.ui.modal > .content) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 50px;
+}
+
+.listsLogo {
+  background-image: url('../../../images/empty-list.svg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 80px;
+  height: 80px;
+}
+
+@media (max-width: 768px) {
+  .actions {
+    gap: unset;
+  }
+
+  .ExpiredListingsModal:global(.ui.modal .actions > .button:first-child),
+  .ExpiredListingsModal:global(.ui.modal .actions .ui.button + .ui.button) {
+    width: 100%;
+  }
+}
diff --git a/webapp/src/components/Modals/ExpiredListingsModal/ExpiredListingsModal.tsx b/webapp/src/components/Modals/ExpiredListingsModal/ExpiredListingsModal.tsx
@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import {
+  Modal,
+  Button,
+  ModalNavigation,
+  useTabletAndBelowMediaQuery,
+  Icon
+} from 'decentraland-ui'
+import * as decentraland from '../../../modules/vendor/decentraland'
+import { locations } from '../../../modules/routing/locations'
+import { EXPIRED_LISTINGS_MODAL_KEY } from '../../../modules/ui/utils'
+import styles from './ExpiredListingsModal.module.css'
+
+export const ExpiredListingsModal = () => {
+  const onDontShowAgain = useCallback(() => {
+    localStorage.setItem(EXPIRED_LISTINGS_MODAL_KEY, 'true')
+    setIsOpen(false)
+  }, [])
+
+  const onClose = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const isTabletOrBelow = useTabletAndBelowMediaQuery()
+  const [isOpen, setIsOpen] = useState<boolean>(true)
+  useEffect(() => {
+    setIsOpen(
+      !localStorage.getItem(EXPIRED_LISTINGS_MODAL_KEY) && !isTabletOrBelow
+    )
+  }, [isTabletOrBelow])
+
+  return (
+    <Modal
+      className={styles.ExpiredListingsModal}
+      open={isOpen}
+      size={'small'}
+      onClose={onClose}
+      dimmer={{ className: styles.dimmerRemover }}
+    >
+      <ModalNavigation
+        title={t('expired_listings_modal.title')}
+        onClose={onClose}
+      />
+      <Modal.Content className={styles.content}>
+        <div className={styles.warningIconContainer}>
+          <Icon
+            name="exclamation triangle"
+            className={styles.warningExpiration}
+          />
+        </div>
+        <Modal.Description>
+          <div className={styles.modalDescription}>
+            {t('expired_listings_modal.description', {
+              br: () => <br />
+            })}
+          </div>
+        </Modal.Description>
+      </Modal.Content>
+      <Modal.Actions className={styles.actions}>
+        <Button
+          as={Link}
+          to={locations.currentAccount({
+            section: decentraland.Section.ON_SALE
+          })}
+          primary
+          onClick={onClose}
+          fluid
+        >
+          {t('expired_listings_modal.go_to_my_assets')}
+        </Button>
+        <Button inverted onClick={onDontShowAgain} fluid primary>
+          {t('expired_listings_modal.do_not_show_again')}
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  )
+}
diff --git a/webapp/src/components/Modals/ExpiredListingsModal/index.ts b/webapp/src/components/Modals/ExpiredListingsModal/index.ts
@@ -0,0 +1 @@
+export { ExpiredListingsModal } from './ExpiredListingsModal'
diff --git a/webapp/src/components/Modals/index.ts b/webapp/src/components/Modals/index.ts
@@ -15,3 +15,4 @@ export { CreateOrEditListModal } from './CreateOrEditListModal'
 export { ConfirmDeleteListModal } from './ConfirmDeleteListModal'
 export { SaveToListModal } from './SaveToListModal'
 export { ShareListModal } from './ShareListModal'
+export { ExpiredListingsModal } from './ExpiredListingsModal'
diff --git a/webapp/src/components/OnSaleOrRentList/AssetCell/AssetCell.module.css b/webapp/src/components/OnSaleOrRentList/AssetCell/AssetCell.module.css
@@ -14,6 +14,10 @@
   overflow: hidden;
 }
 
+.imageContainer :global(.dcl.badge) {
+  display: none;
+}
+
 .title {
   font-weight: 600;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ExpiredListingsModal } from './ExpiredListingsModal'