// // LiveRoomDonationDialogView.swift // SodaLive // // Created by klaus on 2023/08/13. // import SwiftUI import Combine import Kingfisher struct LiveRoomDonationDialogView: View { @AppStorage("can") private var can: Int = UserDefaults.int(forKey: .can) @State private var donationCan = "" @State private var donationMessage = "" @State private var isShowErrorPopup = false @State private var errorMessage = "" @State private var isSecret = false @Binding var isShowing: Bool let isAudioContentDonation: Bool let onClickDonation: (Int, String, Bool) -> Void @StateObject var keyboardHandler = KeyboardHandler() var body: some View { ZStack { Color.black .opacity(0.7) .ignoresSafeArea() .onTapGesture { hideKeyboard() } VStack(spacing: 0) { Spacer() VStack(spacing: 0) { HStack(alignment: .center, spacing: 5.3) { Image("ic_donation_white") .resizable() .frame(width: 26.7, height: 26.7) Text("후원하기") .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color.grayee) Spacer() HStack(alignment: .center, spacing: 5.3) { Image("ic_can") .resizable() .frame(width: 26.7, height: 26.7) Text("\(can)") .font(.custom(Font.bold.rawValue, size: 18.3)) .foregroundColor(Color.grayee) Text("충전") .font(.custom(Font.medium.rawValue, size: 13.3)) .foregroundColor(Color.main) .padding(.horizontal, 13.3) .padding(.vertical, 8) .background(Color.bg) .cornerRadius(6.7) .overlay( RoundedRectangle(cornerRadius: 6.7) .stroke(Color.button, lineWidth: 1) ) } .onTapGesture { AppState.shared.setAppStep(step: .canCharge(refresh: {}, afterCompletionToGoBack: true)) self.isShowing = false } } .padding(.leading, 23.3) .padding(.trailing, 26.7) Rectangle() .frame(height: 1) .foregroundColor(Color.gray90) .padding(.top, 16) if !isAudioContentDonation { HStack(spacing: 0) { Spacer() HStack(spacing: 8) { Image(isSecret ? "btn_select_checked" : "btn_select_normal") .resizable() .frame(width: 20, height: 20) Text("비밀후원") .font(.custom(Font.medium.rawValue, size: 14.7)) .foregroundColor(Color.grayee) } .onTapGesture { isSecret.toggle() } } .padding(.horizontal, 20) .padding(.top, 16) } TextField("몇 캔을 후원할까요?", text: $donationCan) .font(.custom(Font.medium.rawValue, size: 13.3)) .foregroundColor(Color.grayee) .padding(13.3) .keyboardType(.numberPad) .background(Color.gray30) .cornerRadius(6.7) .padding(.horizontal, 20) .padding(.top, 16) HStack(spacing: 0) { Text("+10") .font(.custom(Font.bold.rawValue, size: 14.7)) .foregroundColor(.white) .padding(.vertical, 12.7) .frame(width: 74) .background(Color.button) .cornerRadius(6.7) .onTapGesture { if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty, let can = Int(donationCan) { donationCan = "\(can + 10)" } else { donationCan = "\(10)" } } Spacer() Text("+100") .font(.custom(Font.bold.rawValue, size: 14.7)) .foregroundColor(.white) .padding(.vertical, 12.7) .frame(width: 74) .background(Color.button) .cornerRadius(6.7) .onTapGesture { if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty, let can = Int(donationCan) { donationCan = "\(can + 100)" } else { donationCan = "\(100)" } } Spacer() Text("+1,000") .font(.custom(Font.bold.rawValue, size: 14.7)) .foregroundColor(.white) .padding(.vertical, 12.7) .frame(width: 74) .background(Color.button) .cornerRadius(6.7) .onTapGesture { if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty, let can = Int(donationCan) { donationCan = "\(can + 1000)" } else { donationCan = "\(1000)" } } Spacer() Text("+10,000") .font(.custom(Font.bold.rawValue, size: 14.7)) .foregroundColor(.white) .padding(.vertical, 12.7) .frame(width: 74) .background(Color.button) .cornerRadius(6.7) .onTapGesture { if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty, let can = Int(donationCan) { donationCan = "\(can + 10000)" } else { donationCan = "\(10000)" } } } .padding(.top, 26) .padding(.horizontal, 20) Rectangle() .frame(height: 1) .foregroundColor(Color.gray90) .padding(.vertical, 18.7) .padding(.horizontal, 20) HStack(spacing: 10.7) { KFImage(URL(string: UserDefaults.string(forKey: .profileImage))) .cancelOnDisappear(true) .downsampling(size: CGSize(width: 40, height: 40)) .resizable() .frame(width: 40, height: 40) .clipShape(Circle()) .overlay( Circle() .stroke(Color.graybb, lineWidth: 1) ) TextField("함께 보낼 메시지 입력(최대 50자)", text: $donationMessage) .font(.custom(Font.medium.rawValue, size: 13.3)) .foregroundColor(Color.grayee) .padding(13.3) .background(Color.gray30) .cornerRadius(6.7) .onReceive(Just(donationMessage)) { _ in limitText() } } .padding(.horizontal, 20) HStack(spacing: 13.3) { Text("취소") .font(.custom(Font.bold.rawValue, size: 15)) .foregroundColor(Color.button) .padding(.vertical, 16) .frame(width: (screenSize().width - 53.3) / 3) .background(Color.button.opacity(0.2)) .cornerRadius(10) .overlay( RoundedRectangle(cornerRadius: 10) .strokeBorder() .foregroundColor(Color.button) ) .onTapGesture { isShowing = false } Text("후원하기") .font(.custom(Font.bold.rawValue, size: 15)) .foregroundColor(.white) .padding(.vertical, 16) .frame(width: (screenSize().width - 53.3) * 2 / 3) .background(Color.button) .cornerRadius(10) .onTapGesture { if !donationCan.trimmingCharacters(in: .whitespaces).isEmpty, let can = Int(donationCan) { onClickDonation(can, donationMessage, isSecret) isShowing = false } else { errorMessage = "1캔 이상 후원하실 수 있습니다." isShowErrorPopup = true } } } .padding(.horizontal, 16.7) .padding(.top, 18.7) } .padding(.top, 21.3) .padding(.bottom, 16) .background(Color.gray22) .cornerRadius(20, corners: [.topLeft, .topRight]) } .popup(isPresented: $isShowErrorPopup, type: .toast, position: .bottom, autohideIn: 1.3) { HStack { Spacer() Text(errorMessage) .padding(.vertical, 13.3) .frame(width: screenSize().width - 66.7, alignment: .center) .font(.custom(Font.medium.rawValue, size: 12)) .background(Color.button) .foregroundColor(Color.white) .multilineTextAlignment(.leading) .cornerRadius(20) .padding(.bottom, 66.7) Spacer() } } .offset(y: isAudioContentDonation ? 0 : 0 - keyboardHandler.keyboardHeight) } } func limitText() { if donationMessage.count > 50 { donationMessage = String(donationMessage.prefix(50)) } } }