REVIEWS

This component provides a card for displaying a review and comes with a full set of actions that can be taken on the review.

Contact Spokesbusters for any questions or concerns.

Actions

The actions that the review card provides are:

• Marking review as Action Required, No Action Required, Responded
• Responding in product
  • Facebook
  • Google
  • My Listings
• Responding a second (third, fourth, etc.) time in product
  • Facebook
  • My Listings
• Respond using review response templates
  • Only if they are passed into the review card input
• Publish/Unpublish from My listing
  • Only works for some review sources
• Publish/Unpublish from Review Widget
  • Only works for some review sources
• Edit previous response
  • Only works for some review sources
• View previous commets/responses
  • Only works for some review sources
• ConnectAccountDialog prompting to connect account when trying to respond
  • Only works for Facebook and Google
• Sharing to social
  • Only if Social Marketing is activated
• Sending feedback about a review response through Task Manager
  • Only if Task Manager is activated
• Approving review response submitted through Task Manager
  • Only if Task Manager is activated
• Click on a reviewer's name to be taken to their profile
  • Provided we obtained the url to their profile

Requirements

To setup the component, you will need to:

1. Install the Reviews package into your project
   • npm install @vendasta/reviews --save
2. Install the required SDKs
   • npm install @vendasta/reputation --save
   • npm install @vendasta/templates --save
   • npm install @vendasta/heimdall --save

Optional

The optional features the review card provides are:

• Customizable Connect Account Dialog
  • Can change the messages displayed
  • Can change the redirect path (relative to parent)
    • Will use productEntryUrl to open the business' settings page in a new tab if redirectPath is not provided
    • Will not redirect them anywhere if both redirectPath and productEntryUrl aren't provided
• Business link to their reviews page
  • Can render a business link (the business' name and address) that redirects to their reviews page by providing the product entry URL (for reputation management) and business information.
• Highlighting Options
  • Can specify a phrase and offsets to highlight
    • Will highlight each instance of the phrase that begins at a provided offset
    • It will fallback to highlighting every instance of the phrase does not start at a provided offset
• Digital Agent View for Task Manager
  • Digital Agent View functionality requires implementing ReviewsService methods for updateReviewDraft and requestApproval
  • Reach out to Pioneers if needed

Internationalization (i18n)

The review card ships with it's own translations!

Currently supported languages:

• English
• French
• Portuguese
• Czech

A few things to note:

• Conflicting translation keys will be clobbered
  • All of the review card's translations start with "COMMON_REVIEW_CARD" so conflicting translations it shouldn't be an issue
• Currently you will need to npm install @vendasta/reviews to receives updates to translations
  • This means that you may need to fix your usage of the review card if breaking changes happened since you last updated
  • Although, the translations are fairly mature so translation updates will probably be major like adding languages, not minor like fixing typos

Customize implementations for Actions

The component was first designed for RepMan client so all these actions are supported by hitting SR endpoints by default. However, it might not be applicable for other projects like MultiLocation and Task Manager. Customized implementations might be necessary to integrate the component into these projects.

To provide your own implementation, make your own reviews service by extending the default ReviewsService and override the method for specific action.

Following example shows overriding publishReview with reviewApiService from reputation service:

…
@Injectable()
export class ReviewCardService extends ReviewsService {
  constructor(http: HttpClient, alertService: AlertService, translateService: TranslateService,
    protected reviewApiService: ReviewApiService) {
    super(http, alertService, translateService);
  }
  …
  publishReview(review$: Observable, accountGroupId: string, partnerId: string): Observable {
    return review$.pipe(
      take(1),
      flatMap(r => {
        return this.reviewApiService.updateReview({
          reviewId: {
            accountGroupId: accountGroupId,
            reviewId: r.reviewID
          },
          isPublished: true,
          fieldMask: { paths: ['isPublished'] },
        }).pipe(
          catchError(err => {
            console.error(err);
            return ObservableEmpty;
          }),
          withLatestFrom(review$),
          map(([_, rvw]) => {
            return { ...rvw, isPublished: true };
          })
        );
      })
    );
  }
}

Next you will need to provide your service as ReviewService in your module file

import { CommonReviewCardModule, ReviewsService } from '@vendasta/reviews';
…
@NgModule({
  …
  providers: [
    …
    { provide: ReviewsService, useClass: ReviewCardService },
  ],
})