WebApp-Profile: Som användare vill jag kunna lägga till och ändra betalningsmetoder.

[codingbyahlv]

Design

• [ ] WebApp-Profile-Task: Upprätta en design för sidan i mobilt läge enligt designmallen.
• [ ] WebApp-Profile-Task: Upprätta en design för sidan i surfplatta läge.
• [ ] WebApp-Profile-Task: Upprätta en design för sidan i desktop läge.
• [ ] WebApp-Profile-Task: Upprätta design för "Cards "som representerar betalmetod av typen betalkort.
• [ ] WebApp-Profile-Task: Upprätta design för formuläret för betalkortsdetaljer: "Card number", "Epiration date", Cardholder name", "CVV", Submit-knapp med texten "Confirm" och reset-knapp med texten "Cancel".
• [ ] WebApp-Profile-Task: Korten ska läggas bakom varandra (olika z-index). Kortet längst bak ska ligga nära toppen av sin sektion och för varje framförliggande lager flyttas korten succesivt ner mot botten på skärmen samtidigt som de blir lite större i bredd och höjd för att simulera ett djup i bilden.
• [ ] WebApp-Profile-Task: Designförslag: när markören är på ett kort bakom första kortet, ska det markerade kortet höjas upp något i höjdled för att indikera att man markerar just det kortet. Kortet sänks sen ner igen när markören inte längre är ovanför den.

Backend och logik

• [ ] WebApp-Profile-Task: Implementera logik för att på ett säkert sätt visa användares betalningsuppgifter från databas.
• [ ] WebApp-Profile-Task: Implementera logik för att på ett säkert sätt spara ner användares betalningsuppgifter till databas.
• [ ] WebApp-Profile-Task: Implementera logik för att på ett säkert sätt uppdatera användares betalningsuppgifter till databas.
• [ ] WebApp-Profile-Task: Implementera logik för att på ett säkert sätt radera en användares betalningsuppgifter från databas.

Definition of done:

• [ ] Användare möts av en väldesignad och tydlig sida med bra tillgänglighet.
• [ ] Sidan fungerar bra i mobilt läge.
• [ ] Sidan fungerar bra i surfplatte läge.
• [ ] Sidan fungerar bra i desktop läge.
• [ ] Det går att spara betalningsuppgifter via ett formulär på sin profilsida.
• [ ] Det går att uppdatera betalningsuppgifter via ett formulär på sin profilsida.
• [ ] Det går att radera betalningsuppgifter via ett formulär på sin profilsida.
• [ ] Det går att påbörja en uppdatering av betalningsuppgifter via ett formulär och sen avbryta den igenom att trycka på "cancel" knappen.
• [ ] Vid lyckad uppdatering ska statusmeddelande visas för att indikera detta.
• [ ] Vid misslyckad uppdatering ska felmeddelande visas för att indikera detta.

[DennisMikaj]

Testfall: Design och funktionalitet för betalningsmetoder

Förutsättningar: Användaren är inloggad och har tillgång till betalsidan. Fälten för betalinformation är förifyllda med användarens betaluppgifter om dom finns.

1. Design för olika enheter

   Syfte: Verifiera att sidan har en korrekt design för mobil, surfplatta och desktop. Teststeg: Öppna sidan i mobilt läge och kontrollera att designen följer mallen. Öppna sidan i surfplatte-läge och kontrollera att designen följer mallen. Öppna sidan i desktop-läge och kontrollera att designen följer mallen.

   Förväntat resultat: Sidan är väldesignad och lättillgänglig i alla lägen.

2. Backend-logik för betalningsuppgifter

   Syfte: Verifiera att backend-logiken för att hantera betalningsuppgifter fungerar korrekt och säkert. Teststeg:

   Testa att spara betalningsuppgifter via formuläret. Testa att uppdatera betalningsuppgifter via formuläret. Testa att radera betalningsuppgifter via formuläret. Testa att avbryta en uppdatering genom att trycka på "Cancel".

   Fel scenario: Användare lämnar något fält tomt. Betaluppgifter blir ej validerade. (ex. kortnummer kort/existerar ej men det går att skicka in) Misslyckad sparning av updaterade uppgifter. Misslyckad hämtning av uppgifter från API.

Förväntat resultat: Betalningsuppgifter sparas, uppdateras och raderas korrekt. Betaluppgifter valideras (ex. kortnummer längd) Statusmeddelande visas vid lyckad uppdatering. Felmeddelande visas vid misslyckad uppdatering.