-
Notifications
You must be signed in to change notification settings - Fork 140
feat: redesign payment success screen #3436
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
feat: redesign payment success screen #3436
Conversation
This is ready for review @dolcalmi |
…ayment-success-screen
…ayment-success-screen
}, | ||
) => { | ||
const { maxLength, maxResultLeft, maxResultRight } = options | ||
if (typeof text !== "string") return "" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is not necessary we are using typescript and in theory should be detected in compile time
if (typeof text !== "string") return "" | ||
if (text.length <= maxLength) return text | ||
|
||
if (typeof maxResultLeft === "number" && typeof maxResultRight === "number") { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same here
// Shorten a long text by inserting "..." in the middle, keeping the ends visible. | ||
export const ellipsizeMiddle = ( | ||
text: string, | ||
options: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add default values
} | ||
|
||
// Shorten a long text by inserting "..." in the middle, keeping the ends visible. | ||
export const ellipsizeMiddle = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this needs tests
} | ||
|
||
// e.g. 1747691078 -> "2025-05-19 15:44" | ||
export function formatUnixTimestampYMDHM(timestampInSeconds: number) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this not like .toISOString ?
new Date(1747691078 * 1000).toISOString().slice(0, 16).replace('T', ' ')
|
||
const useStyles = makeStyles(({ colors }) => ({ | ||
contentContainer: { | ||
headerContainer: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please validate if we can use relative values (i.e %)
<View> | ||
<Text style={styles.inputStyle} type={"p3"}> | ||
{textData.text} | ||
{textData.url && " "} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is the purpose of this?
url?: string | ||
} | ||
|
||
export const FieldWithEvent = ({ title, value, subValue }: FieldWithEventProps) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is subValue?
</> | ||
)} | ||
<View style={styles.fieldContainer}> | ||
<FieldWithEvent title={title} value={text!} subValue={subText} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please be consistent subValue={subText}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is not missing the new keys?
The new payment success screen will have more details and a Share action.