From 7f409e3fea4ad7a76ad26d761eaa4bce181dc49c Mon Sep 17 00:00:00 2001
From: Kyle Shanks <kyle.j.shanks@gmail.com>
Date: Tue, 2 May 2023 15:02:36 -0400
Subject: [PATCH] [C-2542] Update delete playlist confirmation drawer to
 conform to new designs (#3303)

---
 .../mobile/src/assets/images/iconTrash.svg    |   4 +
 .../DeletePlaylistConfirmationDrawer.tsx      | 111 +++++++++++++++---
 2 files changed, 98 insertions(+), 17 deletions(-)
 create mode 100644 apps/audius-client/packages/mobile/src/assets/images/iconTrash.svg

diff --git a/apps/audius-client/packages/mobile/src/assets/images/iconTrash.svg b/apps/audius-client/packages/mobile/src/assets/images/iconTrash.svg
new file mode 100644
index 00000000000..e65d979a27d
--- /dev/null
+++ b/apps/audius-client/packages/mobile/src/assets/images/iconTrash.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.53125 2.69141L8.25 3.25H4.5C3.80859 3.25 3.25 3.80859 3.25 4.5C3.25 5.19141 3.80859 5.75 4.5 5.75H19.5C20.1914 5.75 20.75 5.19141 20.75 4.5C20.75 3.80859 20.1914 3.25 19.5 3.25H15.75L15.4688 2.69141C15.2578 2.26563 14.8242 2 14.3516 2H9.64844C9.17578 2 8.74219 2.26563 8.53125 2.69141ZM19.5 7H4.5L5.32812 20.2422C5.39062 21.2305 6.21094 22 7.19922 22H16.8008C17.7891 22 18.6094 21.2305 18.6719 20.2422L19.5 7Z" fill="#000"/>
+</svg>
+
diff --git a/apps/audius-client/packages/mobile/src/components/delete-playlist-confirmation-drawer/DeletePlaylistConfirmationDrawer.tsx b/apps/audius-client/packages/mobile/src/components/delete-playlist-confirmation-drawer/DeletePlaylistConfirmationDrawer.tsx
index e4300b70775..04916693a1b 100644
--- a/apps/audius-client/packages/mobile/src/components/delete-playlist-confirmation-drawer/DeletePlaylistConfirmationDrawer.tsx
+++ b/apps/audius-client/packages/mobile/src/components/delete-playlist-confirmation-drawer/DeletePlaylistConfirmationDrawer.tsx
@@ -1,39 +1,116 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 
 import {
   cacheCollectionsActions,
-  deletePlaylistConfirmationModalUISelectors
+  cacheCollectionsSelectors,
+  deletePlaylistConfirmationModalUISelectors,
+  fillString
 } from '@audius/common'
+import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
-import ActionDrawer from 'app/components/action-drawer'
+import IconTrash from 'app/assets/images/iconTrash.svg'
+import { Text, Button } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
+import { makeStyles } from 'app/styles'
+import { useColor } from 'app/utils/theme'
+
+import { useDrawerState } from '../drawer'
+import Drawer from '../drawer/Drawer'
 const { getPlaylistId } = deletePlaylistConfirmationModalUISelectors
 const { deletePlaylist } = cacheCollectionsActions
+const { getCollection } = cacheCollectionsSelectors
+
+const messages = {
+  drawerTitle: 'Delete Playlist?',
+  drawerBody: 'Are you sure you want to delete your playlist%0?',
+  buttonConfirmText: 'Delete',
+  buttonCancelText: 'Cancel'
+}
+
+const useStyles = makeStyles(({ palette, spacing }) => ({
+  title: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing(2),
+    alignItems: 'center',
+    paddingVertical: spacing(6),
+    borderBottomColor: palette.neutralLight8,
+    borderBottomWidth: 1
+  },
+  titleText: {
+    textTransform: 'uppercase'
+  },
+  container: {
+    marginHorizontal: spacing(4)
+  },
+  body: {
+    margin: spacing(4),
+    lineHeight: spacing(6),
+    textAlign: 'center'
+  },
+  buttonContainer: {
+    gap: spacing(2),
+    marginBottom: spacing(8)
+  }
+}))
 
 export const DeletePlaylistConfirmationDrawer = () => {
   const playlistId = useSelector(getPlaylistId)
+  const playlist = useSelector((state) =>
+    getCollection(state, { id: playlistId })
+  )
+  const neutral = useColor('neutral')
   const dispatch = useDispatch()
   const navigation = useNavigation()
+  const styles = useStyles()
+  const { isOpen, onClose } = useDrawerState('DeletePlaylistConfirmation')
 
   const handleDelete = useCallback(() => {
     if (playlistId) {
       dispatch(deletePlaylist(playlistId))
       navigation.goBack()
     }
-  }, [dispatch, playlistId, navigation])
-
-  const rows = useMemo(
-    () => [
-      {
-        text: 'Delete',
-        isDestructive: true,
-        callback: handleDelete
-      },
-      { text: 'Cancel' }
-    ],
-    [handleDelete]
-  )
+    onClose()
+  }, [dispatch, playlistId, navigation, onClose])
 
-  return <ActionDrawer modalName='DeletePlaylistConfirmation' rows={rows} />
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose}>
+      <View style={styles.container}>
+        <View style={styles.title}>
+          <IconTrash fill={neutral} width={24} height={24} />
+          <Text
+            weight='heavy'
+            color='neutral'
+            fontSize='xl'
+            style={styles.titleText}
+          >
+            {messages.drawerTitle}
+          </Text>
+        </View>
+        <Text style={styles.body} fontSize='large' weight='medium'>
+          {fillString(
+            messages.drawerBody,
+            playlist ? `, ${playlist.playlist_name}` : ''
+          )}
+        </Text>
+        <View style={styles.buttonContainer}>
+          <Button
+            title={messages.buttonCancelText}
+            variant='primary'
+            size='large'
+            fullWidth
+            onPress={onClose}
+          />
+          <Button
+            title={messages.buttonConfirmText}
+            variant='common'
+            size='large'
+            fullWidth
+            onPress={handleDelete}
+          />
+        </View>
+      </View>
+    </Drawer>
+  )
 }