faq pages

package.json

@@ -20,7 +20,8 @@
     "@astrojs/sitemap": "^1.3.3",
     "astro": "^2.7.0",
     "hast-util-select": "^5.0.5",
-    "unist-util-visit": "^4.1.2"
+    "unist-util-visit": "^4.1.2",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@uswds/compile": "^1.0.0",

sass/_components/side_nav.scss

@@ -29,6 +29,9 @@
     }
 }
 .sp_site_nav {
+    // let the sidebar sticky to the top left when screen are scrolling
+    position: sticky;
+    top: 0;
     h4 {
         margin-top:0;
         padding-top: 1em;

src/assets/js/faqHelper.js

@@ -0,0 +1,64 @@
+export function handleAccordionSearch(){
+
+    function expandAllAccordions(){
+        const buttons = document.querySelectorAll('.usa-accordion__button');
+        buttons.forEach((button)=>{
+            button.setAttribute('aria-expanded','true');
+        })
+        var accordionContents = document.querySelectorAll('.sd-accordion-js');
+        accordionContents.forEach((content)=>{
+            //alert(content.innerHTML)
+            content.removeAttribute('hidden');
+        });
+
+    }
+    function collapseAllAccordions(){
+        const buttons = document.querySelectorAll('.usa-accordion__button');
+        buttons.forEach((button)=>{
+            button.setAttribute('aria-expanded','false');
+        })
+        var accordionContents = document.querySelectorAll('.usa-accordion__content');
+        accordionContents.forEach((content)=>{
+        content.setAttribute('hidden','hidden');
+        });
+
+    }
+    window.addEventListener("keydown", function(e) {
+        // when user press cmd+f or ctrl + f for search, make all accordion expanded for search
+        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+            expandAllAccordions();
+        }
+    })
+
+    window.addEventListener('beforeunload',function(e){
+        // beforeunload no longer working?
+        alert("search window closed");
+        collapseAllAccordions();
+    });
+}
+    // // below JS is to increase original heading level from the FAQ collection because addtional H1 tag Frequently Asked Qunestions is added. 
+    export function increaseHeadingLevels(){
+        const headings = document.querySelectorAll('h1, h2, h3, h4,h5');
+        headings.forEach(heading =>{
+            if(heading.innerHTML !="Frequently Asked Questions")
+            {
+                const currentTagName = heading.tagName;
+                const currentLevel = parseInt(currentTagName.substring(1))
+                const newLevel = currentLevel + 1; 
+                const newTageName = `H${newLevel}`
+                const newHeading = document.createElement(newTageName);
+                newHeading.innerHTML = heading.innerHTML;
+                Array.from(heading.attributes).forEach(attr=>{
+                    newHeading.setAttribute(attr.name,attr.value);
+                })
+                heading.parentNode.replaceChild(newHeading,heading);
+            }
+        })
+    }
+
+// function to  generate dynamic id
+let counter = 0;
+export function generateUniqueId(type){
+    return `${type}-${counter ++}`
+}
+

src/components/Accordion.astro

@@ -0,0 +1,28 @@
+---
+//import {generateUniqueId} from '../assets/js/faqHelper';
+//const uniqueID = generateUniqueId({category})
+
+import {v4 as uuidv4} from 'uuid';
+const { question, expand=false, heading_level="h2" } = Astro.props;
+
+const uniqueID = uuidv4()
+
+const valid_headings =["h2","h3","h4","h5","h6"]
+const DynamicHeading = valid_headings.includes(heading_level)? heading_level: "h2";
+---
+<div class="usa-accordion usa-accordion--bordered margin-top-2">
+    <DynamicHeading class="usa-accordion__heading">
+      <button
+        type="button"
+        class="usa-accordion__button"
+        aria-expanded={expand}
+        aria-controls={uniqueID}
+      >
+        {question}
+      </button>
+    </DynamicHeading>
+    <!--sd-accordion-js has no actual style, it used as identifier in faqHelper.js to querry all accordiance, since usa-accordion__content class also used on banner -->
+    <div id={uniqueID} class="usa-accordion__content usa-prose sd-accordion-js">
+      <slot />
+    </div>
+  </div>

src/components/GSAHeader.astro

@@ -161,7 +161,7 @@ import searchIcon from "../assets/images/usa-icons/search--white.svg"
               </a>
             </li>
             <li class="usa-nav__secondary-item">
-              <a href="javascript:void(0);">
+              <a href="faq/">
                 FAQs
               </a>
             </li>

src/components/SinglePageSideNav.astro

@@ -0,0 +1,22 @@
+---
+const { id, headings,path, title} = Astro.props;
+
+---
+<div class="usa-layout-docs__sidenav desktop:grid-col-4">
+  <nav class="sp_site_nav" aria-label="Secondary navigation">
+    <h4>{ title }</h4>
+      <ul class="usa-sidenav">
+            {headings.map(h => (
+                <li class="usa-sidenav__item">
+                  <a 
+                    href={`#${h.slug}`}
+                    onclick={`document.querySelector('#${h.slug}').scrollIntoView({behavior: "smooth"}); event.preventDefault();`}
+                  >
+                  {h.text}
+                  </a>
+                </li>)
+            )}
+     </ul>
+  </nav>
+</div>
+

src/content/config.ts

@@ -0,0 +1,12 @@
+import { z, defineCollection } from 'astro:content';
+
+// Define types for content collections
+const faqCollection = defineCollection({
+  schema: z.object({
+    title: z.string(),
+    order: z.number()
+  }),
+});
+export const collections = {
+  'faq': faqCollection,
+};

src/content/faq/cardholder.mdx

@@ -0,0 +1,139 @@
+---
+title: Cardholder FAQ
+order: 2
+---
+import Accordion from '../../components/Accordion.astro';
+
+# Cardholder FAQ
+
+<Accordion question="Whom should I contact for help with my account?" expand="true">
+  Account holders should reach out to their Agency/Organization Program Coordinator (A/OPC), who will be able to answer most account-related questions.
+
+  Account holders can also contact the bank directly by calling the customer service phone number listed on the back of their card.
+
+  If the issue cannot be resolved by the A/OPC or bank, reach out to the GSA Center for Charge Card Management (CCCM) at [[email protected]](mailto:[email protected]).
+
+</Accordion>
+
+<Accordion  question="How do I obtain a GSA SmartPay account? What do I need to qualify?">
+
+  To obtain a GSA SmartPay account, employees should reach out to their A/OPC and supervisor. Each agency has different criteria for issuing accounts.
+
+</Accordion>
+
+<Accordion  question="What may be purchased with my GSA SmartPay account?">
+Account holders should contact their A/OPC to learn more about their agency’s specific policies on purchases. In general: 
+
+  - Purchase accounts are used to pay for supplies or services.
+  - Travel and Tax Advantage Travel accounts are used to pay for travel and travel-related expenses.
+  - Fleet accounts are used to pay for fuel, maintenance and repair of government owned/operated motor equipment, aviation, small marine vessels and large marine vessels.
+  - Integrated accounts involve two or more business lines (i.e. fleet, purchase and/or travel) on a single account.
+
+
+</Accordion>
+
+<Accordion  question="What policies exist regarding the use of the GSA SmartPay payment solutions? ">
+
+The [Treasury Financial Manual](https://tfm.fiscal.treasury.gov/) is the Department of the Treasury’s official publication of policies, procedures and instructions concerning financial management in the federal government. 
+
+There are a number of policies that govern the use of government payment solutions, including:
+- Federal Acquisition Regulations (FAR).
+- Federal Travel Regulations (FTR).
+- Federal Management Regulations (FMR).
+- OMB Circular A-123, Appendix B.
+- Public Law.
+- American Recovery and Reinvestment Act.
+- For more information on the policies listed above, visit the [Policies and Legislation page](https://smartpay.gsa.gov/content/policies).
+
+Additionally, many agencies have regulations that are specific to their program and tailored to their agency's mission and operating procedures. Contact your A/OPC to learn more information about your agency’s specific policies.
+
+</Accordion>
+
+<Accordion  question="What are the training requirements? How will my A/OPC know that I have completed my online training?">
+Per OMB Circular A-123, Appendix B, all GSA SmartPay program participants must take the required training and receive a certificate of completion prior to their appointment. In addition, refresher training must be completed every three years (or more often as required by your agency’s training policy). 
+
+If permitted by your agency’s A/OPC:
+- Account holders may complete the required training and obtain a certificate of completion via the [GSA SmartPay Training website](https://training.smartpay.gsa.gov/). 
+- Account holders may retake the course and quiz as refresher training. A passing score will enable the account holder to reprint the certificate with the new date of completion.
+
+Note: If an account holder has previously taken the course and passed the quiz on the training website, a certificate can be reprinted once logged in.
+
+</Accordion>
+<Accordion  question="What is my responsibility when it comes to paying taxes when using my GSA SmartPay account?">
+In some cases, when using certain types of accounts, account holders are exempt from taxes on their purchases.  Please visit the [SmartTax](/smarttax/) section of the program website for more information on taxes.  
+
+- **Centrally Billed Accounts (CBA):** Purchase, fleet and some travel accounts where payment is made directly to the bank by the government.  
+- **Individually Billed Accounts (IBA):** Travel accounts where payment is made directly to the bank by the individual. Each state determines the exemption status for IBAs.
+- **Integrated Accounts:** Considered CBAs, but may involve both CBA and IBA transactions, which is determined at the agency’s task order level.
+- **Tax Advantage Travel Accounts:** Combines CBA and IBA transactions to provide tax exemption at the point of sale for rental car and lodging expenses.
+
+
+</Accordion>
+<Accordion  question="What is account misuse and what are the potential penalties?">
+Intentional use of government accounts for other than official government business constitutes misuse, and depending on the situation, may constitute fraud. Each agency develops and implements policies related to employee misuse. 
+
+Examples of misuse include:
+- Purchases that exceed the account holder's limit.
+- Purchases that are not authorized by the agency.
+- Purchases for which there is no funding.
+- Purchases for personal consumption.
+- Purchases that do not comply with the policies.
+
+Potential consequences for the account holder may include:
+- Counseling.
+- Cancellation of the account.
+- Written warning. 
+- Notation in the employee’s performance evaluation.
+- Reprimand.
+- Suspension.
+- Termination of employment.
+
+In the case of purchase account or CBA travel account misuse, the employee may be held personally liable to the government for the amount of any unauthorized transactions. Depending on the agency and the circumstances, there are a number of applicable laws that can result in fines or imprisonment.
+
+</Accordion>
+<Accordion  question="Is a merchant allowed to photocopy a GSA SmartPay card?">
+Both Visa and Mastercard state in their guidelines that a merchant is allowed to make/store a photocopy of a charge card provided they do NOT record or copy the PIN and/or Card Verification Code (CVC) data in any manner or for any purpose.
+
+Note: According to [U.S. Code Title 18, Part 1, Chapter 33, 701](https://uscode.house.gov/view.xhtml?path=/prelim@title18/part1/chapter33&edition=prelim), it is illegal for a merchant to photocopy your government ID.
+</Accordion>
+<Accordion  question="Can account holders use their account to fund alternative payment mechanisms, such as PayPal?">
+Third Party Payment processors (such as PayPal) offer e-commerce/internet payment solutions for commercial transactions. The processors own merchant accounts that allow them to accept and process orders on behalf of other companies. Many vendors choose to utilize third party payment processors in order to accept online payments without having to establish a merchant account through a bank. Some vendors find that this is a more cost-effective option, especially if they do not process enough transactions to establish their own merchant account to accept charge cards. Vendors pay third-party processors a transaction fee for these services rather than processing transactions through a merchant bank.
+
+Transactions that are made using third-party payment platforms are considered to be high-risk transactions. We recommend GSA SmartPay account holders consider alternative methods of payment. 
+
+Although there are not any existing governmentwide policies or procedures outlining the use of third-party payment processors, several agencies have developed internal policies related to this issue. These policies range from the complete restriction of third party payment processors to less restrictive policies which allow for transactions to be made when a workaround cannot be identified.
+
+
+</Accordion>
+<Accordion  question="What is the liability for lost or stolen cards?">
+Agencies and/or individual account holders are not liable for charges made on a lost or stolen card after the card is reported as lost or stolen. A new card with a new account number will be issued to the account holder within 48 hours of the request. Any previous authorized activity will be transferred to the new account.
+</Accordion>
+<Accordion  question="Why do I need to provide documentation to change my name on my IBA?">
+Since banks are required to conform to the Know Your Customer (KYC) requirements, they must confirm the identity of every applicant and account holder. 
+KYC requirements are driven from the [Bank Secrecy Act](https://www.fincen.gov/resources/statutes-and-regulations/bank-secrecy-act) and [Patriot Act](https://www.fincen.gov/resources/statutes-regulations/usa-patriot-act). Documentation, such as a marriage certificate, is needed to support this requirement. 
+This also allows the banks to maintain account accuracy throughout the life of the customer relationship. Supporting documentation also decreases 
+the chance of fraud and assists the banks in ensuring they are in compliance with the [Fair Credit Reporting Act](https://www.ftc.gov/tips-advice/business-center/privacy-and-security/credit-reporting) in the event an account is reported to the credit bureaus.
+</Accordion>
+
+## Travel Account Holders
+
+<Accordion  question="How does the GSA SmartPay Tax Advantage Travel Account work?" heading_level="h3">
+The Tax Advantage Travel Account is issued to an employee designated by the agency/organization in the employee’s name. The agency will work directly with the contractor bank to:
+- Establish the billing and payment procedures for Centrally Billed Account (CBA) transactions versus Individually Billed Account (IBA) transactions.
+- Determine if credit checks or other creditworthiness assessments will apply.
+- Identify Merchant Category Codes (MCCs) for rental cars and lodging, in order to exclude those transactions from taxes. 
+
+When the account is used, invoices will be sent to the agency and the account holder for payment. The agency is responsible for the CBA charges on the account, while the account holder is responsible for the IBA charges.
+</Accordion>
+<Accordion  question="Is it mandatory to use a federal government travel account when traveling?" heading_level="h3">
+Yes. In accordance with the Federal Travel Regulations (FTR), Section 301-51, Paying Travel Expenses, agencies are required to pay for official travel expenses using a government authorized travel payment solution, unless granted an exemption in accordance with FTR policies.
+
+For the Department of Defense, see DoD Instructions 5154.31 and the Joint Travel Regulations (JTR).
+
+
+</Accordion>
+<Accordion  question="What is split disbursement in relation to travel vouchers?" heading_level="h3">
+The payment process called split disbursement as described in OMB Circular A-123, Appendix B divides a travel voucher reimbursement between the contractor bank and the traveler, sending the balance owed directly to the appropriate party.
+
+Note: Although OMB Circular A-123, Appendix B in Chapter 2.5 requires all executive branch agencies to implement split disbursement, it may not yet be operational in your agency. Please contact your A/OPC for further details.
+</Accordion>