JS Style Guide

   cartTotal() {
     if (
       !this.meetsCheckoutMinimum &&
       this.stateHandler !== this.getOrderMinimumState
     ) {
       this.stateHandler = this.getOrderMinimumState;
     }

     if (this.waitForTippers) {
       return;
     }

     this.updateTimeout = setTimeout(() => {
       this.refreshState();
     }, 750);
   },

   cartTotal() {
      /*
       * Default the state handler to the getOrderMinimumState if they are 
       * currently below the order minimum.
       * This is necessary for when the user reaches the minimum then 
       * removes some items that places them below the minimum again.
       */
     if (
       !this.meetsCheckoutMinimum &&
       this.stateHandler !== this.getOrderMinimumState
     ) {
       this.stateHandler = this.getOrderMinimumState;
     }

     if (this.waitForTippers) {
       /*
        * Avoid refreshing the state if we are still waiting for tipper 
        * data to be populated. This flag **should** only be enabled 
        * during the initial mount of the component
        */
       return;
     }

     this.updateTimeout = setTimeout(() => {
       this.refreshState();
     }
   },

   handleCloseATCDrawer(event) {
     const addToCartButtonLabels = [
       ...SuccessMessagesCollection.toJSON().map(
         successMessage => successMessage.message
       )
     ];

     if (
       !event ||
       !addToCartButtonLabels.find(
         label =>
           event.target.innerText && event.target.innerText.includes(label)
       )
     ) {
       this.atcDrawer.isOpen = false;
     }
   }

   handleCloseATCDrawer(event) {
     const addToCartButtonLabels = [
       ...SuccessMessagesCollection.toJSON().map(
         successMessage => successMessage.message
       )
     ];

     if (
       !event ||
       !addToCartButtonLabels.find(
         label =>
           event.target.innerText && event.target.innerText.includes(label)
       )
     ) {
       /* Right now the PDP has product carousels that are written in Marionette and not Vue.
          The if condition above can be removed when we convert those carousels to Vue.
          Clicking on the Add to Cart button when it is in Vue does not register as an outside click
          on the atcDrawer, but when it is a Marionette component it does.
        */
       this.atcDrawer.isOpen = false;
     }
   }

const a = 9.81; // gravitational force
const b = 5; // time in seconds
const c = (1/2)*a*(b^2) // multiply the time and gravity together to get displacement.

const computeDisplacement = (timeInSeconds) => {
  const gravitationalForce = 9.81;
  const displacement = (1 / 2) * gravitationalForce * (timeInSeconds ^ 2);
  return displacement;
}

  // This is a
  // multi-line
  // comment.

  /*
   * This is a multi-line comment.
   * You can set up your editor to automatically format a comment like this.
   */

  /* Using a multi-line comment for a single line. */

  // Using a double slash for single line comment.

TheOrderReviewPage
TheCatalogResultsPage

<template>
 <div class="OrderSnapshot">
   <LoadingIndicator v-if="!lastShipment" class="OrderSnapshot_Loading" />
   <LastOrderSnapshot
     v-else
     :is-expanded="lastShipmentIsExpanded"
     :is-primary="!isThreeDaysPastShipped"
     :items-are-expanded="lastShipmentItemsAreExpanded"
     :shipment-date="lastShipment.get('parsedShipmentDate')"
     :shipment-items="lastShipmentItems"
     :tracking-link="lastShipment.get('trackingLink')"
     :tracking-number="lastShipment.get('trackingNumber')"
     @toggle-expanded="toggleLastOrder"
     @toggle-expanded-items="toggleLastOrderItems"
     @track-link="trackClick($event, null, lastShipment.get('statusName'))"
   />

   <LoadingIndicator v-if="!nextShipment" class="OrderSnapshot_Loading" />
   <NextOrderSnapshot
     v-else
     :amount-below-minimum="amountBelowMinimum"
     :is-expanded="nextShipmentIsExpanded"
     :is-primary="isThreeDaysPastShipped"
     :items-are-expanded="nextShipmentItemsAreExpanded"
     :items-loading="nextShipmentItemsLoading"
     :can-ship="nextShipmentCanShip"
     :shipment-date="nextShipmentDate"
     :shipment-items-data="nextShipmentItemsData"
     @toggle-expanded="toggleNextOrder"
     @toggle-expanded-items="toggleNextOrderItems"
     @track-link="trackClick($event, null, nextShipment.get('statusName'))"
   />
 </div>
</template>
<script>
// External modules
import * as Sentry from '@sentry/vue';
import analytics from '@/helpers/analytics';
import { isAfter, sub } from 'date-fns';

// Components
import LastOrderSnapshot from './LastOrderSnapshot';
import NextOrderSnapshot from './NextOrderSnapshot';
import LoadingIndicator from '@/components/LoadingIndicator';

// Services
import getCustomer from '@/services/get-customer';
import getFirstEditableShipment from '@/services/get-first-editable-shipment';
import getLastShipment from '@/services/get-last-shipment';

export default {
 components: {
   LastOrderSnapshot,
   NextOrderSnapshot,
   LoadingIndicator
 },
 data() {
   return {
     customer: null,

     lastShipment: null,
     lastShipmentIsExpanded: false,
     lastShipmentItemsAreExpanded: false,

     nextShipment: null,
     nextShipmentIsExpanded: false,
     nextShipmentItemsData: [],
     nextShipmentItemsAreExpanded: false,
     nextShipmentItemsLoading: true
   };
 },
 computed: {
   amountBelowMinimum() {
     [...]
   },
   isThreeDaysPastShipped() {
     [...]
   },
   lastShipmentItems() {
     [...]
   },
   nextShipmentDate() {
     [...]
   },
   nextShipmentCanShip() {
     [...]
   }
 },
 created() {
   this.fetchCustomer();
   this.fetchLastOrder();
   this.fetchNextOrder();
 },
 methods: {
   async fetchCustomer() {
     this.customer = await getCustomer(this.$store);
   },
   async fetchLastOrder() {
     try {
       const shipment = await getLastShipment(this.$store);
       if (!shipment) throw shipment;
       this.lastShipment = shipment;
     } catch (e) {
       if (window.boot && window.boot.DEBUG) {
         // eslint-disable-next-line no-console
         console.debug(e);
       }
       Sentry.captureException(e);
     }
   },
   async fetchNextOrder() {
     try {
       const shipment = await getFirstEditableShipment(this.$store);
       if (!shipment) throw shipment;
       this.nextShipment = shipment;

       const items = await shipment.getRelated('items', {
         include: 'variant,variant.product',
         ordering: 'adjusted_price,-created_at',
         insert: 0,
         refundedPreorders: 0
       });
       const itemsPromises = items.map(async item => {
         const variant = await item.getRelated('variant');
         if (variant.get('isAvailable')) {
           const product = await variant.getRelated('product');
           const data = {
             fullName: variant.get('customerFacingName'),
             id: item.id,
             name: product.get('name'),
             quantity: item.get('quantity')
           };
           return data;
         }
         return null;
       });
       const unfilteredData = await Promise.all(itemsPromises);
       this.nextShipmentItemsData = unfilteredData.filter(
         data => data !== null
       );
       this.nextShipmentItemsLoading = false;
     } catch (e) {
       if (window.boot && window.boot.DEBUG) {
         // eslint-disable-next-line no-console
         console.debug(e);
       }
       Sentry.captureException(e);
     }
   },
   toggleLastOrder() {
     this.trackClick(
       'home_order_snapshot_clicked',
       'Last_Order',
       this.lastShipment.get('statusName')
     );
     this.lastShipmentIsExpanded = !this.lastShipmentIsExpanded;
     this.nextShipmentIsExpanded = false;
     this.nextShipmentItemsAreExpanded = false;
   },
   toggleLastOrderItems(update) {
     this.lastShipmentItemsAreExpanded = update;
     if (update) {
       this.trackClick(
         'home_order_snapshot_expanded_clicked',
         'Last_Order',
         this.lastShipment.get('statusName')
       );
     }
   },
   toggleNextOrder() {
     this.trackClick(
       'home_order_snapshot_clicked',
       'Next_Order',
       this.nextShipment.get('statusName')
     );
     this.nextShipmentIsExpanded = !this.nextShipmentIsExpanded;
     this.lastShipmentIsExpanded = false;
     this.lastShipmentItemsAreExpanded = false;
   },
   toggleNextOrderItems(update) {
     this.nextShipmentItemsAreExpanded = update;
     if (update) {
       this.trackClick(
         'home_order_snapshot_expanded_clicked',
         'Next_Order',
         this.nextShipment.get('statusName')
       );
     }
   },
   trackClick(action, label, status) {
     analytics.structuredEvent('home', action, label, status);
   }
 }
};
</script>
<style lang="scss">
[ ... ]
</style>

<template>
 <div class="SignupForm">
   <form class="SignupForm_Content">
     <SkyInput
       id="user-email"
       v-model="email"
       :error="error"
       :placeholder="inputPlaceholder"
       class="SignupForm_Input"
       block
       type="email"
     >
       <template v-if="invalidEmailError" #error>
         Hmm - that doesn't seem to be a valid email address.
       </template>
       <template v-else #error>
         You are not eligible for this offer. If you are a current customer,
         please <a href="https://www.grove.co/pantry-login">login</a>.
       </template>
     </SkyInput>
     <SkyButton
       type="submit"
       class="SignupForm_Button"
       data-id="acquisition_flow_get_started_welcome_cta"
       @click.prevent="onSubmit"
     >
       
     </SkyButton>
   </form>
   <div class="SignupForm_Disclaimer">
     By submitting your email, you accept Grove's
     <SkyLink :to="ROUTES.privacy.to"></SkyLink> and
     <SkyLink :to="ROUTES.terms.to">.</SkyLink>
   </div>
 </div>
</template>

<script>
import { ROUTES } from '@/constants'
import { SkyInput, SkyButton, SkyLink } from '@groveco/skylight'
import {
 registerUser,
 CustomerSubmittedInvalidEmail,
 CustomerSubmittedIneligibleEmail,
 CustomerCheckedOutBefore,
 CustomerIsSignedIn,
} from '@/services/register-user'
import { navigateTo } from '@/services/navigate-to'

import { AcquisitionFlow } from '@/analytics/acquisition-flow/events'

export const DEFAULT_INPUT_PLACEHOLDER = 'Enter your email address'
export const DEFAULT_CTA_LABEL = 'Claim My Offer'

export default {
 components: {
   SkyInput,
   SkyLink,
   SkyButton,
 },
 props: {
   inputPlaceholder: {
     type: String,
     default: DEFAULT_INPUT_PLACEHOLDER,
   },
   ctaLabel: {
     type: String,
     default: 'Claim My Offer',
   },
 },
 data: () => ({
   email: null,
   /** Error to surface to user, if any */
   error: null,
   ROUTES,
   RegistrationError: {
     CustomerSubmittedIneligibleEmail,
     CustomerSubmittedInvalidEmail,
   },
 }),
 computed: {
   invalidEmailError() {
     return this.error instanceof CustomerSubmittedInvalidEmail
   },
 },
 methods: {
   async onSubmit(event) {
     this.$analytics.emit(AcquisitionFlow.CTAClicked, {
       currentUrl: window.location.href,
       ctaId: event.target.getAttribute('data-id'),
     })
     try {
       const newOrUpdatedCustomer = await registerUser(
         this.$api,
         this.$sentry,
         this.email
       )
       navigateTo(ROUTES.productOfferPicker.to)
       this.$analytics.emit(AcquisitionFlow.EmailSignupMade, {
         sessionCustomer: newOrUpdatedCustomer,
       })
     } catch (error) {
       const { constructor, sessionCustomer } = error
       switch (error.constructor) {
         case CustomerSubmittedInvalidEmail:
           this.error = error
           this.$analytics.emit(AcquisitionFlow.ErrorShown, {
             constructor,
             sessionCustomer,
           })
           return
         case CustomerSubmittedIneligibleEmail:
           this.error = error
           this.$analytics.emit(AcquisitionFlow.ErrorShown, {
             error,
             sessionCustomer,
           })
           return
         case CustomerCheckedOutBefore:
           navigateTo(ROUTES.memberHomepage.to)
           return
         case CustomerIsSignedIn:
           navigateTo(ROUTES.productOfferPicker.to)
           return
         default:
           /*
            * An unexpected error arose. This may mean that no session/customer
            * has been established, and/or the submitted email hasn't been
            * registered onto the customer. We do a best effort to proceed
            * since it is still be possible for the customer to claim offer and
            * sign up through checkout.
            */
           if (sessionCustomer?.email !== this.email) {
             this.$analytics.emit(AcquisitionFlow.EmailSignupFailed, {
               sessionCustomer,
             })
           }
           this.$sentry.captureException(error, {
             extra: {
               message: 'Unexpected error during customer signup.',
               sessionCustomer,
               submittedEmail: this.email,
             },
           })
           navigateTo(ROUTES.productOfferPicker.to)
       }
     }
   },
 },
}
</script>

<style lang="scss">
[ ... ]
</style>

/** Processes offer claim based on presence or absence of sessionid. */
const processOfferClaim = async (email, fallbackOfferCodeParam, formId) => {
 const fallbackOfferCode = fallbackOfferCodeParam || null;
 const session = await getCurrentSession();
 if (session && session.customerId) {
   await handleExistingSession(session.customerId, email, fallbackOfferCode);
   return;
 }

 // If there's no preexisting sessionid, we can attempt customer signup.
 const endpoint = new URL('/api/customer/', window.location.origin);
 const request = {
   method: 'post',
   headers: vndApiHeaders,
   body: JSON.stringify({ data: { type: 'customer', attributes: { email } } }),
 };
 const response = await fetch(endpoint, request);
 const result = await parseResponseBody(response);

 try {
   if (
     (response.status === 201 || response.status === 200) &&
     result?.data?.id
   ) {
     const customerId = result?.data?.id;

     if (analyticsEnabled) {
       // To match behavior in SPA, we log success on customer creation success
       // (rather than success for the entire flow).
       trackGetStartedSuccess();
       const hashedEmail = await hashEmail(email);
       if (hashedEmail) {
         trackEmailSignupSuccess(customerId, hashedEmail);
       }
     }

     // Make a best-attempt at applying the offer for the customer
     // Regardless of failure, we will still kick them into the SPA
     let appliedOfferCode = null;
     try {
       appliedOfferCode = await attemptOfferApplicationWithFallback(
         email,
         customerId,
         fallbackOfferCode
       );
     } catch (error) {
       console.error(error);
     }

     redirectToGrove('/how-it-works/offers/', appliedOfferCode);
     return;
   }

   if (
     response.status === 400 &&
     result?.errors?.message.startsWith(
       'Account with this email already exists'
     )
   ) {
     // customer has checked out before
     if (analyticsEnabled) {
       trackGetStartedFailure(SIGNUP_STATES.UNAUTH_EXISTING_EMAIL);
     }
     showSignupError(
       'You are not eligible for this offer. If you are a current customer, please <a href="https://www.grove.co/pantry-login">login</a>.',
       formId
     );
     return;
   }

   throw new UnhandledGroveApiResponseError(
     endpoint,
     request,
     response,
     result
   );
 } catch (error) {
   if (analyticsEnabled) {
     trackGetStartedFailure(SIGNUP_STATES.UNEXPECTED_ERROR);
   }
   showSignupError('Oops, something went wrong.', formId);
   console.error(error);
   if (error instanceof UnhandledGroveApiResponseError) {
     console.error('Request object', error.request);
     console.error('Response object:', error.response);
     console.error('Response data as json:', error.result);
   }
 }
};

​​/**
* Registers a user by associating an email to a customer model.
*
* 1. If no session/customer currently exists: user is registered by creating a
*    session and customer with the given email.
* 2. If a session already exists with a customer: user is registered by
*    patching the existing customer with the given email.
*
* If the email is not successfully registered onto a customer, an error is
* raised.
*
* Note that if the given email already belongs to a customer, the preexisting
* customer object may get clobbered and the registration may still succeed --
* unless the related customer has already checked out before.
*
* Note that specific errors are raised for when the customer on the session is
* ineligible for registration.
*
* @param {object} api - the API plugin
* @param {object} sentry - the Sentry plugin
* @param {string} email - email to register user with
*
* @throws {CustomerSubmittedIneligibleEmail} When the submitted email already belongs to customer that has checked out
* @throws {CustomerCheckedOutBefore} When customer has checked out before
* @throws {CustomerIsSignedIn} When customer is already signed in
* @throws {UnexpectedError}
*
* @returns {CustomerInfo} The updated session customer
*/
export const registerUser = async (api, sentry, email) => {
 if (!validEmail(email)) {
   throw new CustomerSubmittedInvalidEmail(undefined)
 }

 let sessionCustomer
 let getError
 try {
   sessionCustomer = await getSessionCustomer(api, sentry)
 } catch (error) {
   getError = error
 }

 if (getError && !(getError instanceof SessionDoesNotExist)) {
   throw new Unexpected(getError, undefined)
 }

 if (getError instanceof SessionDoesNotExist) {
   // No active session: initiate session and create new customer
   try {
     sessionCustomer = await getOrCreateCustomer(api, email)
     emit(SessionCustomer.Created, {
       customer: sessionCustomer,
     })
     sentry.configureScope((scope) => {
       scope.setUser(sessionCustomer)
     })
     return sessionCustomer
   } catch (error) {
     if (error instanceof EmailNotUsable) {
       throw new CustomerSubmittedIneligibleEmail(sessionCustomer)
     } else {
       throw new Unexpected(error, sessionCustomer)
     }
   }
 }

 // No error, so session customer exists; patch customer with email if eligible.
 if (sessionCustomer.hasCheckedOut) {
   throw new CustomerCheckedOutBefore(sessionCustomer)
 }

 if (sessionCustomer.email) {
   throw new CustomerIsSignedIn()
 }

 try {
   sessionCustomer = await updateCustomer(api, sessionCustomer.id, {
     email,
   })
   emit(SessionCustomer.Updated, {
     customer: sessionCustomer,
   })
   sentry.configureScope((scope) => {
     scope.setUser(sessionCustomer)
   })
   return sessionCustomer
 } catch (error) {
   throw new Unexpected(error, sessionCustomer)
 }
}

       const variants = await shipment.getRelated(
         'variants',
         {
           query: {
             include: 'product,product.brand'
           },
         }
       );

<script>
export default {
 // [...]
 data: () => ({
   brand: null,
   brandAttributes: null,
   brandDetails: null
 }),
 created() {
   this.fetchData();
 },
 methods: {
   async fetchData() {
     this.product = await this.$store.get('product', this.productId);
     await mapServices(this, {
       brand: getBrand(this.product),
       brandAttributes: getBrandAttributes(this.product),
       brandDetails: getBrandDetails(this.product)
     });
   }
 }
};
</script>

/**
* Get the `brand` of the `product`.
*
* @param {Object} product Product model
* @param {Object} options Options for Backbone Store request
* @returns {Promise|Object} Brand Model
*/

export default async function getBrand(product, options) {
 return await product.getRelated('brand', options);
}

/**
* Get the `brandAttributes` related to the `brand`.
*
* @param {Object} product Product model
* @returns {Promise|Object} BrandAttributes Collection
*/

export async function getBrandAttributes(product) {
 const brand = await getBrand(product, {
   query: {
     include: 'attributes'
   }
 });
 return await brand.getRelated('attributes');
}

/**
* Get the customer facing `brandDetails` into a simple Object for easy access and fewer bugs that would break a page.
*
* @param {Object} product Product model
* @param {Object} options Options for Backbone Store request
* @returns {Promise|Object} Customer facing brand attributes
*/

export async function getBrandDetails(product) {
 const brand = await getBrand(product);
 return brand.pick('name', 'slug', 'description', 'canonicalImage');
}

export default async function(store, email) {
 const customer = await getCustomer(store);
 const formattedCustomerId = formatCustomerId(customer.id);

 if (typeof email !== 'string' || email.length <= 0) {
   throw new Error('Email must be non-zero length string');
 }

 customer.set('email', email);
 const deferredCustomer = store.update(customer);

 try {
   await deferredCustomer;
   _analytics.structuredEvent(
     'customerMembership',
     'signupRegistered',
     'email'
   );
 } catch (e) {
   let message;
   if (e?.response?.responseText) {
     const errorBody = JSON.parse(e.response.responseText).errors;
     if (e.response.responseText.includes('email already exists')) {
       _analytics.acquisitionEvent(
         ACQUISITION_FLOW_ACTIONS.SIGNUP_GET_STARTED_FAILED,
         formattedCustomerId,
         SIGNUP_STATES.UNAUTH_EXISTING_EMAIL
       );
     } else {
       _analytics.acquisitionEvent(
         ACQUISITION_FLOW_ACTIONS.SIGNUP_GET_STARTED_FAILED,
         formattedCustomerId,
         SIGNUP_STATES.UNEXPECTED_ERROR
       );
     }
     message = Object.keys(errorBody)
       .map(error => {
         if (Array.isArray(errorBody[error])) {
           return `${error}: ${errorBody[error].join(',')}`;
         } else {
           return `${error}: ${errorBody[error]}`;
         }
       })
       .join('\n');
   } else {
     message = 'Oops, something went wrong';
     _analytics.acquisitionEvent(
       ACQUISITION_FLOW_ACTIONS.SIGNUP_GET_STARTED_FAILED,
       formattedCustomerId,
       SIGNUP_STATES.UNEXPECTED_ERROR
     );
   }

   // Undo the customer update
   // Fixes GC-1871
   customer.set('email', null);

   throw new Error(message);
 }

 const newCustomer = await deferredCustomer;
 _analytics.acquisitionEvent(
   ACQUISITION_FLOW_ACTIONS.SIGNUP_GET_STARTED_SUCCEEDED,
   formattedCustomerId,
   SIGNUP_STATES.UNAUTH_NEW_EMAIL
 );

 _analytics.signup('email', newCustomer);
}

   async onSubmit(event) {
      this.$analytics.emit(AcquisitionFlow.CTAClicked, {
        currentUrl: window.location.href,
        ctaId: event.target.getAttribute('data-id'),
      })
      try {
        const newOrUpdatedCustomer = await registerUser(
          this.$api,
          this.$sentry,
          this.email
        )
        navigateTo(ROUTES.productOfferPicker.to)
        this.$analytics.emit(AcquisitionFlow.EmailSignupMade, {
          sessionCustomer: newOrUpdatedCustomer,
        })
      } catch (error) {
        const { constructor, sessionCustomer } = error
        switch (error.constructor) {
          case CustomerSubmittedInvalidEmail:
            this.error = error
            this.$analytics.emit(AcquisitionFlow.ErrorShown, {
              constructor,
              sessionCustomer,
            })
            return
          case CustomerSubmittedIneligibleEmail:
            this.error = error
            this.$analytics.emit(AcquisitionFlow.ErrorShown, {
              error,
              sessionCustomer,
            })
            return 
          default:
            /*
             * An unexpected error arose. This may mean that no session/customer
             * has been established, and/or the submitted email hasn't been
             * registered onto the customer. We do a best effort to proceed
             * since it is still be possible for the customer to claim offer and
             * sign up through checkout.
             */
            if (sessionCustomer?.email !== this.email) {
              this.$analytics.emit(AcquisitionFlow.EmailSignupFailed, {
                sessionCustomer,
              })
            }
            this.$sentry.captureException(error, {
              extra: {
                message: 'Unexpected error during customer signup.',
                sessionCustomer,
                submittedEmail: this.email,
              },
            })
            navigateTo(ROUTES.productOfferPicker.to)
        }