use PopoverMenu

[thesahindia]

Details

Made payment methods container consistent

Fixed Issues

$ #7546

Tests

• Verify that no errors appear in the JS console

QA Steps

1. Navigate to Payments page
2. Click add payment method
3. Verify if the container has vertical padding

• Verify that no errors appear in the JS console

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Screen.Recording.2022-02-25.at.4.26.07.AM.mov

Mobile Web

Desktop

Can't test as there is some problem on desktop app

iOS

Android

[rushatgabhane]

@thesahindia we're also adding popovermenu to storybook yeah?

[thesahindia]

@rushatgabhane, I tried it and I am getting this error.

[rushatgabhane]

I am getting this error.

@thesahindia can you elaborate on what led you to this error? Steps would be appreciated, thanks!

[thesahindia]

@rushatgabhane, I made PopoverMenu.stories.js and ran npm run storybook and got this error when tried to see the preview on localhost. The PopoverMenu uses the baseModal which uses SafeAreaInsetsContext and I think it is causing the error.

App/src/components/Modal/BaseModal.js

Lines 116 to 124 in fd24e0d

	<SafeAreaInsetsContext.Consumer>
	{(insets) => {
	const {
	paddingTop: safeAreaPaddingTop,
	paddingBottom: safeAreaPaddingBottom,
	paddingLeft: safeAreaPaddingLeft,
	paddingRight: safeAreaPaddingRight,
	} = StyleUtils.getSafeAreaPadding(insets);

[rushatgabhane]

I made PopoverMenu.stories.js

@thesahindia sorry for the delay, is it possible for you to send the code for this? Thanks

[thesahindia]

@rushatgabhane yeah sure.

import React from 'react';
import PopoverMenu from '../components/PopoverMenu';
import * as Expensicons from '../components/Icon/Expensicons';

/**
 * We use the Component Story Format for writing stories. Follow the docs here:
 *
 * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
 */
const story = {
    title: 'Components/PopoverMenu',
    component: PopoverMenu,
};

// eslint-disable-next-line react/jsx-props-no-spreading
const Template = args => <PopoverMenu {...args} />;

// Arguments can be passed to the component by binding
// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Default = Template.bind({});
Default.args = {
    isVisible: true,
    menuItems: [
        {
            text: 'Bank account',
            icon: Expensicons.Bank,
        },
        {
            text: 'Debit card',
            icon: Expensicons.CreditCard,
        },
        {
            text: 'PayPal.me',
            icon: Expensicons.PayPal,
        },
    ],
};

export default story;
export {
    Default,
};

[rushatgabhane]

@thesahindia i think you need to pass anchor position

App/src/components/Popover/popoverPropTypes.js

Line 23 in fd24e0d

// Anchor position is optional only because it is not relevant on mobile

[thesahindia]

@rushatgabhane, I tried passing anchor position but it didn't work.

[rushatgabhane]

Oh man, I can't get it to work either or find the root cause. I tried using ButtonWithMenu too, but I get the same error.

@thesahindia could you please ask about this on slack? Thanks!

[rushatgabhane]

@thesahindia looks like we have a solution. Let's get it done :)

[thesahindia]

@rushatgabhane PR is almost ready for review, just need to fix some lint errors, will do it soon. Done.

[rushatgabhane]

@Julesssss LGTM! 🎉️

[Julesssss]

I noticed this issue during testing, but it's unrelated as it already exists on prod.

[thesahindia]

I noticed this issue during testing, but it's unrelated as it already exists on prod.

Hmm strange I had reported this issue on slack but I found that it won't need a separate issue as the current PR was going to solve it.
Edit:- I checked it again and it's working fine after the changes of current PR

[Julesssss]

Oh, let me try again. Maybe the mobile build didn't install

[Julesssss]

@thesahindia yep, you're correct. Not sure what happened there 😕

[Julesssss]

👍

[OSBotify]

✋ 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]

🚀 Deployed to staging by @Julesssss in version: 1.1.42-0 🚀

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

[OSBotify]

🚀 Deployed to production by @chiragsalian in version: 1.1.42-6 🚀

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