Netcomm Plugin

Task: PRD-618 - Getting issue details... STATUS

Outline:

We need to make a new shopify plugin for Netcomm. This plugin will be copy of their old plugin. Here are the feature list of old plugins:

eKomi Official Shopify Plugin for NetComm

This plugin will be made with new Shopify Designs (please check eKomi Plugins for reference ) .

Overview:

The plugin will run from the Plugin Dashboard system and serve Shopify as an API.
Research is required to implement the new generation of Shopify plugin which is an Embedded App.

The embedded app is served within the Shopify Admin Dashboard.
The app will provide installation and uninstallation functionality.
The main requirement within the app is to capture Netcomm and or eKomi configuration settings and persist that to a DB.

Affected Resources:

Netcomm and eKomi plugins. Shopify is changing and it will affect our future plugins.
Plugin Dashboard DB schema will be changed and a new table introduced for the plugin config settings.
Plugin Dashboard environment variables will have new variables added to their respective config files: list file changes outside of Plugin. System files.

Timeline:

Process:

1. Requirement Gathering. 

   • Local Dev Setup & Plugin Dashboard Onboarding. PRD-642

   • Shopify Onboarding. PRD-643

2. Planning & Design. 

   • Plugin - Coding - Planning & Unassigned time tracking. PRD-644

3. Implementation.

   • Dev setup

     • Local Dev Setup & Plugin Dashboard Onboarding. PRD-642

   • Shopify setup

     • Shopify Onboarding. PRD-643

   • Plugin development

     • Plugin - Coding - Planning & Unassigned time tracking. PRD-644

     • Plugin - Coding - Installation. PRD-773

     • Plugin - Coding - Uninstallation. PRD-774

     • Plugin - Coding - Configuration - CRUD. PRD-763

     • Plugin - Coding - Refactor & Comment & Document. PRD-764

     • Widget Store Front Display Functionality - Identify functionality requirements for displaying Netcomm widget in store front. PRD-855

     • Widget Store Front Display Functionality - Build functionality in code. PRD-856

Process Breakdown:

1. Requirement Gathering:

   • Plugin Dashboard Repo - Local Dev Setup & Research. 

     • Develop overview of system.

     • Define system purpose.

   • Shopify Dashboard & Research.

     • Develop overview of Shopify system.

     • Define Shopify requirements.
       

2. Planning & Design:
   The plugin is broken down into components, namely:

   1. Plugin Dashboard Repo - Local Dev Setup & Research.

   2. Shopify Dashboard & Research.

   3. DB Schema

   4. Plugin Install - Process:

   5. Plugin Uninstall Process:

   6. Plugin Configuration - eKomi & Netcomm

   7. Widget Token Configuration

   8. Widget Store Front Display Requirements

   9. Widget Store Front Display Functionality
      

3. Implementation:

   1. Plugin Dashboard Repo - Local Dev Setup & Research:

      1. Setup environment to develop - environment specifics needed for the repo to work.

         1. RabbitMQ : Add settings.

            1. Docker-Compose file:

                 rabbitmq:
                   image: rabbitmq:3.8
                   container_name: plugindashboard_rabbitmq
                   ports:
                     - "5672:5672"
                     - "15672:15672"
                   healthcheck:
                     test: ["CMD", "rabbitmqctl", "status"]
                     interval: 30s
                   restart: unless-stopped
                   volumes:
                     - ../shared-data/rabbitmq:/var/lib/rabbitmq

         2. Docker-Compose and Parameters file need to have the App’s Client Id & Client Secret added.
            Both are Hex value strings.

            1. Docker-Compose file:

                     NETCOMM_API_KEY: 2de2b028c0c30db8de8e44c5bacfd5ed 
                     NETCOMM_API_SECRET: c3c5932fa8aeb97b80eddf132bc11abf

            2. Parameters file:

                   netcomm_api_key: '%env(NETCOMM_API_KEY)%'
                   netcomm_api_secret: '%env(NETCOMM_API_SECRET)%'

         3. So based upon our tech stack it seems like we actually just use the PHP library / dependancy to intergrate the app with Shopify.

            1. Composerr.json → "phpclassic/php-shopify": "~1.0",
               https://github.com/phpclassic/php-shopify.git
               

   2. Shopify Dashboard & Research:

      1. Learn what Shopify requires and how to do development with them.
         Shopify PHP - https://github.com/Shopify/shopify-api-php
         https://shopify.dev/docs/apps/launch/app-requirements-checklist
         https://shopify.dev/docs/api/app-bridge
         

      2. Shopify app authentication and authorization.
         https://shopify.dev/docs/apps/build/authentication-authorization
         https://shopify.dev/docs/apps/build/authentication-authorization/set-embedded-app-authorization?extension=javascript

         1. Authentication is the process of verifying the identity of the user or the app. To keep transactions on Shopify’s platform safe and secure, all apps connecting with Shopify APIs must authenticate when making API requests.

         2. Authorization is the process of giving permissions to apps. When an app user installs a Shopify app they authorize the app, enabling the app to acquire an access token. For example, an app might be authorized to access orders and product data in a store.
            Outline of the Shopify Auth process:

            1. Create a route for starting the OAuth method such as /installAction.

            2. In this route, the Shopify\Auth\OAuth::begin method will be used.

            3. The begin method returns a URL that will be used for redirecting the user to the Shopify Authentication screen to complete the OAuth process, your app needs to validate the callback request made by Shopify after the merchant authorizes your app to access their store data.

            4. To do that, you can call the Shopify\Auth\OAuth::callbackAction method in the endpoint defined in the redirectPath argument of the begin method.

         3. App minimal required permissions:

            1. View personal data:
               Store Owner → Name, email address, phone number, physical address.
               Minimal use of information from shopify which means we pass certain compliance expectations.

               {
                 "storeId": 66872279297,
                 "storeName": "ek-dev-plugins",
                 "storeEmail": "productmanagement@ekomi-group.com",
                 "storeDomain": "ek-dev-plugins.myshopify.com",
                 "storeOwnerName": "eKomi Product",
                 "accountCreated": 0
               }

         4. In the Shopify App Dashboard Configuration Settings these must be added for installation and authentication (The callback verification):

            1. App URL

            2. Preferences URL (optional)

            3. Allowed redirection URL(s)

         5. Compliance Webhooks that Shopify requires to be registered.
            Every app that's distributed through the Shopify App Store must subscribe to the following compliance webhook topics in the Partner Dashboard:

            1. Customer data request endpoint - customers/data_request - Requests to view stored customer data.

            2. Customer data erasure endpoint - customers/redact - Requests to delete customer data.

            3. Shop data erasure endpoint - shop/redact - Requests to delete shop data.
               When you receive one of the compliance webhooks, you need to take the following actions:

               • Confirm that you've received the request by responding with a 200 series status code.

               • Complete the action within 30 days of receiving the request. However, if you're unable to comply with a redaction request because you're legally required to retain data, then you shouldn't complete the action.

         6. Security requirements:
            Security header to only allow iframes to work in the provided domains.

            // Setting this directive guarantees that your app can be framed only within the shop admin.
            header("Content-Security-Policy: frame-ancestors " . $secureShopUrl . " https://admin.shopify.com;");

      3. Shopify - Ngrok.
         In the Shopify ecosystem, embedded apps run in an iframe in a production environment. In order to test the functionality of your app within that context in development, you’re going to want to tunnel what you have running locally to an accessible URL.

         1. https://ngrok.com/

         2. Setup Ngrok for local development with Shopify platform.

            1. Set the Ngrok URL as the URL for your webhook call backs in Shopify Admin.

            2. Customer data request endpoint → https://a80d-41-193-138-209.ngrok-free.app/netcomm/customers/data_request
               

   3. DB Schema:
      Create Table: netcomm_configuration
      Advised to have the user_id and other fields as they will probably part of a plan or future relationship.

      

   4. Plugin Install - Process:
      Link to Installation Process flow:
      

      

      1. Install requires registration as an app provider.

         1. Checks by the Shopify shop URL if it exists, if not then proceeds with installation.
            "shopUrl": "uextension.myshopify.com",
            "secureShopUrl": "https:\\/\\/uextension.myshopify.com",

      2. Authentication process and Token exchange.

         1. Retrieves the hmac & host & timestamp GET variable fields to prepare for authentication.
            "hmac": "67265c0683abeab279465c633ccb98ed86bebe456cf396189e6283c61665b78d",
            "host": "YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvdWV4dGVuc2lvbg",
            "timestamp": "1720782483"

      3. The app registers within Shopify and Customer’s shop.
         Creates the App’s auth package with the new shop URL and a new Auth request.

         // Shopify Netcomm App ID & Key & URL
         $appConfig = $this->getNetcommAppConfig($secureShopUrl);
                     
         // Creates static configuration for Shopify
         $shopifySdk = ShopifySDK::config($appConfig);
         
         // Auth calls static ShopifySDK config set earlier. This should redirect after the auth request is approved.
         AuthHelper::createAuthRequest(self::APP_SCOPES, $redirectUrl);

         The auth request goes to Shopify which verifies and redirects the user to login and then passes the request to the call back callback method which will receive the Access Token and register the necessary webhooks with shopify retrieving a ID for each.

      4. Privilege establishment.
         Privileges are requested during authentication the result is a a install modal from Shopify asking user to approve the App’s privilege request.

         

      5. Persists to DB.
         Once Install is clicked then the Shopify shop details will be stored in the DB, and the user redirected to the Netcomm & eKomi Configuration Page to complete installation.
         After the user has clicked the install button then Shopify sends a request to our callbackAction to register all the webhooks through a Curl request.
         Important header information:

                 curl_setopt($ch, CURLOPT_HTTPHEADER, [
                     'X-Shopify-Access-Token: ' . $accessToken,
                     'Accept: application/json',
                     'Content-Type: application/json'
                 ]);

   5. Plugin Uninstall Process:
      

      

      1. Authentication process and Token exchange.

      2. The app un-registers within Shopify and Customer shop.

      3. Deletes from DB.
         The same process as the install but in reverse order.
         

   6. Plugin Configuration - eKomi & Netcomm
      

      

      1. Plugin Configuration settings.

         1. Options are provided to be either an eKomi client or Netcomm or both.

            1. eKomi Client settings:

               1. ShopId

               2. Shop Interface Password

            2. Netcomm Client settings:

               1. NetcommId

         2. Configuration outcomes:

            1. Case#1:
               Is Netcomm member: Yes
               Is eKomi member : No
               In that case we show a dedicated widget to client in front-end store, which shows the simple seal.

            2. Case#2:
               Is Netcomm member: Yes
               Is eKomi member : Yes
               In that case we just authenticate the credentials and create the widget seal runtime and show the widget to client store successfully.

            3. Case#3:
               Is Netcomm member: No
               Is eKomi member : Yes
               In that case we just authenticate the credentials and create the widget seal runtime and show the widget to client store successfully.

   7. Widget Token Configuration:
      Only one setting is made available:

      1. Widget Token

   8. Widget Store Front Display Requirements:
      

   9. Widget Store Front Display Functionality: