allow Request money 'Description' to accept multiline #21664

ahmedGaber93 · 2023-06-27T09:06:23Z

Details

Fixed Issues

$ #19872, #25780
PROPOSAL: #19872 (comment)

Tests

Open any chat.
Click (+) icon next the chat input then click request money.
On description input write something long with line breaks.
Verify that description input accept multlines and line break.
Then click Save and Verify that the description field in request money confirm page is display in max two lines.
Open the description field again and Verify that the description input is focued and the cursor position is at the end.
Confirm the request money then go to the chat and open the "own thread" then open this request money thread and Verify that the report title is display in max one line.
Create another request money by repeat steps 1, 2.
Click button show more and write long merchant name.
Complete the request money then go to the chat and open the "own thread" and Verify the long merchant name is break and not go outside the IOU preview.

Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as Tests step.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

Screen.Recording.2023-08-23.at.11.32.22.AM.mov

Screen.Recording.2023-08-24.at.4.26.25.AM.mov

Mobile Web - Chrome

Screen.Recording.2023-08-23.at.12.34.57.PM.mov

Screen.Recording.2023-08-24.at.4.29.06.AM.mov

Mobile Web - Safari

Screen.Recording.2023-08-23.at.12.01.23.PM.mov

Screen.Recording.2023-08-24.at.4.38.05.AM.mov

Desktop

Screen.Recording.2023-08-23.at.11.39.48.AM.mov

Screen.Recording.2023-08-24.at.4.35.58.AM.mov

iOS

Screen.Recording.2023-08-23.at.11.59.30.AM.mov

Screen.Recording.2023-08-24.at.5.24.09.AM.mov

Android

Screen.Recording.2023-08-23.at.12.54.19.PM.mov

Screen.Recording.2023-08-24.at.4.30.45.AM.mov

melvin-bot · 2023-06-27T09:06:28Z

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

aimane-chnaif

Please remove any changes related to money request header. It will be handled in #19389 and out of scope for this PR.
Here, we should fix only input part.

aimane-chnaif · 2023-06-27T19:27:07Z

@youssef-lr can this be separate issue? Same happens on task description from #19377 which you reviewed.

web.mov

Last line cursor overlaps with bottom border but fine when at least 1 letter

… changes

ahmedGaber93 · 2023-06-27T19:53:47Z

Please remove any changes related to money request header.

removed.
@aimane-chnaif

aimane-chnaif · 2023-06-27T21:15:07Z

@ahmedGaber93 mSafari not working. can you investigate? I also tested task description input. There's another weird bug but at least multiline works.

msafari-bug.mov

ahmedGaber93 · 2023-06-28T05:17:13Z

@aimane-chnaif

@ahmedGaber93 mSafari not working. can you investigate?

This issue also happened with me in web.
After investigation, I found we have active subscribe on keyboard shortcut EnterKey in one of the previous page components.

MoneyRequestConfirmPage.js page has component MoneyRequestConfirmationList which use OptionsSelector component, and in OptionsSelector we subscribe to keyboard shortcut EnterKey.

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 67 in 52a1891

this.unsubscribeEnter = KeyboardShortcut.subscribe(

and this subscription also work in inputs captureOnInputs = true

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 87 in 52a1891

true,

My proposal for this is:

Adding empty EnterKey subscription in MoneyRequestDescriptionPage, this empty subscription have by default captureOnInputs = false and shouldBubble = false which execute stopPropagation().

componentDidMount() {
    const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
    this.unsubscribeEnter = KeyboardShortcut.subscribe(
        enterConfig.shortcutKey,
        () => {},
        enterConfig.descriptionKey,
        enterConfig.modifiers
    );
}

componentWillUnmount() {
    if (this.unsubscribeEnter) {
        this.unsubscribeEnter();
    }
}

aimane-chnaif · 2023-06-28T05:20:38Z

This conflicts with #21661
@ahmedGaber93 please pull main and test again

ahmedGaber93 · 2023-06-28T05:26:56Z

This issue #21661 is related to tasks not money request, why it conflicts? @aimane-chnaif

aimane-chnaif · 2023-06-28T05:28:18Z

This issue #21661 is related to tasks not money request, why it conflicts? @aimane-chnaif

I meant that's the reason why inconsistent behavior between task description input and money request description input

aimane-chnaif · 2023-06-28T05:33:49Z

Let's keep everything consistent here with task description.

There are many issues reported related to task description input so while making consistency, we can consider known issues out of scope.

[HOLD for payment 2023-06-23] [$1000] Allow adding newlines in description for tasks #19135
IOS - Assign task - Text is flickering in case of editing saved description field #20836
[HOLD for payment 2023-07-06] [$1000] Inconsistent "Enter" key behavior in Assign task #21205
[Pending Checklist] [$1000] Description - Cursor half visible when hitting Enter and going to next line of Task Description #21271
[HOLD for payment 2023-07-12] [$1000] Assign Task - Description field line is displaced and moves up when typed #21280
[HOLD for payment 2023-07-17] [$1000] mWeb - the confirm task screen is not scrollable, when a task description has multiple line #21347
mWeb - Assign Task Description field shows as multiline #21433
[$1000] Cursor is barely visible on the next line after pressing 'Enter' in task description while creating it #21449

ahmedGaber93 · 2023-06-28T05:53:39Z

@aimane-chnaif I will check this #21664 (comment)
but about mSafari issue in this comment #21664 (comment) i think it is not the same of #21661 because submitOnEnter will cause form submit on enter press, but "shift + enter" will not cause new line, and this what I try to fix here #21664 (comment)

aimane-chnaif · 2023-06-28T16:26:11Z

@ahmedGaber93 let's follow #21661 (comment)

aimane-chnaif · 2023-06-28T16:26:32Z

submitOnEnter prop should do the magic

ahmedGaber93 · 2023-06-29T07:41:25Z

@aimane-chnaif
Progress updates
#19135 done.
#20836 done.
#21205 done.
#21271 I think it is a known issue, and it also found in task description.
#21280 done.
#21347 done.
#21433 (same as #21280 above)
#21449 (same as #21271 above)

aimane-chnaif · 2023-06-29T11:16:00Z

Thanks for update.
@youssef-lr let's hold our PR until above PRs to fix task description issues are deployed as it's double work.

ahmedGaber93 · 2023-07-07T16:59:33Z

@aimane-chnaif I applied the same fixes here #21664 (comment) in this PR, you can review now.

aimane-chnaif · 2023-07-07T17:01:24Z

@ahmedGaber93 do you think all task description bugs are gone now except #21271?

ahmedGaber93 · 2023-07-07T17:09:39Z

@aimane-chnaif yes we now have the same behavior in task description and request money description except "shift + enter" in web, it not return new line on request money description but do in task description in web. And here is my root cause and proposal for it #21664 (comment)

aimane-chnaif · 2023-08-24T00:28:06Z

BUG: LHN alternativeText is also multilined

@aimane-chnaif Issue: offline - when create request money, the LHN "own item" display in multilined. root cause: incosistent between optimisticData (return all text) and backend data (return fist line only). fix: fix optimisticData lastMessageText by using ReportUtils.formatReportLastMessageText here

App/src/libs/actions/IOU.js

Line 119 in 2c4adca

lastMessageText: iouAction.message[0].text,

Agree. This is hidden bug and we haven't noticed before enabling multiline.

ahmedGaber93 · 2023-08-24T02:10:00Z

@aimane-chnaif

BUG: LHN alternativeText is also multilined

Fix pushed

It seems text is collapsed too early

Can't reproduce it on native android

ahmedGaber93 · 2023-08-24T03:48:06Z

Yep, but the fix might be similar

@mountiny, the fix of issue #25780 has been pushed to this PR, and the Tests step and screenshots are updated.

mountiny · 2023-08-24T14:26:23Z

thanks

src/components/MoneyRequestConfirmationList.js

src/components/OptionsSelector/BaseOptionsSelector.js

aimane-chnaif · 2023-08-25T11:50:50Z

src/libs/actions/IOU.js

@@ -116,7 +116,7 @@ function buildOnyxDataForMoneyRequest(
            key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`,
            value: {
                ...iouReport,
-                lastMessageText: iouAction.message[0].text,
+                lastMessageText: ReportUtils.formatReportLastMessageText(iouAction.message[0].text),


Apply this to Split bill as well

Actually I think this can be separate issue to fix inconsistency between optimistic data and backend data for last message text with multiline description.
Can't we just prevent wrap here?

Can't we just prevent wrap here?

Are you mean remove new lines "\n" from message text?
If you mean that the lastMessageText will not be inconsistent with backend, because backend return only first line of message text.

Can't we just prevent wrap here?

I meant to keep that optimistic value as is now but just fix display issue of wrapped

the wrap happened here because numberOfLines={1} does not work as expected when <Text/> contains \n and whiteSpace: 'pre' just not break the long lines but not affected on \n

For that, we can fix it by replace styles.pre with styles.noWrap here

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 87 to 92 in 4362fe7

const alternateTextStyle = StyleUtils.combineStyles(

props.viewMode === CONST.OPTION_MODE.COMPACT

? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]

: [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting],

props.style,

);

This will remove the new lines "\n" from message text and fix the wrap issue, but inconsistency with backend will still issue.

Workaround cannot be a quick fix.

I can't find a quick fix right now. What is the next step now?

use styles.noWrap and fix wrap issue partially with inconsistent result on iOS.

do nothing and keep wrap issue separately?

do nothing and keep wrap issue separately?

We can't do this because it looks weird and our PR might need to be reverted.

use styles.noWrap and fix wrap issue partially with inconsistent result on iOS.

This is still concerned but we would consider this not a deploy blocker I believe.

Yes, I update the code to use styles.noWrap

styles.noWrap caused regression - #27586

aimane-chnaif · 2023-08-26T04:05:30Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web.mov

Mobile Web - Chrome

mchrome.mov

Mobile Web - Safari

msafari.mov

Desktop

desktop.mov

iOS

ios.mov

Android

android.mov

aimane-chnaif

Follow up issues:

iOS alternativeText in LHN shows only first line, while all other platforms shows full text in one line (... at the end if overflows) (allow Request money 'Description' to accept multiline #21664 (comment))
LHN alternativeText, report header title don't preserve spaces and tabs (caused by replacing pre with nowrap)
inconsistent report.lastMessageText between optimistic data (full text) and backend (only first line)

stitesExpensify

LGTM! Just one small grammatical change

stitesExpensify · 2023-08-28T16:57:33Z

src/components/OptionsSelector/BaseOptionsSelector.js

+        );
+    }
+
+    unSubscribeToKeyboardShortcut() {


Suggested change

unSubscribeToKeyboardShortcut() {

unSubscribeFromKeyboardShortcut() {

stitesExpensify

LGTM!

OSBotify · 2023-08-28T22:24:09Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2023-08-30T01:54:06Z

🚀 Deployed to staging by https://github.com/stitesExpensify in version: 1.3.59-0 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-08-31T01:03:54Z

🚀 Deployed to staging by https://github.com/stitesExpensify in version: 1.3.60-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2023-08-31T01:47:19Z

🚀 Deployed to staging by https://github.com/stitesExpensify in version: 1.3.60-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-08-31T01:54:24Z

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.59-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2023-08-31T22:51:31Z

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.60-3 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

alitoshmatov · 2024-01-24T14:05:09Z

src/components/DisplayNames/DisplayNamesWithTooltip.js

@@ -51,7 +51,7 @@ function DisplayNamesWithToolTip(props) {
    return (
        // Tokenization of string only support prop numberOfLines on Web
        <Text
-            style={[...props.textStyles, styles.pRelative]}
+            style={[...props.textStyles, styles.pRelative, props.numberOfLines === 1 ? styles.noWrap : {}]}


styles.noWrap is not needed here #32555 (comment)

ahmedGaber93 added 2 commits June 26, 2023 18:42

allow Request money 'Description' to accept multiline

e70b5cb

add prop type numberOfLines for menuItemPropTypes.js

8d96ea1

ahmedGaber93 requested a review from a team as a code owner June 27, 2023 09:06

melvin-bot bot removed the request for review from a team June 27, 2023 09:06

melvin-bot bot requested a review from aimane-chnaif June 27, 2023 09:06

ahmedGaber93 mentioned this pull request Jun 27, 2023

[HOLD for payment 2023-09-07] [$1000] Line does not break in 'Description' of Request money #19872

Closed

6 tasks

aimane-chnaif reviewed Jun 27, 2023

View reviewed changes

allow Request money 'Description' to accept multiline - remove header…

c99bec9

… changes

ahmedGaber93 added 2 commits June 29, 2023 08:05

Merge branch 'main' into issue-19872

27a4c22

fix Request money 'Description' auto focus && submit on enter

015b933

conorpendergrast mentioned this pull request Jun 30, 2023

Web - Scroll becomes hidden when writing a long message in IOU section #21867

Closed

6 tasks

ahmedGaber93 added 2 commits July 7, 2023 11:46

Merge branch 'main' into issue-19872

fa81912

request money description max lines

e3c7cc6

fix lastMessageText multiline on request money.

fef13b2

fix request money merchant text not break.

646b621

mountiny assigned ahmedGaber93 Aug 24, 2023

aimane-chnaif reviewed Aug 24, 2023

View reviewed changes

src/components/MoneyRequestConfirmationList.js Outdated Show resolved Hide resolved

aimane-chnaif reviewed Aug 24, 2023

View reviewed changes

src/components/OptionsSelector/BaseOptionsSelector.js Outdated Show resolved Hide resolved

fix BaseOptionsSelector.js keyboard shortcut listener

b8839f0

aimane-chnaif reviewed Aug 25, 2023

View reviewed changes

fix lastMessageText display on LHN.

37476d7

aimane-chnaif approved these changes Aug 26, 2023

View reviewed changes

melvin-bot bot requested a review from stitesExpensify August 26, 2023 04:06

stitesExpensify requested changes Aug 28, 2023

View reviewed changes

rename unSubscribeFromKeyboardShortcut

a9faa80

stitesExpensify approved these changes Aug 28, 2023

View reviewed changes

stitesExpensify merged commit d42967a into Expensify:main Aug 28, 2023

OSBotify mentioned this pull request Aug 30, 2023

Deploy Checklist: New Expensify 2023-08-30 #26268

Closed

OSBotify mentioned this pull request Aug 31, 2023

Deploy Checklist: New Expensify 2023-08-31 #26359

Closed

69 tasks

DylanDylann mentioned this pull request Sep 16, 2023

[HOLD for payment 2023-10-09] [$500] LHN - Extra spaces between text is not displayed on LHN (works fine on android app) #27586

Closed

6 tasks

bernhardoj mentioned this pull request Dec 6, 2023

[PAID] LOW: [$500] Android-Thread-In Android, with uneven spacing as text entered, displayed in reply thread title #32555

Closed

6 tasks

alitoshmatov reviewed Jan 24, 2024

View reviewed changes

	const alternateTextStyle = StyleUtils.combineStyles(
	props.viewMode === CONST.OPTION_MODE.COMPACT
	? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]
	: [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting],
	props.style,
	);

	unSubscribeToKeyboardShortcut() {
	unSubscribeFromKeyboardShortcut() {

allow Request money 'Description' to accept multiline #21664

allow Request money 'Description' to accept multiline #21664

Conversation

ahmedGaber93 commented Jun 27, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Jun 27, 2023

aimane-chnaif left a comment • edited Loading

Choose a reason for hiding this comment

aimane-chnaif commented Jun 27, 2023

ahmedGaber93 commented Jun 27, 2023

aimane-chnaif commented Jun 27, 2023

ahmedGaber93 commented Jun 28, 2023

My proposal for this is:

aimane-chnaif commented Jun 28, 2023

ahmedGaber93 commented Jun 28, 2023

aimane-chnaif commented Jun 28, 2023

aimane-chnaif commented Jun 28, 2023

ahmedGaber93 commented Jun 28, 2023

aimane-chnaif commented Jun 28, 2023

aimane-chnaif commented Jun 28, 2023

ahmedGaber93 commented Jun 29, 2023 • edited Loading

aimane-chnaif commented Jun 29, 2023

ahmedGaber93 commented Jul 7, 2023

aimane-chnaif commented Jul 7, 2023

ahmedGaber93 commented Jul 7, 2023 • edited Loading

aimane-chnaif commented Aug 24, 2023

ahmedGaber93 commented Aug 24, 2023

ahmedGaber93 commented Aug 24, 2023

mountiny commented Aug 24, 2023

Choose a reason for hiding this comment

aimane-chnaif Aug 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahmedGaber93 Aug 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aimane-chnaif commented Aug 26, 2023

Reviewer Checklist

Screenshots/Videos

aimane-chnaif left a comment • edited Loading

Choose a reason for hiding this comment

stitesExpensify left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stitesExpensify left a comment

Choose a reason for hiding this comment

OSBotify commented Aug 28, 2023

OSBotify commented Aug 30, 2023

OSBotify commented Aug 31, 2023

OSBotify commented Aug 31, 2023

OSBotify commented Aug 31, 2023

OSBotify commented Aug 31, 2023

Choose a reason for hiding this comment

ahmedGaber93 commented Jun 27, 2023 •

edited

Loading

aimane-chnaif left a comment •

edited

Loading

ahmedGaber93 commented Jun 29, 2023 •

edited

Loading

ahmedGaber93 commented Jul 7, 2023 •

edited

Loading

aimane-chnaif Aug 25, 2023 •

edited

Loading

ahmedGaber93 Aug 25, 2023 •

edited

Loading

aimane-chnaif left a comment •

edited

Loading