Business Info - Info Panel

• Type: Story
• Status: Closed
• Priority: Major
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.4.13 DXP GA1, 7.4.3.4 CE GA4, Master
• Component/s: Raylife, Solutions
• Labels:
  • qa_test_map_update_not_needed
  • qa_validated
• Epic Link: Raylife - Insurance Application - Business

User Story

As a new insurance shopper getting a quote on Raylife for my business, I want to be able to learn more about some of the questions asked about my business so that I can stay informed and make the right selections.

Acceptance Criteria:

Given that I’m a new insurance shopper that is trying to answer questions about my business for my BOP quote, when I need more information on some questions, then I should be able to see additional details to help me understand.

Dynamic Information Section:

• The following questions on the “Let’s get to know your business!” page will contain a “More Info” button:
  • Years of industry experience?
  • Percent of sales from used merchandise?
• When “More Info” is clicked, a dynamic informational section will be displayed on the right side of the quote application

Example of Styling:

• Informational Panel content will be Liferay Web Content
• Informational Panel will be be dismissible by the user
• Each question that has the button will have it’s own informational section displayed when “More Info” is clicked for that question
  • “Years of industry experience?” info to display:
    • Title: “Years of industry experience”
    • Text: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra felis eget dictum vestibulum. Nullam vulputate dolor erat, in facilisis nisl luctus nec.“
    • Secondary Text:  "If you have questions or need help click the chat button in the bottom right to chat with an Agent."
    • CTA:
      • “Learn More” - this CTA is a dummy link
  • “Percent of sales from used merchandise?” info to display:
    • Title: “Percent of sales from used merchandise”
    • Text: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra felis eget dictum vestibulum. Nullam vulputate dolor erat, in facilisis nisl luctus nec.“
    • Secondary Text:  "If you have questions or need help click the chat button in the bottom right to chat with an Agent."
    • CTA:
      • “Learn More” - this CTA is a dummy link

Mobile Responsiveness:

• All pages must be mobile-friendly
• NOTE: ACTUAL MOBILE-RESPONSIVE DESIGNS AS SHOWN IN THE MOCKUP WILL BE COVERED UNDER A SEPARATE EPIC (LPS-134804).  WE JUST NEED TO MAKE SURE THAT THE STORY CAN BE VIEWED AS PASSABLE ON A MOBILE DEVICE

UX Design:

https://www.figma.com/file/Qmm3nunuK0mRoNTX2JI6qy/raylife-website-2.4?node-id=50%3A766671